top of page
P5 POP UP Screenshot .png

Design Packs for Shopify 

The Design Packs app for Shopify is an app that allows merchants to access a library of professionally-designed templates for their online store. The app offers a variety of templates for different types of pages, including homepage banners, product pages, and collection pages.

Role
Visual design, branding, UX design

Time
3 weeks

Team
Ada Zhang
John Hudson

Stakeholders
Anne Thomas
Trudy MacNabb

Design Pack BACKPACK.png

Context

Our team has been tasked with redesigning Design Packs on Shopify, with the  goal of improving the product’s discoverability and creating a streamlined onboarding user flow. 

Timeline

  • Project kick-off

  • User interviews

  • Heuristic evaluation

  • C&C analysis

  • Affinity mapping

  • Problem statement

  • HMW's

  • Solution Statement

  • Sketches & design studio

Research

Ideation

  • More design studios

  • Wireframes

  • Rapid prototyping

  • Mid-fidelity

  • High fidelity

  • Usability testing

  • Iterations on iterations

Designing user experience

Deliver

Research

Kickoff - 

I initiated a client meeting with our stakeholders to identify their pain points, as well as any limitations or constraints that we may encounter during the course of this project.

Competitive & Comparative Analysis

In order to gain a better understanding of how website builders such as Design Packs operate, I performed a competitive and comparative analysis, as well as researching the tools and features offered by other website builders. 

Easy to drag & drop, no-code customizations and controls

The only Shopify Plus Certified Page Builder

Boost page performance

Analytics + Market features

Enterprise Grade Support 

Does not offer free plan

Shogun

Customizable templates and offers design management

Performance metrics + conversion rate optimization

AB testing

Drag and drop with no-code customizations

Offers free plan

Pagefly

Instacart - browse feature

Over 15 categories for easy shopping experience 

Clear discoverability features in the Instacart catalog

Variety of different ways to search up product 

Descriptive item/product page

Ideation

I consolidated my findings and organized them through an affinity map on FigJam with my team. 

After rounds of interviews...

“A functionality that bugs me every time: after I search keywords in the browse packs page, I click on to view a certain pack. Then, when click back button, my search results disappear!”

“Needs to be dumbed down for the average user”

“I love the variety, a lot of customization!”

I use design packs to design real looking wireframes

“That perfect balance between complete complete control. And this makes my day easier.”

My team and I conducted a thorough analysis of users' pain points, and based on our findings, we formulated a problem statement.

Users require an easily accessible way to comprehend the functionality of Design Packs since the current app lacks explanatory information. Moreover, users need diverse options for discovering packs to ensure access to a wider selection of packs.

but how...?

How might we explain the differences between sections and templates to first time users?

How might we direct new users’ attention to the essential onboarding information they should know?

How might we show users how to add/install sections and templates in a more visualized and timely way?

How might we lead the users to naturally learn the basic functionality of Design packs?

How might we simplify the onboarding process while still giving options to learn more?

Creating the User Flow

Sketching + Design Studio

In the process of creating my final design for Design Packs, I created several iterations of the landing page, packs library, browsing page, and pack description page. The user flow sketch below emphasizes the app's discoverability.

P5 User Flow.png

Our team created two user flows for:

DISCOVERABILITY of Design Packs - filtering, sort by, browsing tools, and how we can help customers discover the different features Design Packs offer

LEARNABILITY of Design Packs - A successful onboarding user flow, how can we help customers easily navigate through Design Packs

To kick off our visual design, I collected the Design Pack assets and components from our stakeholders and organized them in a component library. 

Design Packs FONT.png
image 1.png

Iterations on iterations

Branding + Redesign

As we were redesigning Design Packs, our team focused on developing custom icons that would complement the app's aesthetic, and we experimented with various feature placements. My team and I engaged in numerous rounds of design studio to identify the best arrangement for all the features that were available to Design Packs users.

Throughout this process, I gained valuable experience in creating a solid layout and visual hierarchy to enhance the discoverability and learnability of key components.

P5 Carousel Sketch.png

Final Design

A perfect tool for elevating the design for online business stores.  

Navigation menu + collapse feature

Tutorial icon made by Polaris, easy access for beginner Pack users.

P5 Navigation menu.png
DESIGN PACKS DASHBOARD POP UP MOCKUP.png

Dashboard

Packs Library

P5 Media card.png

Clickable demo + customize  available under each section/template

Packs Library includes all the packs that are added (including paid + free)

Color coded tags

Product category with Icons made using Polaris

Browse Section

Tutorial

Video tutorial carousel that redirects users to Youtube and Design Packs website 

Recommended/popular  sections that are available in store 

'Add to Library' pop ups 

P5 about free detail.png

This page combines all discoverability features such as demo, recommended, and tutorial feature for users

Add Section

Reflection

As part of our project for a website redesign, I was responsible for managing client communication and feedback. This involved regular check-ins with the client, providing updates on our progress, and incorporating their feedback into our design iterations. 

Communication is Key!!!
Throughout the project, I found that clear and frequent communication was essential for managing our client effectively. This meant setting up regular check-ins and providing detailed updates on our progress, as well as being responsive to any questions or concerns they had.

Use project management tools to stay organized
To help manage our client's feedback and keep track of design iterations, we used Trello and Notion that allowed us to easily track changes and collaborate on design updates. This helped us stay organized and keep the project on track.

Overall, effective client management was crucial to the success of our project. By prioritizing communication and managing expectations, we were able to build strong relationships with our clients and deliver a UX design that met their needs and exceeded their expectations."

bottom of page