*This Project was done under an NDA, some information of the app and work are not included.
Background
Have you ever found yourself at some sort of social function, working the room and greeting everyone with smiles only to get pulled to the side by your closest friend to find out there’s something wrong or inappropriate about your outfit? It’s too late, the damage is done, and you are mortified. You never want to feel this way again. That’s how ToStylMou came to mind, as a safe space to get feedback on your fashion choices and more.
Problem
Personal brand and style are important factors of everyday life however there is no way to receive widespread feedback when users need it. Even the most popular social media platforms only allow ambiguous feedback. People want real-time feedback on their personal brand and style decisions.
Solution
ToStylMou is a unique social media platform that allows users to provide and receive real-time styling feedback.
My Role
User Experience Designer
I worked on a team of four user experience designers to develop the information architecture, user flows, wireframes, and style guide of the app. I created the app icons and conducted three usability tests with the app’s prototype.
The Process
-
Week 1: Understanding ToStylMou
Client Research
Target Market Personas
Application Map (based on client’s mind map)
User Flows (based on client’s mind map)
-
Week 2: Structure and Design
Sketches
Wireframes
Style Guide
-
Week 3: Bringing the App the Life
High-Fidelity Mockups
Prototyping
-
Week 4: Finding Issues
Usability Tests
Findings
Week 1: Understanding ToStylMou
Research
ToStylMou conducted its own target market research and focus group. We all went over the materials provided by the client including the findings from their focus group and a mindmap. A storyboard was created to better familiarize the team with the application and how a target user would use the app. The information gained from her additional research allowed the team to better understand the unique app’s flow.
Target Market Personas
ToStylMou came to us with three types of individuals in their target market. One of my teammates and I went to explore this further and to create a better foundation of information for the type of people who would be using this app.
Online Daters
Professionals
Interviewees
Entrepreneurs
Influencers
Macro-influencers - 40K to 10M followers
Micro-influencers - 1K to 40K followers
After conducting our own secondary research, we ended up focusing on the two users with the most to gain: Professionals and Influencers
Application Map
Based on the mindmap given to us by ToStylMou, we generated an application map. Starting with sketches to be reviewed by all team members before creating a digital version on Miro to present to the client for review.
User Flow
We chose to focus on the four most used task flows:
Creating an account
Making a post
Search for a user
View a post
We narrowed our focus to the two red routes of “Creating an Account” and “Making a Post.” Both are essential for every type of user and key features of what makes ToStylMou unique. If either task flow has issues it would lead to a negative impression for first-time users.
We did not understand the client’s original plan to have the terms and conditions required first for creating an account. We brought this concern to the ToStylMou as it is not normal in apps and that it might be a deterrent. We learned due to the goal of having ToStylMou being a creative space with positivity and constructive criticism vs negativity it was essential for users to know and agree to the terms and conditions early in the accounting creation process.
Week 2: Structure & Design
Sketches
Now that we understood the essential screens and steps, we needed to sketch designs based off of the user flows and application map. We sketched independently to allow for more variations without any influence from the other’s thoughts and inspirations. In the end, we even took parts from some designs and added them to others. For example, in the registration process, I featured a progress bar for users to track how much more was to be completed that the others did not include. As a team, we figured out the best design for the progress bar.
Because the clients wanted their app to feel different than other social media apps, personally I tried a variety of ideas for the home screen and profile screen that are used in other non-social media apps. I kept in mind what users are familiar with and not branching out too far from that. For example using a header more similar to Instagram, grid-like Pinterest, and a more stylized navigation.
Wireframes
Splash Screen
Name
Login
Verification
Terms & Cond.
Completion
DOB
StyleGuide
ToStylMou mentioned at the start of week two that they wanted unique icons, a task put on the style guide team. With a limited amount of time, our first approach was to find an icon kit we believed they would like. With the wireframes finished and the style guide completed enough for reviewal, we put both in a deck sent out prior to our weekly client meeting, and the next day ToStylMou could share their thoughts and ask questions.
After meeting with the client, we were given with the same challenge. The client still wanted more unique icons and buttons. They did not want traditional buttons and icons that were used everywhere so our challenge was to give them something unique but it was essential for us to find something not so different that users will not be able to recognize a button. This was especially important with an app with such a new concept. We did not want to give users too many new things to learn and adjust to. One suggestion from the client was 3D icons so with this and the theme of luxury in mind we got to work
We looked into more icon kits
We designed more custom options
We created a document with examples of popular luxury brands and their button styles to demonstrate that across all types of brands rectangle or pill-shaped buttons are normal
In the end, we went with icons I designed that were 3D-esque but not too bulky especially with an app that is all about content. The focus of ToStylMou and social media apps is the content and it is important not to distract from it. I was successful in making taking traditional icons that everyone is familiar with and making them unique as the client wanted but also specific to their brand with a unique gradient in the brand’s colors. And for the buttons, we ended up going with one of my designs that is not shown but shown (to the fight) are other options presented that the client did not select to move forward.
Week 3: Bringing the App to Life
With the wireframes already made in Figma, teammates Catherine and Abby made their respected red routes into high-fidelity and Katie worked on ToStylMou’s Post and Notification screens and the app’s special feature. Meanwhile, I finished the additional icons to replace the generic placeholder icons and started putting together the final style guide. Abby used Figma’s prototype feature to make a prototype while the screens were being completed.
At the start of week three, we also brought up our strong desire to test our work to find any potential issues. The client was able to connect us with participants from their original focus group.
Week 4: Finding Issues
At the beginning of week four, we sent the prototype for review to the client and went over things together in our weekly meeting with them. Once participants signed up for their available timeslots, the UX team decided who would run which usability tests. Seven moderated usability tests were conducted via Zoom with the clients present to mostly observe and answer any necessary questions. I conducted 3 out of the 7 usability tests.
Findings: Some of the more frequent issues found:
Not easily identifiable icons or wording
Confusion with the different types of posts
Until more familiar with the app, users did not know what screen/page they were on
The clients and UX team were very satisfied with the findings from the usability tests. The team put in a lot of work and positive changes towards the app’s visuals and structure. ToStylMou will have a better foundation moving forward as well as a total usability testing report for the clients to know what’s critical to change next. We made a lot of progress and good change and development but there is still much work to be done, more editing and testing, and iterating.
Next Project?
Pretty Penny
The advice is to start investing as soon as possible. So why is it that nearly half of Americans don’t own stock? Pretty Penny aims to help people learn and overcome their anxiety and confusion around investing.
CityPups
People that live in cities face unique challenges when it comes to finding and adopting the right dog for them and their lifestyles. There are restrictions in their living spaces, limited suitable outdoor spaces, and their schedules and commuting to consider.