Shop Smarter, Not Harder: Driving a 30% Increase in Deal Click-Through Rate
SHOP SMARTER, NOT HARDER
DealsHQ is a responsive web app that allows users to search for deals and discounts on products from various online stores. The goal of the website is to provide a seamless and user-friendly experience for visitors to find great deals.
Role
UX / Web Designer
Skills
Web Design, Brand Design, Visual Design / UI, User Research, Usability Testing, Prototyping
SARAH SHOPS DEALS
I began by creating a survey and posting it on various social media platforms, including Reddit and Instagram to identify users’ needs, use user opinions on competing sites to inform the design, document the types of tasks users perform and in what contexts, and determine what users enjoy about competing sites and what frustrates them.
Based on the research, I created the following user persona:
BUILDING THE BRAND
Next, I created a mood board to decide on a distinct style and visual direction before establishing a design system. The user interface of DealsHQ is both beautiful and functional. Here are some of the design qualities:
-
Typography: It uses typography to create a clear and concise hierarchy of information. The text is large and legible, and headings and labels are used to help users scan and understand content.
-
Color: It uses a vibrant and expressive color palette to create a sense of excitement and energy. Colors are used to guide users through the design.
-
Shape: It uses shapes to create a sense of depth and dimension. Containers have rounded corners and shadows, and they are used to create a sense of hierarchy and structure.
-
Contrast: It uses contrast to make sure that important information stands out. Text and elements are clearly differentiated from each other, and there is enough contrast to ensure that users can see everything on a screen.
RESPONSIVE DESIGN
After designing for mobile, I then designed for a larger desktop breakpoint.
FINAL UI
Using the mood board, I took the wireframes to high fidelity and documented a style guide.
TESTING
Usability Testing
I ran moderated in-person tests with three coworkers. Participants answered background and open-ended questions before performing two tasks: search for any deal and find a deal on a specific product. After analyzing the data using affinity diagramming, here’s what I found:
Issue 1: Categories Carousel Isn't Obvious
Users preferred selecting from the category cards with images on the Categories page, rather than using the carousel on the Landing page. When they first opened the site, their main goal was to narrow down their search by choosing a category.
-
Suggested change: Redesign the Landing page to make Categories more central.
Issue 2: No Filter for Current Deals
Users couldn’t easily filter out expired deals.
-
Suggested change: Add a filter to exclude expired deals.
Issue 3: No Zoom Feature for Deal Images
Users expected the deal image to enlarge when clicked for a better view.
-
Suggested change: Add a zoom feature for deal images in the detail view.
WHAT'S NEXT
-
Improve the information architecture (IA) with a card sort
-
Incorporate accessibility guidelines
-
Iterate the design based on test results
Focusing on User Goals
Next, I created a user flow to show how Sarah would get from finding DealsHQ to using a deal. I then used the user flow to determine what screens Sarah would need to accomplish her goal of finding and using a deal. I took a mobile first approach and designed low fidelity wireframes. By applying principles of visual hierarchy and spacing, a responsive grid, and UI design patterns, I took the wireframes to mid fidelity.
LESSONS LEARNED
-
Be strategic: Since I was limited on time and budget, it was important to be strategic about user research. I aimed to choose research methods that gave me the most valuable insights in the most efficient way.
-
Be creative: Think outside the box when conducting research without a team. I used social media platforms to find and connect with users. Research is ongoing.
-
Get feedback: Reach out for help and feedback from other UX designers / researchers. There are many people who are willing to share their knowledge and expertise.