Responsibilities
user research, competitive analysis, affinity mapping, storyboards, design systems, usability testing
What I Did
• Conduct primary and secondary research to understand users' needs
• Develop a branding guide and a design system
• Create and iterate on high-fidelity prototypes
Comparison shopping, a practice of comparing products and services from different vendors before purchasing, is a way for consumers to save money on their purchases and make financial-conscious decisions when buying goods. More consumers are engaging in this practice as we see an influx of retailers selling similar products. Although comparison shopping can save consumers hundreds of dollars per year, the current purchase journey is shown to have a strenuous cognitive workload on consumers as they have to flip back and forth between many different websites looking for authentic reviews, price comparisons, features, and other criteria.
In my interaction design class, my team and I utilized our design skills to prototype a user experience that is an intuitive and seamless way of shopping in an era where consumers are more financially-conscious of their online consumption. We designed Promotery as a cohesive platform that allows users to effectively comparison shop.
The Challenge
How can we reduce a consumer's cognitive load during their shopping journey while helping them make financially-smart choices?
The Solution
A mobile comparison shopping service app that aims to reduce the cognitive workload in a consumer's purchasing journey.
My Design Process
Before designing the app, my team and I conducted secondary research to better understand our problem space and target audience. We turned to reading various published online consumer reports, i.e., from
KPMG and
Bazaarvoice, to look at consumers' shopping behaviors and current e-commerce trends to guide our decision on what and who to design for. Based on the secondary research, we found that trends and habits vary by two distinct factors:
gender and
region.
These were some of our research findings:
69%
millennials say they cannot complete a purchase without first searching for a deal or offer
(Source: RetailMeNot Survey)
84%
report that user generated content on company websites at least somewhat influences what they buy
(Source: Bazaarvoice)
76%
female consumers believe that shopping is not only about purchasing items, but that it's about the experience
(Source: accenture)
From our secondary research, we decided to narrow our target audience to female consumers because they're more likely to participate in comparison shopping compared to their male counterparts. Due to our time constraint for this project, our team conducted 3
in-depth interviews targeting women ages 34-39, each of whom have different lifestyles and shopping habits.
Our main objective of the user interviews was to gain a better understanding of the average female consumer's purchase journey and see how we can enhance their experience.
From our interviews, these were some of our key user insights:
"I extensively read product reviews on retail websites but I'm less trustful of those [reviews]. There’s a lot of paid reviews out there."
"It’s not that [the item] needs to be on sale. It’s that I don't want to overpay if I could have spent 30 seconds finding it cheaper somewhere else."
"I have a desktop browser extension installed that’ll auto check coupon codes called Honey. With very high frequency, it’ll find a 5 or 10 dollar code so it’s worth it to shop on my computer rather than on my phone."
Going beyond the quantitative data, we wanted to really understand and empathize with our users by asking ourselves, “Who are we designing for?”
We created two different personas that have different needs. We created Jaclyn to represent female consumers in Western culture and Mimi to represent female consumers in Eastern cultures.
Storyboards
After creating our personas, my team and I began storyboarding to explore the best products that fit these personas’ needs. We used our personas to guide our explorations by seeking the story that best solve their problems. In total, we sketched out 6 potential scenarios that includes different products for each of them.
We presented the six storyboards to our previous interviewees.
Based on user interviews, this storyboard was chosen to be the best solution for our users’ needs.
My team and I then performed an
in-depth competitive analysis to analyze key features within similar apps with our main focus on their strengths and weaknesses. We chose to use competitors that don't solely provide comparison shopping services because we want to design an app that encompasses all features and criteria that consumers would look for when going through their purchase journey.
Before designing our app, we sketched out the basic composition of our app to identify key features. This step drives us toward creating a pleasant and intuitive user experience in the early stages since we're able to quickly iterate based on feedback at no cost.
Due to time constraints and the virtual environment, our team decided that it would be most efficient to assign each member to design a different part of the app. I was in charge of designing:
- sign up/login page
- homepage
- product comparison page
- category page
We translated our sketches into low-fidelity wireframes to gain some feedback from our users.
From these wireframes, we decided to remove the "Digital Wallet" because we wanted to incorporate discount codes throughout the app rather than dedicate solely one page to it.
We created a moodboard which would allow us to develop the design system for Promotery. We wanted to use muted greens to evoke feelings of harmony and we put together a list of adjectives we would want our users to feel when interacting with our app.
From the moodboard, we put together a design system that allows us to maintain consistency throughout our app. We wanted our app to be accessible so we labeled most of our visuals so that it's easy to understand. We used a lot of visual cues to help users who may be visually impaired quickly differentiate between different icons.
After conducting some usability tests on our hi-fi prototype, we made a few changes to improve the app's usability based on a cumulation of user feedback.
To view our interactive prototype, click on the Promotery logo:
If our team had more time, I would:
- make the UI more consistent. Since our team split up designing each portion of the app, there are inconsistencies in our design system. Each of us had a different way of designing and I feel like it's apparent when you interact with the app holistically.
- improve the workflow of certain key features. Although our team completed prototyping every screen we were supposed to, I feel like we could still improve the workflow of key features to create a more cohesive experience.
The design process is not always linear. Throughout the process, our team had to go back and forth many times iterating our problem space. There were times where we were falling behind schedule and we wanted to so badly just start designing, but we realized that designing and focusing on features without pillars to support them would not be what UX design is about. Really understanding our users and their needs was essential to finding out what key features to incorporate that would be most beneficial to our users.
With this project, it taught me the value of not overthinking decisions, as it hindered the ideation process and stifled creativity. Understanding that design is an iterative journey, I learned to embrace the idea that there will always be opportunities for refinement and improvement in subsequent iterations.
.png)
.gif)
.gif)
.gif)