Shop & Support
May 2020 - August 2020
Shop & Support is a free non-profit service that enables participating stores to donate up to 40% of a user's purchase to a coronavirus charity of their choice.
My goal as a UX Designer was to redesign the Shop & Support website to improve the user experience.
User Research
The first step in redesigning was finding pain-points in the website. To identify them, I conducted usability testing on 2 frequent and 1 infrequent online shopper.
Users were asked to use the website and verbalize their impressions as they were going through the flow.
Example of User Research Notes
After evaluating my notes, I established several pain-points that were inhibiting users from completing the flow. Major ones included security concerns, lack of information, and difficulty selecting charity/store.
I summarized all the user themes, as well as my notes and presented them to the Shop & Support team for feedback.
User Research Themes Table
Competitive Analysis
Now that I knew what problems I needed to design solutions for, the question was: How should I design them?
The answer lied in Shop & Support's competitors. I looked at companies similar to Shop & Support such as Amazon Smile, Olivela, Community Made, and Acorns.
I studied their flows and compared how they solved or did not solve our user issues. I condensed my findings into a digestible slideshow format and presented it to the team for feedback.
Competitive Analysis Table
Goals & Methodology
With the user research and competitive analysis complete, it was time to begin redesigning. Below were the big picture goals for the redesign and methodologies to complete them.
- Ideate and explore design concepts based on user research findings, competitive analysis, and team discussion.
- Increase user engagement and improve enrollment conversion by addressing user need and reducing friction.
- Improving consistency and enhancing the user experience while reducing development costs/effort.
- Sketch/Mockup designs based on user research, competitive analysis and design ideation.
- Iterate/refine designs based on user-centered design approach.
- Leverage existing Shop & Support design patterns and styles to improve consistency and reduce development cost/effort.
Goals:
Methodology:
Desktop Designs
I used Adobe XD and Photoshop to create the final desktop designs. After 4 months of hard work, many iterations, and communication with the Shop & Support team, I am proud
to present the final designs below.
Mobile Designs
I used Adobe XD and Photoshop to create the final mobile designs. After 4 months of hard work, many iterations, and communication with the Shop & Support team, I am proud to present the final designs below.
Select a Coronavirus Charity Page (Unselected and Selected States)
Enroll and Link a Card Pages
Enrollment Confirmation and Shop & Support Pages
Reflection
This project has taught me both UX design skills and how to effectively present my research and findings in a digestible form. I want to thank Shop & Support and the team for giving me this opportunity, being super supportive, and helping me find my future career path.
Thanks for reading!
Home Page (1 of 6)
Home Page (1 of 8)
Home Page (2 of 8)
Home Page (3 of 8)
Home Page (4 of 8)
Home Page (5 of 8)
Home Page (6 of 8)
Home Page (7 of 8)
Home Page (8 of 8)
Home Page (2 of 6)
Home Page (3 of 6)
Home Page (4 of 6)
Home Page (5 of 6)
Home Page (6 of 6)
Select a Coronavirus Charity Page (Unselected State)
Select a Coronavirus Charity Page (Hover State)
Select a Coronavirus Charity Page (Selected State)
Enroll and Link a Card (1 of 3 Pages)
Enroll and Link a Card (2 of 3 Pages)
Enroll and Link a Card (3 of 3 Pages)
Enrollment Confirmation
Shop & Support Page (1 of 3)
Shop & Support Page (3 of 3)
Shop & Support Page (2 of 3)
