FitRoom

I arranged these low-fidelity wireframes into user flows to get into the mind of users and understand how they would complete certain tasks and navigate the product.

With every user flow, I asked who are the users, what goal do they want to accomplish, and what steps they needed to take to achieve that goal.

Performing this exercise with each user flow, allowed me to find missing steps that I needed for a task to be complete and more efficient ways to get users from point A to B.

Once I solidified my user flows from the low fidelity wireframe stage, I proceeded to determine a proper design system and set of design principles that would best serve my users. My design system is created to allow for fluid navigation, consistency, proper brand messaging, and easy engineering handoff.

For the color scheme of the product, I wanted to incorporate the 60-30-10 rule to create a minimal, easy-to-navigate experience for my users.

Incorporating blue as my accent color helps the product signal confidence and trustworthiness while also differentiating itself from competing products that use red in its branding.

Poppins was an ideal typeface to use because its san serif typeface, which is modern and easy to read and aligns with my user base who are young adults accustomed to modernism.

For text, instead of pure black (#000000), I decided to assign #2e2e2e as the text color to lessen the harsh contrast and subconsciously give my users a less strenuous visual experience.

I decided to incorporate multiples of 4px to establish an underlying structure of consistency throughout my designs. Establishing this consistency helped the product with adopting vertical rhythm, proper alignment, and a professional visual design.

Font Size

I primarily used font sizes that were divisible by 4 (8pt, 12pt, 16pt, 20pt, and 24 pt) to create consistency throughout my text and establish a clear hierarchy with screens that held a lot of content.

Spacing and Margins

For spacing, I incorporated a layout grid with a baseline grid height of 4px so I could use easily scalable line heights with text-heavy UI elements. Margins were set at 24 px to be consistent with the baseline gridding.

Because I was designing for a user base that primarily uses Apple products I wanted to incorporate Apple design principles into my designs, specifically the Wayfinding System discussed at the Worldwide Developers Conference. To adhere to the Wayfinding System principle, I made sure that all my designs helped users answer these five questions

• • Where am I?
  • Where can I go?
  • What will I find when I get there? 
  • What’s nearby?
  • How do I get out?

05 Usability Testing

After showing my prototype to stakeholders, I found key design issues and flow issues that disrupted the usability of the product.

I found that my users did not particularly enjoy the experience of viewing an item. Reviewing my “Viewing Item” wireframes, I noticed that some content did not align with my design system. I iterated upon these wireframes to clarify the hierarchy and consistency.

My users also demonstrated concerns around the readability of the UI cards in my product, one of the main, significant components in my product. I enlargened the text to be easily readable and changed the match score to be simple text, so users can easily recognize what the function of the score is.

I originally designed the majority of user flows with overlays to indicate that they were a subset of main pages from the navigation bar like the Home Page, Search Page, etc. However, I found that incorporating overlays confused users on how to navigate back to previous screens and caused issues when prototyping.

I redesigned these overlays as separate screens to make the prototyping process more efficient and easier for users to navigate.

Click the image to access the FitRoom Prototype.