Note: This project was completed under an NDA. Proprietary information has been omitted and the UX process has been generalized.

As part of my UX Design curriculum, I teamed up with three other UX Design students to work with a client on ToStylMou, their unique social media app. ToStylMou is a platform for users to provide and receive real-time feedback on a range of topics, including fashion, interior design, gaming, food, and more.

ToStylMou had already conducted market research and focus group testing, and also had some rudimentary wireframes/prototypes. They needed us to dig deeper to figure out the functionality of the app and its unique features. During our kickoff meeting we outlined the following deliverables:

• Site map

• User flows

• Wireframes

• Interactive prototype

• Style guide with UI elements

With a time frame of four weeks, we set out to deliver a working prototype that had a firm foundation in information architecture, demonstrated an understanding of the core user, and reflected ToStylMou’s brand identity.

This project was completed 100% remotely, with communication happening via email and Zoom meetings. I led our weekly client meetings to present our work and go over feedback, drawing on my experience as a Strategist at an ad agency, where I often had to present to clients.

The research ToStylMou conducted gave us insight into their audience, which we defined as the following:

Age: 18–35

Profession: college students, entrepreneurs, young professionals, influencers

Favorite Apps: Instagram, TikTok, Pinterest

Goals: define personal style, receive feedback on a personal or professional project, expand social media influence

Struggles: nowhere to receive trusted, real-time opinions to guide them in building or evolving their brand

Before moving into information architecture, each team member conducted an audit of other apps used by our target audience. This gave us an understanding of existing structures and features that would feel familiar to our user.

The client provided a “mind map” they created, which outlined all the features of the app. From this I built a site map in order to give us an overview and initial structure of ToStylMou.

The team also created four user flows. In addition to the account registration flow shown below, we also designed flows for creating a new post, searching for another user, and viewing a post.

After discussing with the client, we decided that the crucial red routes for wireframing and prototyping were registration, adding a post, and interacting with another user’s post. Though account registration is often similar across different social apps, we wanted to make sure that ToStylMou’s specific needs were captured. The client wanted to make sure that ToStylMou is a safe, hate free environment for its users so the terms & conditions are an important part of the registration flow. We also wanted to include an introductory tour as part of the registration process, in order to show a new user ToStylMou’s unique features and how they work.

Each member of the team made some sketches for our red routes. I focused on the structure of the home feed and how a user would interact with another user’s post. Through this sketching process, I reconfigured an aspect of one of the app’s key features. When this was later presented to the client, they loved how it transformed the user interaction and created more incentive for engagement with the app.

As previously mentioned, ToStylMou came to us with some very early wireframes created by a different design team. The client was not happy with these, so we took some time going over them and discussing what did and didn’t work. Because we were working in such a limited time frame, we wanted to make sure our wireframes captured the needs of the client and the users so that we could create a highly functional prototype.

Also in the interest of time, we decided to create wireframes that were a bit higher fidelity, incorporating some initial button and icon ideas. Because the client saw these elements during the wireframing stage, we were more prepared to develop the prototype in the next steps.

The client was very happy with our wireframes and gave us the go-ahead to proceed to the prototype. At this stage we asked ToStylMou about user testing—though user tests were not initially part of the deliverables, as good UX designers we couldn’t deliver an untested product. The client agreed to add this to the process and gave us the contact information of several potential test participants. I reached out to them to schedule tests for the following week once the prototype was complete.

Throughout this process, the team had been dividing up work to make sure it was evenly distributed and could be completed in a timely manner. We did the same with the prototype screens, with three designers each tackling a set of screens and one designer focusing on the UI elements and style guide. I focused on the home feed, creating a post pages, and profile pages. The screens were created in Figma, which enabled us to seamlessly create a prototype to use for testing.

We created a test script with questions pertaining to five specific tasks:

1. Registering as a new user

2. Browsing the home feed

3. Creating a post

4. Viewing your profile

5. Interacting with another user’s post

We conducted tests via Zoom with four participants who had all been part of ToStylMou’s focus group, so they already had some information about the app and how it worked. Though this made the testing process easier, it also meant that we might have missed some important feedback. We added three more participants who were completely new to the app and were able to give us fresh insights.

From the test sessions we identified a few key issues:

• The client requested unique icons, but these created confusion for some users. More familiar icons would prevent users from feeling like they aren’t sure how to proceed or interact with the app.

• The positioning of a slider bar may not be optimal for some users, particularly those on larger devices. Changing the location and orientation could solve this, but it would require further testing.

• Some users were not sure of their location within an app after clicking through to a different page. Adding wayfinding markers, such as page notations or other cues, would help with this. It may also be necessary to revisit the information architecture to see if the structure could be improved.

Other than these issues, we were happy to find that users generally navigated the app with ease and seemed interested in engaging with all the features. Most of the issues that users had could be solved with UI tweaks and minor layout adjustments.

I’m impressed by how much my team and I were able to accomplish in four short weeks, especially with working remotely in different time zones and not having known each other prior to the project. The key to a successful outcome was clear communication, well-defined tasks, and openness to each other’s ideas. And of course, it helped that my teammates are talented and engaged designers who are dedicated to the UX process.

I would have liked to iterate on the feedback we received during testing, but I’ve learned that one part of being a good designer is being able to pass off work to the next team. We delivered a clear, actionable test report and clean design files so that ToStylMou is ready to go to the next level.

Through this process I learned how important it is to adhere to the UX design process and emphasize its necessity to a client who may not be well versed in UX. If I were to go back, I would have done this from the outset and conducted user research interviews during our first week. Though we were able to create a highly functional, user-friendly prototype without this step, it’s possible that it doesn’t address a key user need. But the UX design process is iterative, and the user’s wants are ever-changing, so it’s always possible to keep researching, learning, and evolving.