When users create an account or rate a post successfully, it is clearly indicated
ToStylMou
UI Design Audit & Heuristic Evaluation
Project Overview
ToSylMou (translated from Greek as "To Style Me") is a social media mobile app for users to rate and comment on potential fashion looks posted by others, providing feedback that ultimately allows users to be confident in their style choices. While ToStylMou was originally targeted towards female fashion influencers, the app's target users expanded after the concept of posting and rating "styles" was applied to subjects beyond fashion: A "Food and Drink" category was developed in the app, allowing chefs to post potential plating designs. With the beta launch of ToStylMou approaching, the client wanted to ensure that their product was as user-friendly as possible for the wider user base.
Over the course of one month, I worked with a team of three UI/UX designers to conduct a UI design audit which focused on ToStylMou's visual design in tandem with a heuristic evaluation that assessed the app's overall usability.
The results were presented in two deliverables. The team's in-depth findings were compiled in a Google Sheets table, supported by app screenshots and redesign mockups. A Canva slideshow was also presented to the client, detailing the findings at a higher level.
My Role
My team and I divided Jakob Nielsen's ten usability heuristics amongst ourselves to assess each while reviewing both ToStylMou mockups and the mobile app itself. I was assigned the following heuristics:
Visibility of System Status
Help Users Recognize, Diagnose, and Recover from Errors
Consistency and Standards
I was responsible for creating redesign mockups in Figma for the entire team's recommendations. The mockups better demonstrated the recommendations' effectiveness in increasing ToStylMou's usability.
I also documented any spelling and grammar issues found during my evaluation.
Jakob Nielsen's Usability Heuristics
Jakob Nielsen’s Usability Heuristics and Severity Rating Scale
Jakob Nielsen's ten usability heuristics and severity rating scale were used as the framework for the heuristic evaluation of ToStylMou. The heuristics measure the usability of interfaces and identify issues and roadblocks that must be resolved.
The severity rating scale establishes which problems are a high priority to fix over others.
Heuristic Evaluation Findings
Visibility of System Status
I first explored ToStylMou in search of screens and UI elements related to the visibility of system status. The majority of my findings were successes.
According to Nielsen, the confirmation of form submission should always be distinct, which was the case throughout the app.
Help Users Recognize, Diagnose, and Recover from Errors
When evaluating ToStylMou's ability to clearly communicate errors, usability problems greatly outnumbered the successes. These were rated 4 on Nielsen's severity scale.
One example was a vague error message encountered during the sign-up process that simply instructing the user to enter a valid username. I developed two different resolutions to this usability problem, addressing two potential causes of a username-related error.
My first redesign solution was based on the username being taken by another ToStylMou user:
My second redesign solution was based on the username not meeting specific requirements:
Consistency and Standards: Iconography
ToStylMou was largely successful in terms of consistency and standards due to the app's iconography. The icons used throughout were familiar and represented what users would expect from using other social media apps.
Most screens with one call to action featured
a flat bronze button, but several featured
a slightly embossed white button
Consistency and Standards:
Color Palette
ToStylMou's overall color palette was consistent throughout the app. However, the design of individual UI elements, such as primary buttons, was inconsistent across different user flows.
This cosmetic issue was rated 1 on Nielsen's severity scale.
Adding to the inconsistency, the ghost buttons' outline color was not the same
Secondary buttons also varied on several screens. Most screens featured a solid white secondary button, but the Login and Sign Up screens used ghost buttons.
To resolve the inconsistency, I simply recommended that the client decide on the primary and secondary buttons' designs, then ensure that the decided designs were applied throughout ToStylMou.
Consistency and Standards:
Typography
The small size of text in forms' input fields throughout the app was even more important to fix. On the Sign-Up screen, user-entered information did not overwrite the form's field names. While this reduced users' cognitive loads, the legibility of a product's text is critical to its success.
This issue was rated 3 on Nielsen's severity scale.
My proposed solution of listing all form field names above the input fields would both increase legibility and still maintain a low cognitive load for users:
Conclusion
I was initially unsure if my team and I would discover problematic areas throughout ToStylMou given that two rounds of usability testing had been conducted prior to our interactions with the client. However, this project was a true testament to the notion that design is an iterative process and that there is always room for improvement. The client was naturally appreciative of the team's feedback, as well as my redesign mockups.
The client was also thankful for my assessment of spelling and grammar. Correcting these issues in particular would improve the professionalism of the ToStylMou mobile app and the overall brand. Knowing that I gave the client the necessary feedback to improve ToStylMou in this way is something that I am very proud of.