Figma, Adobe Photoshop, Adobe Illustrator, Midjourney, ChatGPT
Individual: including research, analysis, UI design, and testing.
4 weeks,
Mar. - Apr.2024
The primary goal for this project is:
Learning from common e-commerce strategy and audit large successful brands for their websites advantages and disadvantages. Then, bring these insights into the website designing.
The company shared some concerns about E-commerce website.
After the problem is defined, I start to brainstorm and learn from competitors in similar area to get inspiration for the solutions.
Amazon, Target and Trekbikes are 3 platforms similar to my project in different ways. I had a lot of findings(listed below). It’s inspiring to see how they brand their company and products.
Since this project has to be done in a short timeframe and the study about how to increase the purchase conversion rate is well established, I choose to do secondary research instead of primary research. I conducted the research around few questions:
I put all the findings from competitive audit and secondary research together to come up with my ideas to build a trustworthy e-commerce website:
Based on the findings, I started to draft a user flow for placing an order.
.png)
In order to have more clear idea of how the pages should be organized to complete the user flow, I created the site map starting from Homepage.
.png)
In order to test the main flow, make sure the checkout process is easy for users, users could get discount information, and users could find the search and filters. I created few main wireframes and test with 3 participants.
.png)
While testing these wireframes, I received some great feedback to prioritize in my next design iteration:
Considering TerraCamp as a brand, I want it deliver reliable, friendly, and professional concepts to users and create an energetic, adventure spirit, masculine, and outdoor impression. This belief leads to my choice of styles.
Inspired by the mood board, I created the color palette.
.png)
I choose the font Teko for the logo and Montserrat for other text , since they give a professional and outdoor impression and also has the flexibility from short title to long paragraph.
.png)
After adding color, image, text and interaction. I had the high fidelity prototype.
.png)
In the process of creating the style guide, accessibility is an important factor.
After get the feedback from my participants and define the style, I started to bring everything together.
.png)
.png)
After synthesize all the information I got from the usability study, I list all the problems by their urgent and important level. Then I decide to take action on problem P0-P2, which are:
.png)
After bring the insights to high fidelity prototype 1.0, I got the revised high fidelity prototype 2.0, which is the final result of this project. Please interact with the prototype here.
.png)
During the whole design process, I learned a lot from my participants. If I had more time I would like to create a review section and a blog which connects users together with some events and gatherings.
A UX designer currently based in LA
