I served as the lead designer and was responsible through all phases from research to implementation. My duties included:
- Conducting industry and user research
- Synthesizing research to define project goals
- Developing preliminary design concepts
- User testing and iterating
- User interface design
Sketch, Photoshop, Illustrator, Invision
Mirror is a hypothetical clothing retailer that has grown into the go-to store for affordable yet trendy pieces, promising to offer something for everyone. They have only just recently decided to launch an online store in order to establish a digital presence and revamp their brand identity.
- Design a responsive e-commerce website that is easy to use and allows customers to browse through all products with filtering options.
- Design a new logo for the company that is modern and neutral enough to attract all types of people and styles.
My first task involved conducting primary and secondary research to identify user needs, wants, and pain points in regards to the online shopping experience. To understand the typical Mirror customer, I carried out 1:1 interviews and examined market research. Through my research, I was able to gain interesting insights on users’ shopping behaviours, experiences, motivations and frustrations, as well as identify potential competitors.
My findings led me to define a target market through a user persona, and from there I was able to develop an empathy map. By expanding on the user's background story, I was able to identify and empathize with their specific needs and pain points.
I then produced a list of features (ranked by priority) that were necessary to create a minimum viable product. A heuristic evaluation on 3 competing brands made it possible to obtain more knowledge on common practices and create a feature matrix.
With further help from participants through a card-sorting exercise, I could observe patterns on how information is most commonly organized on e-commerce sites. I was able to form a basic sitemap that helped me visualize the website’s information architecture. The sitemap laid the foundation for creating user flows and wireframes.
After the research phase, I had to translate my solutions into viable designs that users could view and interact with. Keeping the feature matrix, sitemap, and UI requirements into consideration, I created a series of responsive wireframes for each major page in the online shopping process.
Once a general layout for the site was formed, I started to explore possibilities regarding Mirror’s revamped visual brand identity. The goal was to keep things neutral yet modern, in order to appeal to shoppers of all types and personalities. As such, I decided to go with fonts and colours that evoked the brand’s simple, clean, and fresh personality, without being too distracting. I decided to go with Avenir as the primary typeface as it is easy to read and doesnt look overwhelming in large bodies of text. I used variations of font-weights to establish a clear visual hierarchy.
After iterating on the low-fidelity wireframes and establishing a brand identity, I created a high-fidelity prototype through Invision that users could interact with during the testing phase of the project.
I rounded up a group of participants that were similar to the user persona to test the desktop prototype and provide feedback. Participants were asked to use a filter and add a dress to their shopping cart, as I observed and identified any areas of difficulty or confusion.
Each participant was able to successfully complete the given task, although I found that there were slight hiccups along the way due to the limitations of the prototype itself (and not human error). The usability test allowed me to create an affinity map to visually observe and organize any successes, errors, shared patterns, and room for improvements.
- Most user errors were due to the prototype not being fully functional or not loading properly yet
- E.g. prototype would take a while to load so they would try a different method
- At the moment only one dress can be selected and added to cart
- It was difficult to guide the users correctly about which functions worked without influencing their decision too much
- All participants were able to navigate to women’s dresses page easily, with no errors
- When asked to filter the product results, all participants immediately moved to the “Sort By” drop down menu and knew what to do
- 3 participants were able to seamlessly add the dress to their shopping cart
- 1 participant forgot to select the size first
Moving forward, possible improvements would include:
- Reiterating on the high-fidelity prototype to include more functionalities and features based on user feedback and suggestions (e.g. including another option to access product subcategories)
- Creating pages to complete the check-out process
- Conducting more usability testing for further observation on any positive areas, pain points, and changes that need to be implemented.