Making entrepreneurship more accessible than ever before.

Redesigning Shopify’s onboarding experience to provide new merchants with tailored apps to reduce entrepreneurship’s barriers to entry.

Project Overview

Project Type: Academic - Cross-disciplinary Hackathon

Duration: 24 hours

Role: UX/UI Designer

Tools: Figma, InVision, Shopify's Polaris

Platform: iOS

As part of the Shopify x BrainStation 24-hour hackathon, my multidisciplinary team of Data Scientists, Web Developers and UX Designers and I were tasked with developing a digital solution that makes entrepreneurship more accessible by leveraging Shopify’s existing ecosystem.

I contributed to UX research, ideation, wireframing, prototyping, and UI design while ensuring that it remained consistent and aligned with Shopify’s Polaris design system and branding.

View Prototype

TEAM KICK-OFF

Fostering a Healthy Team Dynamic

As this was the first time we were working with other people outside of our respective disciplines, I felt it was important to take the time to get to know my fellow team members, comprised of UX Designers, Data Scientists and Web Developers. We took the first hour to talk about our new career path change, learn about each other's disciplines, crack a few jokes and most importantly, come up with a witty team name. We were assigned team #11 with seven members, so naturally... The 7-Eleven!

Taking the time to get acquainted with each other truly made the following 23 hours feel like a breeze. Not only did it allow us to get a better scope of the project's feasibility, knowing what each member could bring to the table, but we also now had a great team dynamic that allowed for easy communication throughout the hackathon.

Alfredo
Di Massimo

Data Science

Niklas
Gutheil

Data Science

Luis
Silva

UX Design

Benjamin
Gluch

UX Design

Tamara
Carlos

Web Dev

Artrell
Coker

Web Dev

Marcos Iturriaga
Rodriguez

Web Dev

The Design Process

As we only had 24 hours, we had to be agile and adapt the design-thinking process to work within the allocated time while ensuring we designed a solution that kept the user at the center of the design.

Empathize

PROJECT BRIEF

The Client, Shopify

With a 23% market share in the U.S., Shopify remains one of the most popular eCommerce platforms available. Currently, it has over 2.1 million daily active users and more than 1.75 million merchants.

When Shopify came to us to solve a design challenge, they asked us: How might we better leverage the Shopify Ecosystem to make entrepreneurship more accessible than ever before?

RESEARCH & DISCOVERY

Digging Deeper

Before jumping into problem solving, my team and I decided to get a deeper understanding of our client, Shopify, and its ecosystem. We found that their ecosystem is made up of three main components.

Shopify Merchants

The Shopify App Store

The Shopify Partner Program

SECONDARY RESEARCH

Exploring the Problem Space

Having a good understanding of our client and its ecosystem, we began to narrow our focus on the problem space by conducting secondary research. Through research and social listening on online forums and the Shopify’s review section, we gathered user insights and realized there was a gap between the Shopify App Store and first-time merchants.

Shopify Merchants

66% of entrepreneurs don’t have any prior
business or e-commerce education
.

Most Shopify merchants are
first-time entrepreneurs.

Only 9% of entrepreneurs have a
Bachelor's Degree in business.

THE Shopify APP STORE

87% of merchants use
third-party apps

Apps provide tremendous benefits and
functionalities to boost merchants' online store.

With over 8,000 apps, new merchants can be overwhelmed by the options available.

HYPOTHESIS

So What's the Problem?

We believe that new entrepreneurs don’t have adequate knowledge when it comes to confidently growing their online business. Providing tailored app recommendations to new entrepreneurs will help them launch their new online business and lower the barrier of entry.

Define

PROTO-PERSONA

Narrowing Down our User

With such a small time frame, we did not conduct primary research however, we created a proto-persona based on our secondary research and from the user insights we gained from social listening. This allowed us to always keep our user at the forefront while designing our solution.

HMW STATEMENT

Refining the Design Challenge

How might we better understand potential new entrepreneurs in order to
optimize app recommendations to alleviate their confusion?

Ideate

SOLUTION EXPLORATION

Brainstorming

After having a clear idea of who we were designing for and a refined design challenge to solve, we knew we needed to bridge the gap between new entrepreneurs and Shopify’s App Store.

Having determined that our target user needs some guidance when selecting the best tools for their online store, we decided to elevate the way Shopify recommends apps to new entrepreneurs. But how do we know what they need?

SOLUTION EXPLORATION

Brainstorming

After having a clear idea of who we were designing for and a refined design challenge to solve, we knew we needed to bridge the gap between new entrepreneurs and Shopify’s App Store.

Having determined that our target user needs some guidance when selecting the best tools for their online store, we decided to elevate the way Shopify recommends apps to new entrepreneurs. But how do we know what they need?

To recommend entrepreneurs with apps best suited to their needs, we had to acquire more data during the onboarding process. Consulting with our Data Scientists teammates was vital as they provided us with the optimal questions for a Questionnaire to narrow down the app recommendations.

In addition, the Data Scientist would enhance the Recommender System through machine learning based on existing merchants with similarities.

TASK FLOW

Mapping the Opportunity

I mapped the current journey users followed when creating a new store and quickly identified an opportunity to intervene with our solution. Initially, once users entered their store information, they were directly brought to the Shopify dashboard and left to their own devices. We intervened with our new onboarding questionnaire after merchants input store info in order to benefit from recommended apps once they get to the dashboard.

Prototype

CONCEPT SKETCHES

Iterate, Iterate, Iterate!

My fellow UX designer and I began exploratory sketching in order to translate our task flow into a concrete digital solution. With the Web Dev members, we communicated our design ideas and discussed any constraints or considerations before moving forward to prototyping to ensure that our design was feasible to meet the deadline.

BRANDING GUIDELINES

Shopify's Design System, Polaris

To ensure app consistency and establish branding guidelines, we relied on Shopify’s expansive design system, Polaris, when designing our wireframes.

WIREFRAMES

From Paper to Screens

With the use of the Polaris design system and after confirming with the Web Developers that there were no further concerns regarding the design decisions, my fellow UX designer and I began building the wireframes.

THE END RESULT

Bespoke Onboarding

In the end, our team developed a bespoke onboarding experience for new Shopify merchants. Through data-driven app recommendations, the barriers to entry for new entrepreneurs are significantly reduced through tailored apps that best suit their business needs.

View Prototype

Looking Ahead

NEXT STEPS

Future Thinking

Test & Iterate: To meet our deadline, we did not have the time to test our design. To ensure that Shopify’s redesigned onboarding experience is user friendly and intuitive, we would iterate our designs after performing usability testing.

Implement for Existing Merchants: As the questionnaire was implemented during the onboarding section of the user journey, we would like to implement our solution for users that are already established merchants to allow them to benefit from enhanced app recommendations.

Design for Desktop: As we opted to develop our solution for mobile, we would like to design the onboarding experience for desktop users.

KEY TAKEAWAY

Collaboration is Key

Prior to this industry project, all academic projects were solely designed by myself or with fellow UX designers, so being able to work and consult with Data Scientists and Web Developers allowed us to bounce ideas off each other while taking into consideration each team's capabilities. Being able to gauge solutions’ feasibility by getting direct feedback from the other disciplines and knowing their constraints was definitely the biggest takeaway I gained from this cross-disciplinary project.

Other Projects

UX / UI Design | Capstone Case Study

Werk!

An event management app designed specifically for drag artists to promote upcoming shows in order to increase online visibility, in-person attendance, and income from tipping.

UX Design / Research | Case Study

Patients First

Facilitating communication for non-native-born patients seeking healthcare services through audio recordings and transcripts, ensuring confidence that all their medical needs are being met.

Project OverviewEmpathizeDefineIdeatePrototypeLooking Ahead