Reduce learning curve and increase satisfaction of Design Packs

Client accepted 95% of changes and decided to implement within the upcoming year. As of June 2023, significant designs have already been implemented and released.
Project details
Prototype demo

Quick Facts

Role:
Product Designer, Researcher, Manager
Tool:
Figma, Figjam, Davinci Resolve, Eyetracking tool, Google Analytics, Trello
Duration:
March - April 2023
Type:
Contract work
Client:
Design Packs
Team:
3 Product Designers + 2 Engineers
Highly recommend you to read the "Project Details" PDF here.
Estimated read time: 10 mins
project details
For 2 mins quick scan, see below...

understand & strategize

The app

Make building a website just like playing with Lego bricks

Design Packs ("the app") is a Shopify app offering highly customizable templates and sections that can be easily integrated into a user’s site with or without coding knowledge.

Business goal

Increase conversion rate from 14%

Trudy and Anne, the founders of the app, engaged with us to redesign the app for better user experience and conversation rate.

Project scope

Focus on onboarding and discoverability

Project constraints

Adhere to Shopify Design Guidelines ("Polaris")

1. Shopify Polaris and Design Packs design guidelines
2. Lack of customizability of Shopify root nav bars
3. Pre-populating search keyword not supported

Our impact

95% design acceptance rate and it is now live!

Let's start from beginning...

Discover

the problem

7 user interviews

New users often quit before they experience its amazing value

80% of B2B participants

“Easy to use. . . but my B2C customers always ask me for a demonstration of how to use the App.”

80% of B2C participants

“I need a clear explanation of how the app functions.”
9 usability tests

We observed on the 2 identified hurdles

Hurdle 1: Difficult to learn

Learn how to install and add a template and a section to a theme

Within 15 mins
Hurdle 2: Difficult to discover

Find 4 specific packs we provided in the 150+ packs repository

Within 2 mins
All participants failed in passing Hurdle 1, whereas all succeeded in passing Hurdle 2. Therefore, we decided to prioritize our efforts on the hurdle 1. In addition, we learned meaningful insights by observing 9 users completing the tasks.

Based on the interviews, usability tests, data analysis, we discovered...

Why is conversation rate low?

Experienced users (14% of total) find the app easy to use and are loyal due to its high value add.
Unfortunately, new users did not share this feeling and struggled to navigate the app.

All users yearned for more efficiency in discovering new packs.

Therefore, we turned the business goal into a high level UX goal...

Teach new users how to use the app and experience its amazing value before they suffer from enough confusion that they quit.

Persona

Who do we design for?

User journey map

What does Nancy experience?

Summarize

the user problem

Problem statement

Learn


The new users need a way to understand the functionality of Design Packs, because the current app does not provide an easily accessible explanation.

Discover

‍
The users needs different ways to discover packs.

How might we...

explain the identified essential concepts to new users?
show users how to add sections and templates in a visualized and timely way?
display the 150+ sections and templates in a more organized way?

Market analysis

Shogun inspired us to create short tutorial videos for new users.
GemPages gave us the idea of a “library” to show packs that have been installed, since users often wonder which packs they have installed.

Design studios

A collaborative way to brainstorm and create sketches

Below are examples of our early sketches:

User flow

Before diving into Figma, drew out the road map

Our proposed user flow includes the following features:

Summary of

our solutions

Mockup

A set of simple but informative learning tools for visualized learning

- Instructional videos (<30 sec)
- Pop-up walkthrough tutorial
- Easy access to detailed documentation page and FAQ.
- Library page
Mockup

A set of easy to access and understand browsing tools to reduce user friction

- Personalized pack recommendation section on pack details page
- Visualized tags
- Flexible navigation bar

hi-fi mockups

Before

Long texts and inefficient space

1. 89% participants ignored the long description (usability testing)
2. Participants commonly ignored Quick Start Box (eye tracking Tool)
3. Users needed a fast and visualized way to learn (interview + usability testing)
4. 100% participants started to be confused on Pack Details Page
5. Inefficient use of screen real estate
6. Violated Gerhardt Powals Cognitive Engineering Principle - Only include information needed at a given time

After

Visualized learning

1. Repositioned the left columns and eliminated long descriptions
2. Condensed original video to 1/8 of length
3. Added short videos for different topics

Before and after the changes:

Watch here if you want to see prototype demo videos

1. Dashboard and Tutorial pages

Repositioned the left columns and eliminated long descriptions

Reasons:
1. Increase valuable screen real estate.
2. 89% participants ignored the introduction description
3. Gerhardt Powals Cognitive Engineering Principle
- Only include information needed at a given time

Condensed original video to 1/8 of length

Reasons:
1. Eye tracking tool showed Quick Start was commonly ignored
2. Users need a fast and visualized way to learn

2. Pack Details page

Added a short tutorial video

Reason:
Users need a fast and visualized way to learn

Rewrote UX copy to be clearer

Reason:
This is the page where 100% of new users start to be confused

Navigation bars

Made the navigation bar collapsible

Reason:
Users say: “I want to see more packs per page.”

Renamed "Documentation" button to "User Guide"

Reason: Users hesitate to click on “Documentation” because it sounds overwhelming

Dashboard, Browse Sections, Browse Templates pages

Added a pop-up walk through tutorial for new users

Reason: Recognition rather than recall - Nielsen Norman Group

Highlighted buttons with the background grey out

Reason: Direct users' attention

Library page

Added a library page for installed packs

Reasons:
- Most frequently asked questions “can you provide a list of packs I installed on my themes?”
- This library design automated the unwanted workload for client

Added filters

Reason: Group data in consistently meaningful ways from users’ perspective

Pack Details page

Added a personalized recommendation section

Reasons:
- Users need a way to discover new packs quickly
- Foster ongoing brand loyalty, as users are likely to return to the App that make it easy for them to find what they want

Browse Section, Browse Template pages

Added relevant icons for each tag

Reasons:
- Visual hints help users to digest the overwhelming number of tags
- The association of icons with texts helps users to return to the same tags faster
Storyboard

Nancy can now skip the steep learning curve by using our learning tools and reach satisfaction faster!

Nancy's journey after the redesign
1
Excited
Nancy is looking to update her website to sell more candles.
2
Overwhelmed
However, she is not tech-savvy! We helps her skip this phase with our redesign.
3
Relieved & satisfied
She figures out how to add a beautiful new section quickly with the help of the instructional videos.
4
Happy
As a result, she sells so many more candles!

Client was

impressed

"Ada demonstrated a remarkable ability to conduct comprehensive research...exceptional design skills and attention to detail...not only visually appealing but also highly practical and intuitive."

Anne Thomas
Co-founder / Ada's UX client

As one of the founders of Design Packs, I am thrilled to provide this testimonial for Ada, who focused on our app for a group project. The goal of the project was to focus on enhancing the user interface of our Shopify app, specifically for the discoverability of packs and onboarding of users. Throughout our engagement with Ada, we found her dedication, expertise, and commitment to understanding our users truly commendable.

Ada demonstrated a remarkable ability to conduct comprehensive research and gain valuable insights into our users' needs and pain points. She studied the analytics that delved deep into understanding our target audience, extracting invaluable feedback that laid the groundwork for the subsequent design improvements. Ada's empathetic approach and her knack for translating user feedback into actionable design decisions greatly impressed us.

The Figma file that was provided showcased exceptional design skills and attention to detail. The suggested enhancements for the onboarding and documentation aspects of our app were not only visually appealing but also highly practical and intuitive. Ada's design solutions seamlessly aligned with our overall user experience, offering an enhanced onboarding process and improved accessibility to documentation.

We have full confidence that Ada will excel in their future endeavors, and we wholeheartedly recommend her to any team or organization seeking a UX professional who can drive impactful improvements and deliver exceptional user experiences.

‍

Anne Thomas

Co-founder

Design Packs

My

reflection

Align goals with client

Reflect on what we did really well - we asked detailed and meaningful questions about our client's expectations before we started the project. The client's main pain point is a low conversion rate. How can we align what the client wants with user-centric designs? We discovered what prevented the unpaid users from continuing to use the app before paying. This is extremely important to both our users and our client.

Trust the design process

For this redesign project, we focused on observing users' behaviors to discover the root causes. We learned not to jump into a solution!

The art of non-leading questions

During usability testing, it is tempting to tell users the answers when they ask questions. Instead, ask them "what do you think?".

Want to learn more about this project?

Read the project details for a complete research and design process.
Project details
detailed demo

Let's

connect

Contact us

You can reach us anytime via I normally respond within 24 hours. Please follow up if urgent.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Contact image