WYIM is an app with a new approach to how new and used items are being re-sold. This app was designed with the user at the forefront to guarantee a great shopping experience.
Timeline:
May 12, 2024 - November 8, 2024
Role:
UI/UX Designer on a solo project
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high - fidelity prototyping, usability studies, and conducting competitive audits.
Problem:
While shopping on an app that sells second-hand items, users feel like when they are buying used items it can be challenging to see what the product looks like when the seller doesn't really show a clear image of the item being sold. Also, users feel as if some of the items they are paying for are not a great deal considering the items are used.
Goal:
To provide a way for users to get a clear view of the product they want to purchase. Doing this would assure the user that they know the quality of what they're viewing. Along with providing a clear view of the item to the user, there should be a way for them to know that they are getting a great discounted price.
User Research:
With the rise of mobile e-commerce apps that allow you to resale used and brand-new items, I wanted to interview users that used these apps frequently to get a deeper understanding of what these apps provide. I also wanted to hear the positive and negative experiences the users had with these apps. By doing this I could get a clearer understanding of what I should include in my app and what I could learn, from their experience.
After interviewing the participants I gathered the answers I received and looked for any pain points the users had with buying used items from stores, and also while shopping on an app that sells used items.
Personas:
Once I had all the information organized, I had a better idea of how to start designing the app. I then created my personas based on the results from the interviews. Creating these personas gave me a clearer idea of the users that would be using this app and their needs.
User Journey Maps:
After mapping out my personas journey and seeing the pain points that they ran into, it was clear to me two features I should add to my app.
Feature 1: Video Feature
The video feature allows the user to get a better look at the quality of the product, and also an overall better experience with the product than the user would have with just a picture. A video would give the user the closest experience to viewing the product in person.
Feature 2: Show the Original Price of the Product
Showing the original price of the product would allow the user to see the discount they are getting when buying a product on this app.
Competitive Audits:
Since re-selling new and used products on an app is common nowadays, I wanted to look at different apps and see what they had to offer. I looked at their layouts and some of the similar features that I wanted to have on my app. My goal was to see what I could learn from these brands so that I could have success with designing my app. I took note of what I liked about the apps and features that I noticed that I could make better.
Some of the apps I analyzed to get a deeper understanding of different re-selling apps that are on the market.
Wireframes:
Once I had a good idea of what features to have on my app, I started designing paper wireframes. After many rounds of iterations these were the final frames I decided to use.
I then turned my paper wireframes into digital wireframes.
Usability Studies:
I conducted a round of testing on my low-fidelity prototypes so that I could see what needed improvement before I started my mockups.
Round One findings:
“Adding the item to my cart was unclear.”
“I don't see a way to favorite the items.”
“Tapping the for you page was kinda difficult. I accidentally tapped the video.”
Once I finished my first round of testing I had the information I need to start on my mockups.
When I started my high-fidelity mockups, I decided to use an existing design system from the Figma community. With the rise of companies having their design systems set in place, this was great practice for me as a new designer looking to join a company that may have an existing design system. With creating my mock-ups I wanted to keep the user's needs in mind. Through many stages of iteration, my mockups were ready to be turned into high-fidelity prototypes.
High-fidelity prototypes:
Round two Usability Testing:
With my high-fidelity prototypes completed, I was ready for round 2 of my usability testing. Like the first round, I was able to get feedback from real users and see if they ran into any pain points while completing the different tasks. All of my participants have bought items that were re-sold online or from an app.
Round two findings:
“The message icon was confusing.” The participant was unclear if it was a direct message or a public comment.
“The small image on the video may be confusing.” Participant D accidentally tapped the small image to go to the next page.
“I noticed that there was no where for me to add my payment info. Is the account already set up?"
“The exit icon could be more clearer, it doesn’t let me know I’m going back to the homepage to shop.”
While conducting the usability test, I noticed that there was no where for the the user to share the items.
Some of the design changes that I made based off of round two findings:
I wanted to elevate my design to really meet the user's needs so I made quite a few changes. While going over my design with a mentor I pointed out that I had to adjust the size of the icons from the design system because they were really small. We discovered that I was using an incorrect design system that was not for a mobile app. I had to implement another design system from the Figma community to my design that was set up for a mobile app. With this new design system, I changed my color scheme and used new icons and button components.
Prototype for my final mockups:
The Final Product:
Keeping in mind the information I collected from my user research interviews at the begging of my design process, I made sure that my design met the user's needs. I implemented a page that has just videos so the user can get a clear idea of what the item looks like and its quality. Since social media is the new normal, I wanted this app to give the enjoying feeling as if they were scrolling through TikTok or Instagram reels.
This page also has a video of the item being sold. For the discounted price, instead of having one set original price, I put the price range. I did this because researching the items the prices varied. I took the prices from websites that sold these items as brand new so then the user could see that they are still getting a discount.
I added a lot more frames to my final design. Since I wanted my app to stand out from other competing apps I came up with a flow that would make my app better. Adding these frames gives the user a better shopping experience. These frames allow me to get a closer look into the user and get their personal information and interest. With this information, it would feed the algorithm to suggest things that they would like to see.
Additional Feature:
Most apps that are successful in user experience tend to evolve and add new features to their apps. Doing this helps to improve the user experience and keeps them returning. A few weeks after I completed my project I added a new feature to my app that would give the user a guaranteed clear photo. This feature helps assist users in taking clear photos, it’s a camera that has autofocus and auto brightness.
What did I learn?
I learned a lot while designing this app. The constant testing and reiteration of my design just helped me grow and become a better designer. I think the most challenging aspect of this project was using an existing design system. I had to do a lot of research and watched a lot of videos to get a better understanding of it. With practice, I started to see the value of having a design system set into place. Though I had a bumpy start with the design system once I got the hang of it it made my design process so much more faster and efficient.
For my next steps, I want to continue to test and get feedback from users and see what I can add to make this app continue to grow and fit the user’s needs.