My Role: UX Research, UX Design, UI Design, Usability Testing
Tools Used: Adobe XD, Adobe Photoshop, Google Forms, Zoom
My Role: UX Research, UX Design, UI Design, Usability Testing
Tools Used: Adobe XD, Adobe Photoshop, Google Forms, Zoom
"Using an application or a website should feel as natural as the sand between your toes."
"Using an application or a website should feel as natural as the sand between your toes."
"Using an application or a website should feel as natural as the sand between your toes."
VINO'DOWD
Feloh
Marketplace in App
The Challenge
My Role: Lead UX Design, UI Design, Prototype
Timeframe: Team of four completed challenge in three weeks
Tools Used: Adobe XD, Adobe Illustrator, Figma, Google Forms, Trello, Miro
The client is Feloh, a one-of-a-kind social marketplace for hair care and beauty. One-half of the app is for posting content, writing product reviews, and sharing thoughts. This participation earned users cash to go towards beauty purchases in the Feloh marketplace. Just to be clear, our team was only focused on the Marketplace half of the app. Another team at GA tackled the social networking portion.
​
The challenge was to apply UX design methodology to the Feloh app and based on research and testing, develop a new design and prototype. Our client was not happy with the design of the existing app and wanted a look that Millenials and Gen-Zers would find attractive. This would have to be accomplished while keeping in mind Feloh’s creative and fun brand.
​
In the end, the team delivered a logo and icon redesign, a high-fidelity prototype, recommendations for a new navigational scheme, a research packet with survey feedback, task analysis, and usability testing results.
Research
Competitive / Comparitive Analysis
As I mentioned earlier, the Feloh app is a social networking application and e-commerce app. We worked closely with the other team that was creating the social app so that our designs would look and feel like one application.
​
To begin, our research team sent out a survey which resulted in 22 responses that helped us find out where people are currently buying hair & beauty products and why they choose to purchase from the Feloh competitors shown below. Using this data, we were able to identify Feloh's direct and indirect competitors as well as gather information that would help us develop a persona later in the case study.
After completing the competitive and comparative analysis it was clear that the Feloh app provided the needed features for a social marketplace app to have its mark in its respective field. On the other hand, the comparative analysis showed that the Marketplace portion of the app was in need of significant improvement for purchasing, shipping and security.
Task Analysis
A task analysis was conducted with five people who had no knowledge of the Feloh application. They were asked to download the app, complete a specific task, and then they were asked post-task questions. The information they provided was synthesized in the affinity map shown below.
​
-
Easier Checkout process
-
Relevant reviews
-
Clear product categories & labels
-
More details to make informed purchases
The participants participation in the exercise identified the following needs:​
​
-
Security
-
Simpler/Familiar navigation
-
Clear rewards system
-
Option to sort/search products
Personas and Problem/Solution Statement
Meet Michaela Sims
Based on the previous research, we developed a persona that represents Feloh users. This persona was used as a baseline to reflect on as we continued though the project.
Michaela needs
A navigable and secure way to shop in the marketplace that encourages her to view, share, and confidently purchase beauty products.
​
Our solution
To create an easily navigable and secure marketplace where the user can intuitively discover their desired product(s) and have an understanding of the reward system to encourage further engagement on FELOH.
We believe that this will enable users to have a sense of confidence, findability, and security throughout their experience in the FELOH Marketplace application.
​
-
Site popularity could be increased by letting people know that store carries a wide variety of items that are hard to get
​​
-
Store known for excellent customer service
Information Architecture
Our task analysis revealed users became frustrated while trying to find everyday items like a bottle of shampoo. This was because there was no search bar provided, but we also suspected that the way products were currently categorized might also be a cause for frustration.
​
Pre-card sort findings
-
Feloh currently had only 9 Product Categories with no Search, Subcategories, or Filter options
-
When you click on Products not all of FELOH's products populated on this page
-
Some items in Men's Grooming could also live in another category to increase findability
Current Feloh Product Categories
​​
-
Store staff high product knowledge level is important
-
Owner ‘Toy picks of the month’ suggestion
In order to confirm if Feloh product categorization could be improved, we conducted an open card sort. Five participants put 185 Feloh products into the categories they felt made sense.
Key takeaways:
-
Rename the main Product categories so it more aligned with the clients
-
Introduce subcategories so clients can pinpoint their products needs
-
Introduce sort options ex. by Brand
Proposed User Flow for Product Purchase
An analysis of the current user flow for purchasing products was completed and it showed that it was in need of improvement. An improved flow was created and used as a guide for creating the first app prototype.
New Sitemap
Our research showed that new product subcategories were needed and features like a search bar with the ability to sort results were missed.
​
After the current sitemap was created, the research team created a new proposed sitemap for the Feloh Marketplace. Now, with the improved flow and the added features, app users who enjoy browsing through products and users who like to use the search bar first would both find the flow and function easy and satisfying.
​
The new proposed sitemap is shown below.
Design
Sketchs & Wireframes
Our first step was to meet with the client to get her feedback and at the same time look at established brands' websites for inspiration. Once we had a feeling for the type of designs we would like to explore, we began to sketch. After reviewing everyone's sketches, we decided to expand on one of my sketches and start creating black-and-white wireframes.
Protoytpe 1: Usability Testing
We sent the first prototype to users to be tested and received feedback on navigation and design.
Key takeaways:
-
Our testers said the design looked professional but not for the intended modern younger audience "Kind of looks like a school app..."
-
Break up check-out process "The checkout process is like a CVS receipt..."
-
Confusion on if the shopping bag icon translated to "Marketplace"
-
Allow search in the next prototype iteration "Convenience is key!"
Navigation Bar Redesign for Second Prototype
In an effort to change the test user's perception that the app looked "old school', we decided that the navigation bar needed to be redesigned. It went through a few iterations before we landed on our current version. We explored removing the gradient and using just one color to not distract users from Feloh content but to also give a more clean look.
Landing Page Design Changes for Prototype 2
In the first prototype, users were not seeing products immediately. Instead, they would have to first select a category to see products. In the updated version, we added the ability to scroll through categories horizontally and now we are able to highlight products without selecting. Also, if you clicked the category name it would take you to all the products in that category.
First Prototype
Second Prototype
Protoytpe 2: Usability Testing
Again, we sent the test users a script with a specific set of tasks and collected their feedback. The tasks revolved around familiarizing themselves with the reward system, purchasing products and writing a review.
Key takeaways:
-
Our testers said the design looked fun, trendy, energetic and innovative
-
No issues with security and seemed like a legitimate checkout process
-
The colors are fun
-
A comprehensive reward system achieved
This comprehensive prototype is the culmination of a great team effort and an open-minded and cooperative client. Please click on the link and it out!
Next Steps
The client recently received investment capital to put towards version 2.0 of the app which is scheduled to be released in 2021. The team and I believe we delivered on the promise to address the client's concerns and we look forward to seeing if our design will be used for the new version.