A safe space mobile app for real-time feedback to amplify user confidence.
Overview
Problem
People fear harsh criticism, and as the presence of social media and visuals continue to grow, people seemingly feel "expectations" need to be met. People find the need to be consistent and put extra thought into each social media post to stay consistent with their "personal brand". ToStylMou provides a safe space for real-time feedback to amplify user confidence. The social application has been in development for several months with the goal to promote and evolve personal branding with sharing, ratings, and critiques. The problem we faced was the app not being intuitive enough for users to have a seamless experience.
Solution
After reviewing the current app, past research, past usability testing, and goals with stakeholders, our team pinpointed key areas for improvement to create a more intuitive experience. We executed solutions focusing on improving user experience and intuitive recall with the apps' icons, features, and overall flow.
My Role
UI/UX Designer, Researcher, Usability Tester
Tools
Figma, Google Forms, Google Docs, Zoom
Process
We broke the project down into Understanding, Mapping & Sketching; Deciding and Prototyping; Testing; and Iterating and Project Handover.
Understanding, Mapping & Sketching
To start off our project, it was essential to ensure we had a solid understanding of the project, the goals of the key stakeholders, and to create a project plan from this information. Understanding the users of the app, the work that had been done so far, and what they had learned from said work was crucial.
Deciding and Prototyping
Next, we began to collaborate on solutions ideas through sketches, research, and core UI/UX team calls. We determined the key goals of this project were to create more intuitive iconography, update the rating system, ensure all interactive features with posts were intuitive, and to rework the comparison feature. After researching and brainstorming, our team sketched these initial solution ideas: Lo-fi Sketch Solutions
Iconography Solution Ideas
After we researched, brainstormed, and sketched initial solutions, we presented these ideas to the stakeholders. We determined which ideas to move forward with and began to translate those over to the prototype.
Testing
Our first step was to create a testing script for the users we would be testing. We created simple tasks to focus solely on the improvements we made with the goal of keeping testing under 45 minutes per user. Once the test script was complete, we began to recruit users for testing through social media and community outreach. We included users who had previously tested the app as well as new users to get a well-rounded idea of users' intuitive recall.
We conducted 6 remote moderated usability tests over the course of 3 days through Zoom. Each test lasted about 30-45 minutes. Participants were asked to share their screens and complete tasks while they explored the ToStylMou Figma prototype. The goal was to observe how participants interacted with an updated version of the HiFi Prototype and explore a secondary version of ToStylMou.
Before opening the prototype, participants answered questions related to their personal background, social media usage and how they currently received feedback from others. The 4 tasks that the participants had to perform were:
Task 1: View the Home Screen: “You’re already logged in. Go ahead and take a minute or so to explore this screen.”
Task 2: Rating a Post: “A person just posted an image of a dish they made. Give them a score of how they did.”
Task 3: Comment on a Post: “You left the person a rating and now want to let them know more about what you think about the dish.”
Task 4: Rank Images in a Post: “A person is trying to decide between different shoes to purchase. Let them know which ones you like best.”
The issues found during testing have been split into 3 categories. Major meaning they cause the most usability issues, minor meaning they may cause slight confusion or does not suit the attributes of the product, and normal which means these are not critical items that require a redesign.
Major Issues:
The loading circle needs to be more noticeable
Loading circles are too small to be noticeable to most users. We must resize them or change the color to give them greater importance.
Relocate caption section on comparison post
We need to figure out a way for users to have better context of what they are comparing before viewing the photos side by side. A possible fix could be to move the caption above the collage, but continue to have the comment section at the bottom of the page.
Change “Leave a comment!” because it is too jarring for the user
Having “Leave a comment!” showing up immediately after submitting a ranking was too abrupt. We need to design something that nudges or leads a user to leave a comment, but not seem like it’s commanding them to do so.
There needs to be feedback after ranking a comparison post
People like to see results and feel like their vote mattered. So we must design a way to show results information effectively to the user. Maybe by highlighting the comparison winner or showing the amount of votes per image.
Minor Issues:
The trending posts at the top of home may be mistaken for “stories”
Users seem to think that these posts are stories or categories to scroll through like what they see on Instagram, Facebook, Snapchat, etc. We can relocate this info or figure out a way to make it more obvious to the user about what it is on first view. Another option is to rename it “Trending Posts”.
The icons may confuse users upon first use
The icons we used may or may not cause slight confusion to users on first use, but upon further use they begin to understand them better.
The loading circle needs a color change to be on brand
A color change is recommended for the circles to fit the style of the app. We could possibly make it a gradient of colors based off of the style guide.
Future Issues to Improve:
Category icon may not be necessary while viewing the post
Some users assumed the initial posts were meant for marketing purposes
Various alignment and spacing changes need to be made
Icons may need resizing
Iterating and Project Handover
From our user testing, we gained valuable insight into tweaks that needed to be made to the prototype. We iterated key issues on the prototype before handing over the updates. Additionally, we detailed big picture ideas for ToStylMou to explore down the road. Working on this project with two other UI/UX designers and testing it with different users helped us grow in understanding of what users wanted from this app. Users didn't have a lot of issues with the prototype but did have suggestions on how to further the idea of the app.