Designing Digital Experiences
  • Client:
  • SugarWish
  • Date:
  • 30/10/2021
  • Address:
  • USA
  • Category:
  • UX/UI

Overview

Sugarwish is a gift-giving start-up based in Denver, Colorado that allows users to send customizable e-gift cards without requiring a mailing address. The recipient can then redeem the eCard on the Sugarwish website and choose their desired treats or beverages.

As part of the UX/UI Academy at Brainster, we were tasked with redesigning a subset of screens on the existing Sugarwish website. Our design ideas and final solution were to be created in a way that would not disrupt the consistency and overall design of the existing website.

Challenge

The goal was to enhance the user experience and reduce frustration for users on the Sugarwish website. To accomplish this, research was conducted to identify user shopping habits and issues they faced. It was important to gather these insights prior to redesigning the website, to ensure that the appropriate problems were being addressed and that the project objectives were aligned.

The Solution

  • Reverse the order and begin with selecting the e-cards.
  • We updated the e-cards by including the option for users to add stickers, ribbon or photos. This way users have more time to make the e-card more personalized.
  • We recommended using simple photographs of ingredients to make it easier for users to make their selections.
  • Clear and uncluttered text and appropriate sizing of selection boxes.
  • We have included a step-by-step process so that users can easily follow the steps required to place their order.

Project Goal

  • To alter the customer journey until the user has added their order to their cart.
  • To highlight or emphasize the e-cards.
  • To revise the flow while still preserving enough familiarity for users to easily recognize the site.

Research

To begin the project, we conducted research to gather insights that would inform our design decisions and prevent potential setbacks. Through this research, we learned that the choose an e-card and choose a size pages had the highest bounce rates, and that the purpose of the redesign had been addressed multiple times in the past. Based on this information, we conducted a UX assessment to understand what changes were needed to achieve the desired user experience and meet the needs of the client. The assessment included a competitive UX analysis, usability heuristic evaluation, and a review of Google reviews.

After conducting research, we posed several questions to 20 respondents. Upon compiling and analyzing the results, it became clear that:

  • 56% – Of respondents live in the USA
  • 86% – Of respondents indicated that it is extremely important to have the option to purchase gift cards while shopping for gifts.
  • 81% – Of the respondents believe that having a preview feature significantly impacts their ability to order gifts effectively.
  • 66% – Of the respondents considered that having information about both the quality and price of a product is crucial when browsing.

Persona

User flow

UI Design

Design system

During this project, I had the opportunity to work with Sugarwish design system library. This project allowed me to develop my skills in adapting to an already existing product and design within the constraints of an established system, by making use of already existing design patterns and components.

Step 1

  • We reorganized the flow of the process, by making the third step the first. This was done in response to our research findings, which revealed that users prefer to include cards with every present, as it makes the gift more personal. By altering the flow in this way, we aimed to create an experience that is in line with users’ preferences and provides them with the same energy, passion and love as when shopping in person.
 
We modified the size of the e-cards and improved the transparency of the filters.

Sending...

In addition, the user can then select the method for sending the e-card.

Step 2

The next step is to enter the recipient’s name and email address. Once completed, the user will be able to view the selected e-card and have the option to change the planned delivery date.

Step 3

The third step is to select the packaging for the product, for which we recommended using simpler photographs.

Step 4

The fourth step is to pick the size and determine the cost of the packaging.

Scroll to top