Image by Freepik

Better to Give

Attentive E-Commerce for Gift Shoppers
Last edited: June 2020
Estimated reading time: 4 minutes

Summary
• Identified and eased barriers to purchase
• Improved usability for the happy path
• Uncovered potential value propositions
• Tools: Figma, Optimal Sort, Miro, Zoom

Disclaimer: The work presented in this case study was performed in a personal capacity as a hypothetical design exercise. It does not reflect the views of Giftr and I am not affiliated with the company in any way. Prototype credits: Icons by Boxicons & Freepik; product photography by Giftr, Unsplash, and others.

Image by Freepik

BackGround

The Business
Giftr is a Malaysian online marketplace that specializes in curated gifts. The business launched in 2017 and remains relatively unknown to many locals. The market is set for 9% growth annually and is worth $31 billion globally. Anecdotal experience suggests that shoppers were not keen to purchase goods from the site.
I was interested in the opportunity to explore and learn more about e-Commerce UX.

I had these goals:
1. To ease shoppers’ decision and effort to shop
2. To improve usability scores for a happy path
3. Explore opportunities for the business to introduce new services

Project type: Hypothetical solo design exercise
Project timeline: <6 weeks in April–May 2020

EXPloration

User Research (1–2 weeks)
I wanted to design for user groups with the maximum impact. Survey with 20+ local participants revealed that interestingly, university graduates with less than 3 years of working experience gift 3–4 times more than others. Interviews, contextual inquiries, brand, and usability tests conducted using Zoom helped me understand their preferences and process.

My Research Planning Process

Key findings include:
Findings on Behaviors
• Gifts are for mostly for birthdays of colleagues & ex-classmates
• Shoppers always visited Lazada— a popular local online store, using mobile devices
• Shopping occurs a few times throughout the week before gifting in a relaxed posture

Findings on Attitudes
Choosing a gift is the most difficult, stressful part of the process
• Top concerns for online shopping include arrival date, defects, and mismatched goods
• Wide variety of choice would be helpful

Brand Perception of Giftr (5-second test)
Slight feminine tone
• Clear on business proposition and products
• Interested to continue browsing

Usability Test of Giftr
Close to all failed to follow the happy path
• No common method of site navigation  
• Disappointed at limited photos & reviews

Happy Path Tested

Problem

Analysis & Definition (<1 week)
I had to focus on the most significant problems given the limited-time. Only the most common traits made it to the qualitative persona. From there, an ideal context scenario provides a list of design requirements that’ll best attain user goals.

Some Findings for Context of Use

My heuristic evaluation found the most overlap in 4 areas. These recurring themes are the focus of my design:

#1 Shortage of Gift Ideas
Shoppers struggle most to come up with gift ideas because enjoyable gifts are personal. For this task, shoppers desire inspiration over comparison.
Conventional e-Commerce navigation methods like search and product categorizations are ineffective to serve such needs. Giftr could gain additional sales by making the right recommendations.

#2 Distrust Towards Vendors
Shoppers are naturally cautious of unknown third-party vendors. Participants mentioned the lack of reviews from the start. To them, reviews are key to evaluate vendors. Few mentioned experience receiving goods inconsistent with online listings.
Inconsistent standards in product titles, imagery, and descriptions hints of poor curation of vendors. The business stand to lose sales by failing to assure such concerns.

#3 Worries on Timely Arrival
Unlike other goods, birthday gifts cannot be late. Shoppers are constantly worried about the arrival dates of their purchase. During the usability test, participants kept checking on arrival dates and rejected products that could arrive late.

Left: Sample documentation of heuristic findings. Right: Summary of findings for the Delivery Checker function
Sample Summary of Heuristic Findings

There is poor guidance, visibility of status, and error prevention in this aspect. Errors occurring late in the shopping process drag out the process and raise doubts. This is unnecessary friction to conversion and potential loss of credibility for the business.

Other Usability Issues
Participants failed to follow the designated happy path. Together, we observed:
• An overwhelming number of navigation options, duplicate functionalities, excessive use of icons, and irrelevant notifications.
• Product names were hidden sometimes.
• Listings are disorganized & difficult to read.
Increased usability could help the business keep its shoppers in the short and long term.

A storyboard visualizes the ideal context of use

Solution

Design Process (3–4 weeks)
The requirements allow for a precise and inclusive brainstorm using the How Might We format. A following competitive/ industrial audit informed the design to include some standards and best practices.
I visualized a mix of solutions using hand sketches. Concepts were documented, critiqued, and improved upon. Sketching also revealed that the site layout & navigation will depend on the number of categories & sub-categories. Results from card sorting helped to narrow down the number of layout designs.

Usability First
I transformed the hand sketches into digital skeleton screens for accuracy & ease of duplication. Now elements are aligned to preserve a clean and organized look.
Only essential content, icons, and functionality are kept. Still, the usability of each interaction is deliberately compared against Lazada because of the site’s popularity.

Visual Design
Recurring elements formed the first style guide, which eased changes across the board. I selected a web-focused typeface that better fits the brand voice. A typographic system also helps to preserve consistency. I tweaked the brand colors towards gender equity and meeting accessibility requirements.

VIEW SOLUTION

Key Elements
#1 Improved Suggestions and Navigation
I introduced shopping by personality to encourage shoppers to find novel gift ideas. All suggestions are optimized for diversity over similarity. Categorical pages now feature suggestions at the top.
To avoid overwhelming options, I optimized browsing to stay within the happy path while still allowing easy switching between different options. Search results, however, will not feature suggestions as they typically cater to decisive shoppers.
Horizontal scrolling and collapsibles/ accordion menu are used to conserve space and maintain a minimalist aesthetic on product pages.

Left: Browsing & navigation designed for discovery.  Center: A unified organization with curation.   Right: A notification asking about delivery and use of ‘mall’ tag
Browsing & navigation designed for discovery.

#2 Securing Trust as a Brand
I designed a cohesive brand and storefront to show Giftr’s confidence to deliver on promises. I also removed the option to filter products by vendors.
Product names, descriptions, and photography are curated thoughtfully to infer a similar level of care in products. I intentionally omit typical features of marketplaces like infinite scrolling/ suggestions, except for ‘mall’ tags. The tags are favorable in this case as it signals 1st party fulfillment & warranty.
Inspired by popular brands, only product pages will display review scores. “Quantity sold” replaces it as a more convincing benchmark.

#3 Guidance on Delivery Requirements
Specific triggers trigger shoppers to filter inaccessible goods and prove Giftr’s commitment to timely delivery. To do so, I designed notifications in varying sizes and interruption asking users for delivery information. The notifications increase in intensity gradually until dismissed or acted upon.
Users may input or change the information at any time using the filter function. They are also assured of the status on every product page.
Lastly, a premium delivery service is featured on the landing page for further assurance.

Iterations and variations of notification designs

Outcome

USABILITY TESTING (<1 week)
This time, qualitative testing aims to answer two key questions:
1. Did the design solve identified problems?
2. Did the design introduce new friction?

A new happy path that includes discovery and delivery aspects

Overall feedback was positive:
Users followed the happy path without error.
All attempted to shop by personality during the free browse.
• Most weren’t sure if Giftr is a single brand because of the extensive products offered.
All were clear of the delivery options and fulfillment by Giftr.
• Most did not bring up the issue of warranty.
• On the way, they noticed the prompts for delivery requirements at different times but eventually responded & did not dismiss.

“The site looks better and is much easier to use.
Can’t you just make it real?!”

Overall, I’m satisfied with the improvements made in 6 weeks. However, because of the nature of the project, it was not possible to quantify the business impact in terms of traffic, sign-ups, or conversion.

As expected, I learned a lot, here are just some of my most memorable lessons:

#1- Metrics are essential to prioritize design efforts. While qualitative research helped us identified UX issues, it is uncertain if more severe problems exist elsewhere. Site metrics could help us prioritize costly problems in the conversion process.

#2- E-Commerce can be significantly more than an online shop. It’s about attending to shoppers. Other interesting ideas such as group gifting, recommendation engines, and services like Cash on Delivery all contribute to the experience and thus are worth exploring.

#3- Deployable solutions require an understanding of business constraints and viability of ideas. It was tough trying to develop realistic solutions when designing alone. Despite the conscious effort, I often tried to solve problems through other aspects, i.e. products or operations without a reference to cost.

Thank you for reading.

Disclaimer: The work presented in this case study was performed in a personal capacity as a hypothetical design exercise. It does not reflect the views of Giftr and I am not affiliated with the company in any way. Prototype credits: Icons by Boxicons & Freepik; product photography by Giftr, Unsplash, and others.