Shopify x BrainStation
24-hour Hackathon Challenge
Thoughts of a UX Designer…
Hey there! Thanks for taking the time to be here. I’ll be “popping up” through out the case study to provide some additional context. Think of me like your personal tour guide. See you in a bit!
Project Overview
The Brief: A 24-hour collaborative tech sprint with a cross-functional team of UX designers, web developers, and data scientists to create a digital solution for Shopify.
Project Type: Hackathon Challenge
Timeline: 24 hours
My Role: UX Researcher, UX/UI Designer, Project Manager
Tools: Figma, Zoom, Post-it Notes
My Team
-
UX Designers
-
Web Developers
-
Data Scientist
The Solution…in just 24 hours!
The Partner Program
The new feature that we designed is called the Partner Program which is accessible to merchants through the Shopify dashboard. The partner program connects small business owners with other Shopify merchants around the world who sell complimentary products. The program would be mutually beneficial to both partners where each partner helps the other gain access to a whole new set of consumers in the local demographic and region by promoting and featuring products on their site.
PROJECT KICK-OFF
Team Alignment
A Project Plan
Click image to enlarge.
To help the team stay aligned on key roles, responsibilities, deliverables and timelines, I created a tentative project plan based on my previous experience working on cross-functional teams.
Feature Freezes
The schedule included development/feature freezes at which point no further changes could be made to the functional design of the prototype to ensure deliverables for the web developers stayed within a realistic scope.
Constraints
A tight timeline - only 24 hours
Designing with Shopify brand guidelines/design system
Remote collaboration with team members in different time zones
Varying levels of knowledge and experience on the team
RESEARCH & DISCOVERY
The Client, Shopify
Shopify is one of the most popular ecommerce platforms, with a 23% market share in the U.S.
Shopify has more than 2.1 million daily active users and more than 1.75 million merchants.
Shopify empowers 5,300 Shopify Plus stores, and over. 1million businesses through its standalone Point of Sale system
The Problem Statement
How might Shopify better leverage its Ecosystem to help lower the barrier to entrepreneurship in entirely new regions, demographics, and business sectors?
Secondary Research
As a team, we conducted secondary research to learn as much about the problem space as quickly as possible. To be most efficient, we each focused on researching a different topic including competitors, trends, customers, etc. Through our research, we learned that the global e-commerce market was experiencing tremendous growth.
How Might We Statement
How might Shopify leverage its ecosystem in order to help entrepreneurs expand their businesses globally into untapped markets?
IDEATE
The Proto-Persona
Due to time constraints, we were not able to conduct primary research however, we created a proto-persona based on our secondary research on Shopify customers. Additionally, a member of our team had a Shopify store so he was able to provide helpful insight as well.
Task Flow
Thoughts of a UX Designer…
After creating the task flow, we checked in with our developers before beginning to sketch the screen designs.
PROTOTYPE
Shopify Brand Guidelines
Polaris Design System
We designed our solution using Shopify brand guidelines and the Polaris Design system, including colours, typogaphy, icons, interaction states, and other components.
As myself and the other UX designer worked on screen designs, we provided the colour palette and typography to the web developers to begin coding.
Click image to enlarge.
Sketches
We sketched out screen designs based on our task flow and checked-in with our web developers to communicate the design vision and discuss any considerations or constraints. We adjusted the design of the Filter screen based on discussions with our web developers.
Thoughts of a UX Designer…
After sketching the screen designs, we checked in with the web developers to validate whether the design and functionality we were proposing was realistic to code within the short time frame. The web developers advised that building a drop-down interaction for the filter functionality would be too time-consuming to code so we adjusted the design to have all the filter criteria visible on the screen with check boxes.
Lo-Fidelity Wireframes
After confirming with the team that there were no further concerns regarding the screen design or the functionality, myself and the other UX designer designed the lo-fidelity wireframes using components from the Polaris design system.
Thoughts of a UX Designer…
We stayed very closely connected with the web developers and constantly checked in throughout the entire design process. We were prepared to iterate from a design and functionality perspective if the web developers ran into issues during the coding.
High-Fidelity Wireframes
We then translated the lo-fidelity wireframes into high-fidelity designs.
The Solution
The Partner Program
The new feature that we designed is called the Partner Program which is accessible to merchants through the Shopify dashboard. The partner program connects small business owners with other Shopify merchants around the world who sell complimentary products. The program would be mutually beneficial to both partners where each partner helps the other gain access to a whole new set of consumers in the local demographic and region by promoting and featuring products on their site.