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
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.
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.
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.
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.
Dashboard
Packs Library
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
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.