Discount70
A responsive re-design of a local thrift store where users can shop ahead online.
Tools: Figma, Figjam, Maze
Role: UX/UI Researcher & Designer
Tools: Figma, Figjam, Maze
Role: UX/UI Researcher & Designer
Overview
Discount 70 is a local thrift store in Minneapolis, Minnesota where customers can browse current items for sale and pre-purchase them to pickup later at their convenience.
The main goal of this project was to re-design their current website to feel more modern, user friendly, and trustworthy.
The main goal of this project was to re-design their current website to feel more modern, user friendly, and trustworthy.
Problem
Discount 70's original website is not responsive which makes it difficult to visit on mobile devices, as well as it not being updated with modern features or feels. This leads to users not feeling motivated to use their website or to make purchases, as the website feels untrustworthy.
Solution
Create a responsive website that can be used seamlessly on both desktop & mobile devices, while giving it a modern and updated re-design.
Initial Research
In order to figure out the needs of the re-design, I performed both research interviews as well as competitive analysis to compare other thrift stores & online shopping sites.
Competitive Analysis
In order to understand the current shopping sites that are out there, I compared similar thrift store websites or other online shopping websites. The sites I researched and compared are Savers, The Salvation Army, and Empty the Nest.
Survey
Before conducting research interviews, I created a survey - I wanted testers to first preview the original Discount 70's website in order to collect initial data of how users felt. I wanted to collect first impressions, their thoughts about the design of the website, overall usability, etc.
Some data from the survey:
- 71%Felt the site was outdated
- 71%Would change the color scheme
- 100%Felt unsure if they would make a purchase from the site
Research Interviews
I interviewed 5 people either in-person or via Zoom/Google Meet. My interview questions included asking interviewees how often they currently shop online, things they do & don't like about their current online shopping experience, and showing them Discount 70's current website and having them provide their thoughts about its current design.
All users felt the sites needed to be "modernized"
Most felt they would use the site because of its unique shopping experience, but do want it to feel more trustworthy
Its current design feels unorganized, outdated design
After conducting competitive analysis, sending out an initial survey, & research interviews - I finally had an idea of what I wanted this re-design to have.
Initial sketches of re-design
I sketched out a few different ideas I was having for the desktop landing page.
Desktop High Fidelity Screens
Some key screens in desktop format.
Key Desktop Screens
Photo 1: Users are first brought to the landing page where they can learn more about the store, see contact information, a map, and also be guided to the online shopping portal.
Photo 2: The browsing page for furniture.
Photo 3: The checkout screen where the user has chosen to use Apple Pay for payment.
Photo 4: The confirmation/thank you screen with their order number.
Photo 2: The browsing page for furniture.
Photo 3: The checkout screen where the user has chosen to use Apple Pay for payment.
Photo 4: The confirmation/thank you screen with their order number.
Mobile High Fidelity Screens
Some of the same key screens but in mobile format.
Before & After
On the left is the current & original home page for Discount70; on the right is my re-design.
Usability testing & results
I tested both the desktop & mobile versions of the re-design with testers performing the same tasks on each for continuity. I received overall positive feedback on the testing.
-
navigate to shopping portal
Feedback:
Testers mentioned that they would have liked if the online shopping portal CTA was closer to the top, so they wouldn’t have to scroll as far to find it
-
find a computer desk to buy
Feedback:
Adding screens to match the desktop experience
- add to your cart and checkout
Feedback:
Users wanted to be able to view their cart before jumping into the checkout process
Iterations
With the feedback from testing I made some changes.
Testers mentioned that they would have liked if the online shopping portal CTA was closer to the top, so they wouldn’t have to scroll as far to find it
I added a screen to more match the desktop checkout experience. The desktop checkout process included a page where you view your cart. This was not implemented for the mobile screens.
I added this screen in for continuity, and also for the user to be able to view their cart before jumping into the checkout process.
I added this screen in for continuity, and also for the user to be able to view their cart before jumping into the checkout process.
Final thoughts
Overall I wanted to re-design this website to feel more user friendly, trustworthy, and overall a seamless online shopping experience for the user.
I learned that users really do make decisions based on visual design. All of the users I interviewed seemed to not trust the original website and felt it needed a major update.
If I were to continue working on this project I would play around with the color scheme, continue to build out the browsing category pages, and continue to test for usability.
I learned that users really do make decisions based on visual design. All of the users I interviewed seemed to not trust the original website and felt it needed a major update.
If I were to continue working on this project I would play around with the color scheme, continue to build out the browsing category pages, and continue to test for usability.