Summary
My Role
Information Architect, Researcher, UX Designer
Team
Justin Chu, Sammi Kwan
Tools
Adobe XD & Adobe Illustrator
Duration
3 weeks (December 2019)
Skills
Information Architecture, Heuristic Evaluation, Prototyping
About
One of the main concerns regarding fila.com is the navigation system. Fila maintains an effective site but it lacks the principles of ordering content in terms of focused navigation and descriptive/accurate labels.
Hence, I decided to conduct a heuristic evaluation using Nielsen’s Heuristic List, originally researched and created by Jakob Nielsen, to diagnose the problems of the website and look at how to improve it.
The Situation
The main challenges I focused on were the global navigation, local navigation, labels, and content filters. When it comes to designing a website, there are certain challenges that need to be addressed to ensure a smooth user experience.
One of the main issues that can arise is poor navigation caused by a lack of hierarchy or focus. This can make it difficult to find specific products or styles of products. It's important to have a proper labeling system in place to improve navigation and help users find what they're looking for more easily. Too many unrelated products can be frustrating and confusing for users, resulting in a negative experience and a potential loss of sales for the company. After all, if products can't be found, they can't be sold.
One of the main issues that can arise is poor navigation caused by a lack of hierarchy or focus. This can make it difficult to find specific products or styles of products. It's important to have a proper labeling system in place to improve navigation and help users find what they're looking for more easily. Too many unrelated products can be frustrating and confusing for users, resulting in a negative experience and a potential loss of sales for the company. After all, if products can't be found, they can't be sold.
The problem with the Original Task Flow
We were asked to focus on one task flow, so we decided to analyze the core task flow of Fila.com.
This task flow is designed based on user interactions with the existing e-commerce website. However, we found that there are certain areas for improvement. For instance, when users search for bottoms, they cannot filter the different types of bottoms, such as shorts, track pants, or dresses. Additionally, when users click on "Style" in the navigation menu, they are presented with too many options under a single label.
To address this issue, we recommend using the "Style" label as a collection filter label instead of a global navigation label. While Fila.com is an effective site, there is room for improvement in terms of ordering content for focused navigation and adding descriptive and accurate labels to enhance search functions for users.
Research
To be able to give our users what they need, we knew that we must first empathize with them. By exhibiting compassion for their feelings, thoughts, behaviors, and needs, we were effectively able to identify our user's pain points and solve design problems that came up. During our research, we completed a series of user interviews, heuristic evaluation, and benchmarking to inform our design.
Interviews
We conducted user interviews, through qualitative and quantitative methods to determine patterns, gain statistics and understand the users problems. We successfully completed interviews with 8 participants, aged 20 - 30 living in Toronto. All participants are young professionals and frequently purchase clothing online.
Key Findings:
- Users Prefer to shop by style
- Users were less likely to filter styles by "colour" option
- Unfamiliar with the Fila terminology "Heritage" used in labels
- 75% Users felt the category's in the navigation could use more context
Benchmarking
Competitive analysis can also be referred to as benchmarking. It helps companies set a line of minimum features, products and services to offer in order to serve customers.
Heuristic Evaluation
During the evaluation process of fila.com, both positive and negative findings were discovered using Nielsen’s Usability Heuristics.
The overall performance of the Fila website is fairly satisfying. Many significant usability problems could be found through user testing, for example, if a user wanted to browse for t-shirts they would have to parse through the section "Mens Heritage Tops", within this category lives t-shirts, graphic t-shirts, polo shirts, long-sleeves, crewneck sweaters, and hoodies. The current local navigation only offers user to filter items in the category by price, size, and colour.
Personas
Using insights from my interviews, I then created my primary & secondary personas, Mark, and Melissa which helps to navigate through the expectation, motivation and concern of Fila's target audience throughout the design process. I create them by looking for behavioural patterns in the data that we collect through research.
Define
Card Sort
The card sort's gave insight to terminology, relationships, and categories. I used this information to decide which items should be grouped together in the global navigation and how menu contents should be organized and labelled, and what words we should employ to describe the contents of the site. Those patterns are often referred to as the users mental model. By understanding the users’ mental model, I can increase findability, which in turn makes the product easier to use.
I performed both open and closed card sorting exercises on different groups, where the participants were shown the content with no pre-established groupings and others with pre-established groupings. They were asked to sort cards into groups that they feel are appropriate and then describe each group.
Site Maps
Based on the card sorting exercise I was able to categorize my groupings effectively into a sitemap.
Ideate
New Task Flow
I reorganized a new task flow and made sure the task flow is reasonable and logical.
Low-Fidelity Wireframes
To quickly synthesize the findings and start thinking about the look and feel of the site, I created several drafts of hand drawn wireframes to gather ideas to inform the design.
High-Fidelity Wireframes
Once we agreed upon a design language and new design pattern that aligned with users expectations and Fila's Business goals, I created high-fidelity wireframes in Adobe XD.
UI Kit
Following the Fila's Current branding and UI elements I crafted a UI kit that would inform the Design System for the new Fila site.
Mockups
After creating a wireframe, new navigation labels, and UI kit I began to make the UI designs for the project.
Prototypes
Prototype
The following prototype demonstrates the seamless shopping experience with the improved design patterns, navigation labels, and types of content filters.
Apart from improving the experience of performing the main task - locating and purchasing clothing, we also added a "suggested items"section to show users similar or related styles to the ones they are viewing, this will keep users on the site longer and potentially increase the dollar amount for each purchase.
Hi-Fidelity Clickable Prototype
View the clickable prototype here!
Reflection
Key Takeaway's
This heuristic evaluation exercise equipped me the skills to criticize the user interface design and identify usability problems.
One takeaway from working on this project was understanding the value of user research and planning to synthesize my findings.
