Project
Capstone UX/UI project to explore a chosen problem space and design a solution.
Challenge
Provide a strong thrift store searching product that provides users information about a thrift store like popularity, inventory rotation, or style.
Solution
An iOS mobile app that can increase user’s success rates of finding new thrift stores in a satisfying experience.
Tools
Tasks: User Research, Screener Surveys, Interviews, Affinity Mapping, Empath Mapping, Personas, User Flows, Sketches, Wireframing, Usability Testing, Prototyping
Programs: Sketch, Miro, Marvel Paper Prototyping, Invision, Procreate
My Role
UX Researcher, UX Designer, UI Designer, Visual Designer, Prototyper
Background
As an avid thrift shopper and an advocate for sustainability, I had the honor of researching and designing a product made for any new or continuing thrift shopper. It is crucial to have a strong platform with the growing rate of consumer secondhand shopping and sustainability,
Research
Survey
34 participants volunteered to provide feedback on the following research questions:
What steps do users take in seeking a new thrift store?
Do users search a specific style when visiting a new store? What type?
How often do thrift stores carry styles that users like?
What are the positive and negative experiences in visiting a new thrift store?
Key Takeaways
47.1% of participants shop at physical thrift stores 1-2 times per month
64.7% of participants have a style in mind when visiting a store
41.2% of participants seek new thrift stores around 1-4 times per year
Affinity Map
Once the survey was complete, these questions were used to assess each user’s thrift shopping experience. Once enough feedback was received, 5 participants were asked to participate in an in-depth interview via phone call where the following information was found and organized by affinity map as shown in the image to the right.
Key Takeaways
Knowing the store information would improve the shopping process of users.
Having an improved and successful shopping process can increase likeliness of finding participants’ style.
Resources that have style information can increase likeliness of finding items.
Participants need a better resource of thrift store information which can encourage shopping in unfamiliar areas.
Persona
After the affinity map was created and organized, 3 personas were created: Alec, Maya, and Leah where a short bio of their background, thrifting habits, struggles, and goals were listed.
How Might We…..
The following questions were the key challenges that could improve users’ thrift shopping experience:
How might we let shoppers know what thrift stores carry their shopping preferences?
How might we help shoppers explore new thrift stores?
How might we provide the most information about thrift stores to provide shoppers the best expectation of stores?
Design Journey
User Stories
User stories were then created to organize user types and their tasks. The following Minimum Viable Product (MVP) were selected and decided from the User Stories based on components that were high impact and high value for users:
As a thrift shopper and/or thrift shop business owner, users want to:
access the app and search store information easily
read and/or share their experiences
want to bookmark stores to visit
want to find stores close to them
Site Map
When beginning to visualize the different screens for the product, a site map was created to keep track of key screens that will need to be created for the app to best fulfill the MVP’s of the user stories as shown in the right image.
User Flows
To further visualize the screens, user flowers were created to best ideate and understand the pages, components, and decisions made by the user on the app.
Low Fidelity Sketches
To begin visualizing screens for the app, low fidelity sketches were created based on functions needed according to the site maps.
Guerilla Usability Test & Findings
Once the sketches were created, they were formatted in Marvel and tested amongst 5 users using Guerilla Usability Tests.
key takeaways
Product was easy to navigate
Certain terminology on the app was confusing
Confusion on whether users could begin their search on the landing page
Users were ready for more pages!
View and interact with the low fidelity prototype on Marvel here.
Wireframe & flow
After creating and testing the low fidelity sketch prototype, obvious changes were able to be updated and the product began to transition into a digital low fidelity prototype. To begin the prototype, a low fidelity wireframe and wireflow were created to ensure a smooth and understandable transition into a high fidelity wireframe.
Moodboard
A moodboard was created to set the tone of the app and followed these characteristics:
Brand Personality: In a world of fast fashion, thrift shopping begins to grow more popular as people learn about the benefits of sustainability and accessible fashion.
Brand Attributes: Growing, Caring, Efficient, Inviting, Cool
Prototype
First Iteration
With the visualizations of the wireframes, moodboard, and style guide complete the first high fidelity prototype was created as shown in the images below.
Usability Test
After creating the first high fidelity prototype via Invision, 5 moderated usability tests were conducted where the key following issues were founded and organized by priority:
High Priority Issue
Map needs pins
Clarify landing Page
What determines where stores are searched from
Mid Priority Issue
Sign Up page not available
Landing page is bland
Item Quality detail unclear
Low Priority Issue
Does the stores accept in consignment items?
Stars in Item Quality section are confusing colors
Follower/Following is not necessary
The high priority and mid priority issues were resolved in the high fidelity prototype. To view the full prototype, please visit here.
Reiterate Prototype
After receiving feedback from the usability tests of the first iterations, I was able to further modify and improve components in the second iteration.
Key Changes:
Addition of the Opening page of the app and location request page
Complete new look of homepage
Addition of Alerts in Bookmarks page
Addition of pins in Map page
Addition of Account Sign Up page
Addition of My Reviews page
To view the full and final prototype, please visit here:
Recap
While there was great success from the research to the design process, there are functions that can be improved in future iterations such as adding a phone number and website link to store pages, adding a “sort” function in the Bookmarks page, remove “New Follower” notification, and more. In creating Outskirt, I learned how to effectively create a product for the first time using key skills such as researching, interviewing, organizing data and designing while learning new resources like Sketch, Invision, Miro, and Marvel.