UI/UX Design Case Study: Dealsdate

Crafting the user experience of a gift shopping app

Introduction

I recently completed a training in User Interface/User Experience design facilitated by Stutern Graduate Accelerator (SGA). For my final project, I worked on the UI/UX for a client’s gift shopping app called Dealsdate. What follows is a case study detailing my process and output.

Overview

Dealsdate is an online gift shopping website providing gift items for special life moments such as birthdays, weddings, anniversaries etc. As part of their expansion goals in the near future, they required a mobile app to better serve their target audience.

Objectives

1. Study the target users to unearth pain points encountered when shopping for gifts

2. Explore possible solutions for the identified pain points

3. Validate these ideas through prototypes and user testing

4. Implement the design solution that best meets users’ needs and the goals of the business

Process and Approach

To ensure the mobile app meets the needs of the target audience, I employed the design thinking methodology as defined by the Nielsen-Norman group for the entire project.

User Research

I started out the project by conducting an initial user research to find out how the target users currently shop for gifts for special occasions and the difficulties they experience using their current preferred method (both online and offline). I used an online survey to achieve this.

Affinity Mapping

I analyzed the results of the survey and used affinity mapping to group related observations. This helped me uncover the pain points users encounter as they shop for gifts. With this in place, I had a better understanding about the needs of the target audience.


Users observations and comments

Affinity map created from the user research

Pain Points

The pain points uncovered are as follows:

  1. Users have difficulty finding suitable gift items
  2. Users are concerned about keeping track of and remembering special occasions so they can plan their purchase of gifts ahead of time to avoid last minute rush
  3. The price of gift items was a major concern for users
  4. Users want to be guaranteed about the quality of the products they are paying for as well as their timely delivery
  5. Users are concerned about the safety of their payment information online

Personas

Using the results of the survey, I created two personas that embody the traits of the target audience.


User persona 1

User persona 2


Job stories

With some of the pain points uncovered earlier, I created two jobs stories for the features that will addressed with the first release of the app.

  1. When I find out that an important occasion is coming up, I want to be able to find good quality suitable gift items at a fair price, so I can make the day special for the person(s) involved.
  2. When I know that an important occasion is coming up, I want to be able to save the date, so I can be reminded and plan ahead about the gift to buy.

Information architecture

Information architecture

Design Explorations

Brainstorming and Ideation


Sketches 1

Sketches 2

Wireframes

My goal was to provide design solutions for the pain points uncovered in the initial research.

Since most users want to explore products before committing to buy, they are given the option to skip sign up/sign in and begin exploring products at once.

Onboarding screens wireframes

Products are placed in well-named categories corresponding to the occasion (birthdays, weddings etc.). Users are also given the option to search and filter results.

Explore screens wireframes

Search, liked and settings screens wireframes

The calendar feature allows users save upcoming events so they get reminders to shop for gifts. It also syncs with their inbuilt calendar (for specific occasions).

Calendar screens wireframes

The checkout process is optimized as users are not required to sign up/log in before checking out (guest checkout). Also, signing up or logging in does not remove the user from their normal flow. To allay security fears, users are assured of the safety of their personal information at checkout.

The tracking feature keeps users informed about the progress with the delivery of their ordered items.

Cart, checkout and tracking screen wireframes

Prototype and user testing

I made these wireframes into a prototype which you can find here. Usability tests with this prototype uncovered a number of issues. The placement of past orders as a section on the cart screen made it difficult for users to locate their order history. Also, the progress bar on the tracking screen posed challenges for some users. I fixed these issues and proceeded with the visual design.

Visual Design

Onboarding screens

Explore screens

Search and Liked screens

Cart and checkout screens

Calendar screens

Profile, orders and tracking screens

Conclusion

In the course of my training, I learnt how important it was to follow a user-centered design process and this project further solidified that thinking. I’ll close with one my favourite quotes by Paul Boag— “To be a great designer, you need to look a little deeper into how people think and act.”

Product Designer and Front-End Developer passionate about building user-centered products

Related Posts

As hardware begins to fade and software experiences come to the foreground, it is essential to focus on the way we design the interfaces that users will see and interact with. Over the last decade, interface design has seen a turn from replication of the physical/material (referred to as skeuomorphism) to a much more flat, abstract aesthetic. While this new… Read More →

Background A new fast food franchise is opening 500 new stores across the U. S. and Canada. Each store has 5–12 employees and each employee needs 3 uniforms: the main uniform and 2 seasonal ones. Currently the franchise is in the process of hiring and preparing all stores for a grand opening. Corporate is collecting orders and holding them for… Read More →

Accessibility: (noun) the qualities that make an experience open to all Accessible design is good design — an accessible user interface (UI) opens experiences to a wider range of users and improves experiences for existing users. That’s the beauty of designing with all abilities in mind — it benefits everyone, not just those with limited vision, hearing, or mobility. When designing… Read More →