SHOPIFY X BRAINSTATION
UX/UI Design
Reducing barriers-to-entry for new merchants by providing a bespoke onboarding experience.
PROJECT OVERVIEW
BrainStation partnered with Shopify to facilitate a 24 Hour Hackathon. This project entailed collaborating with data scientists, web developers, and UX designers to create a bespoke onboarding experience for new merchants in order to reduce barriers-to-entry in untapped demographics.
My contributions involved, UX research, ideation, wire-framing, and prototyping of a desktop interface that aligned with Shopify’s Polaris design system and branding.
Project Type: Hackathon Challenge
Timeline: 24 Hours
Role: UX/UI Designer, UX Researcher
Artifacts: Persona, Flows, Journey Map, Sketches, Wire-Frames
Skills + Methods: User Research, UX + UI Design, Aigle UX Processes, Design Systems
Tools: Figma, Shopify Polaris
THE SOLUTION
Bespoke Onboarding
In under 24-hours, our team developed a solution that helps reduce barriers-to-entry for new merchants by providing a bespoke onboarding experience. Where specific recommended apps and identified resources help new users develop their new eCommerce market faster and more confidently.
THE TEAM
Cross-Functional Partnership
In a group of 6 current BrainStation Students, we worked remotely across multiple time zones and collaborated together using our varying levels of knowledge and experience to come up with a solution for Shopify in under 24 hours.
2 UX DESIGNERS
2 DATA SCIENTIST
2 WEB DEVELOPERS
ADAPTING THE DESIGN PROCESS
Having only 24 hours to work through UX design thinking process, adaptions were made to ensure as an agile team that we could develop a digital solution that kept the users centred at the design.
EMPATHIZE
Research + Discovery
Problem Space
DEFINE
Proto-Persona
Journey Map
Opportunity
IDEATE
Task Flow
PROTOTYPE
Low-Fi Wireframes
Hi-Fi Wireframes
EMPATHIZE
PROJECT BRIEF
Shopify is one of the most popular e-Commerce platforms on the planet and holds a 23% market share in the U.S. Currently, it has more than 2.1 million daily active users with more than 1.75 million merchants.
87% of merchants use third-party apps, with the average merchant having six apps installed. These merchants are also provided with access to Shopify’s Ecosystem - which has a network of partners. Some of these partners included are:
Developers who create apps for the Shopify app store
Designers who create themes for the Shopify theme store
Entrepreneurs, educators, influencers and content creators who inspire and teach their audience about entrepreneurship with Shopify through the Shopify Affiliate Program.
Lastly, Designers, developers and consultants are available for hire to help with marketing, store setup, custom development, content, and more through the Shopify Experts marketplace.
THE DESIGN CHALLENGE
How might we imagine Shopify using its Ecosystem to help lower the barrier to entrepreneurship in entirely new regions, demographics, and business sectors?
RESEARCH + DISCOVERY
Digging into the Problem
To help narrow the focus the team brainstormed together discussing our initial research and personal experience using Shopify.
We then took some time to dig deeper into finding pain points that current merchants were experiencing when first onboarding to Shopify and any frustrations that they may have experienced during their process of setting up their store.
SECONDARY RESEARCH
Social Listening
Through social listening and heuristic evaluations, we gathered user insights on the current process of onboarding and setting up a new shop. Use the drop-down to view a summary of our findings.
-
It was identified through numerous blogs that for new users, Shopify’s editor isn’t as intuitive and takes a while to get the hang of.
It was also noted that users have to rely on adding apps to boost the functionality of their store - this can be overwhelming for new merchants struggling to navigate the vast variety of apps.
-
Digging deep into current merchant reviews a key pain point was highlighted that the recommended apps aren’t specific to their needs and struggled to identify if they would be any good for them.
-
As a team, each of us created our own Shopify accounts - participating in their 14-day trial. This enabled us to go through the onboarding process as if we were new merchants.
Through our personal onboarding experience, a commonality amongst the group was that supporting Help and Documentation for a new merchant whose native language wasn’t English could have an opportunity for improvement.
We did some initial ideating that if there was an opportunity to customize the onboarding process to the specific merchant. This opportunity might alleviate any grievances or feelings of being overwhelmed. It could then also help identify resources that new merchants might not have considered.
SECONDARY RESEARCH
Identifying the Key User Group
To help us focus on a key user group of new merchants we looked into potential new regions that Shopify could expand into. Two major markets emerged for potential growth - India and Brazil.
Our data scientists identified with their in-depth research that Brazil’s eCommerce market was trending at $30 Billion USD in 2021, with a year-over-year (Y-O-Y) growth rate from 2020 being 18%. With this trajectory, our design solution focused on reducing the barrier to entry for new merchants from Brazil.
eCommerce Market 2021
DEFINE
PROTO - PERSONA
The Dreamer
After synthesizing the research and understanding the pain points, motivations, and behaviours of our secondary data on Shopify customers - we developed a proto persona to help identify where a solution could be developed for new merchants.
Click to enlarge
Upon developing our proto-persona and identifying key pain points, behaviours and motivations from our secondary research we focused our problem statement on the existing onboarding experience.
REFINING THE DESIGN CHALLENGE
How might we enhance new merchants’ onboarding experience in order to help lower the barrier to entry?
IDEATE
TASK FLOW
Mapping the Opportunity
By evaluating Shopify’s existing onboarding process we identified where along this journey we could interject our design intervention. By introducing a 4th Onboarding step and asking a few more questions, these merchant inputs can push recommended apps, content and experts for the new merchants.
PROTOTYPE
SKETCHES
Rapid Iterations
Collectively my fellow UX designer and I began sketching out solutions for the customized onboarding page while aiming to align with Shopify’s current design system. After a few quick sketches we then quickly moved on to prototyping and spent a significant amount of time reviewing Shopify’s Polaris system. We then jumped straight into hi-fi wireframes so that we could hand-off to developers right away.
DESIGN SYSTEMS
Shopify’s Polaris System
While jumping into hi-fi wireframes my Co-UX Designer and I took the time to understand how to design for the Shopify platform using its expansive design system, Polaris. Researching through the vast tool kit we pulled together key Components, Colours, Icons, Typography and Shadows from the Polaris System to build out the hi-fi wireframes. We also collaborated on finding on-brand assets to complete the prototype.
WIREFRAMES
User Flow
Working collaboratively together my UX co-worker and I jumped back and forth between each other’s designs to generate a cohesive design to hand-off to the developers.
KEY FEATURES
Machine Learning
Leveraging data and using onboarding insights and machine learning to develop bespoke solutions.
CUSTOMIZED DASHBOARD
Personalized Resources based pulled from the new form on the sector, region, and technological-specific recommendations from machine learning for content based on user use-case. Including Shopify App Store recommendations based on user inputs. Customized team based on AI system recommendations.
NEW EXPERT PAGE
Personalized recommendations for building a team with tutorials and resources, including country and language-specific resources.
LEVERAGE DIVERSE TALENT
Customizing Shopify’s recommended rich ecosystem of talent including developers, designers, writers and marketers specific to the user inputs.
PERSONALIZED RESOURCES
Through key filters - language, budget, location and more etc resources can be personalized to the specific merchant needs.
MVP
Bespoke Onboarding
KEY LEARNINGS
NEXT STEPS
Elevating the Design
DEVELOPMENT
Improved Onboarding Page
Improved Expert Page
SUPPORT
Acquire top Freelance Talent
Language and country support
New and improved translation, language and currency features
Add resources (taxes, market information, supple chain and wholesaling
FEATURES
KEY LEARNINGS
Partnership + Communication
Unfortunately, my team did not win the Hackathon, but we did receive positive feedback for targeting a design solution that focuses on providing a bespoke onboarding experience for new merchants.
In my previous work experience in the architecture industry, collaboration and communication is essential to the success of any project. Being able to tap into this experience of handing off drawings to engineers helped leverage my ability to put together a prototype and assets for our web-developers. Though we encountered a few hiccups in this department we were able to come together as a team and reassess where to focus our energy in order to finalize a solution and presentation deliverables for the judges.
EXPLORE OTHER PROJECTS
Fashion For Every Body
Responsive web design of a marketing site for my case study project Include+d. Designed for desktop and mobile to attract new users and future brands to partner with.