An easily customizable e-commerce platform with real-time store-front changes, personalized policies, messaging system, dashboard analytics, and a seamless onboarding process built to help new sellers break into the ecommerce world without any restrictions.
Role:
UX/UI Design Inten
Duration:
Oct 2022 - Jan 2023
Main Responsibilities:
-
Closely worked with another UX Designer to design an
e-commerce website in a start-up environment -
Planned and conducted user research and competitor analysis
-
Collaborated with an engineer to establish a design system and determine what was capable to create
-
Conducted moderated usability testing and synthesized results to implement iterations
Tools:
Team
Brandon
C.E.O.
Brian
C.F.O.
Cong
Developer
Sabrina
Designer
PinnPinn
Designer
establishing values
Mission Statement
Our mission was to create an e-commerce space by solving an age-old problem - making online selling easier. We wanted to empower our sellers by making it easy and simple to sell their products, while providing them with all the tools they need to succeed. Hoopla is a platform for entrepreneurs and small business owners to share their products and services with the world.
existing audience
In order to better understand a seller's perspective, we went through community threads and sent out a survey to small business owners who use a platform to sell. Although our audience was for online sellers, another survey was sent out to buyers who frequent online purchases to understand their perspective as well. With the following initial information gathered, we decided on our main 3 goals for this platform.
1. Create a seamless onboarding experience that even a new seller could sign up.
2. Include vital resources to help sellers manage their store, minimally maximize features.
3. Design a flow for users to easily edit their storefront and see real-time changes (no code design).
validating a need
As a startup, it was important for us to first verify that there was a need for our ideas. Our approach was to create a simple landing page that describes our product, possible features, and our pricing plan. We had a section for waitlist and carefully kept track of clicks and submissions. Our goal was at least 10 waitlist submissions to validate a need for our product.
Analytics captured with Plausible 3 days into publishing our landing page.
From word of mouth, reaching out to existing audience in forums, and a small budget on google ads, we were able to reach our goal of 12 unique submissions from 152 unique visitors in 2 weeks.
competitive analysis
While we were monitoring our click rates, we started an analysis of exiting products. Our competitive audit consisted of Etsy, Go Imagine, Ebay, & Amazon Handmade.
We took a look into what each marketplace offered that was unique from each other, the pros and cons from both a buyer and seller's experience, how to place credibility into sellers so that buyers will have no issues purchasing, how they modeled their pricing, and the ease of listing an item and onboard.
We also took a quick look into Gumroad, Ko-Fi, Big Cartel, and Wayfair for more structure and inspiration on platform based websites.
information architecture
Based on the information we gathered, an information architecture was created with important features and pages that users would need and want.
wireframing
Using the information architecture created, we started coming up with rough ideas of each page for wireframes.
We kept in mind our main goal of making a platform that is seamless for even novice sellers would sign up and feel confident to use.
Thinking ahead of possible challenges that users could face, we thought of places to implement guides, tutorials, AI assist, etc.
While converting these ideas to digital wireframes and evaluating with the team, we had to start shifting the main product to a more deliverable MVP keeping time and budget in mind.
With Figma, digital Lo-fi wireframes were built as we focused on creating a place where people can sell their goods and services on individual platforms that will later be able to appear on a community marketplace.
The transition would be frictionless for users to solo run their shop without the help of our SEO and to later to place their items in our market place that could be seen to a bigger audience if they wish to do so.
Branding
Our next step was to define our brand, and we all agreed upon the idea should revolve around "fun", "community" and "marketplace". Using these concepts, we decided to call our product Hoopla which means "excitement around an event" and we wanted our community to be just as excited as we were building this.
We soon started sketching logos, mood boarding possible color schemes, checking color accessibility, and drafting fonts. Keeping the same concepts in mind, we were able to finalize the design system.
mock ups
With our established design system, we were able to bring a working prototype of our vision to life.
1
Create a seamless onboarding experience that even a new seller could sign up.
2
Include vital resources to help sellers manage their store, minimally maximize features.
3
Design a flow for users to easily edit their storefront and see real-time changes (no code design).
affinity diagram
An moderated usability testing was conducted with 7 participants. They were given prompts from a seller's POV pertaining to the landing page, onboarding experience, storefront customization, and seller's dashboard.
In order to get a greater understanding of the user's path, one of us asked the question/prompts and took notes, while the other took track of user's feelings, site navigation, and time it took users to complete each tasks.
Taken the feedback from the 7 participants, we created an affinity diagram and summarized the overall main points. The KPI questions asked were related to the ease of use and time it took for each task. Results indicated that each section averaged around 1-3 on a scale of 10 (1 being easy, 10 being hard). Minor design flaws were found in terms of confusion of the copy writing and location of certain features.
overwhelming feedback on customization
Almost all users voiced that they loved the easy real-time changes for their storefront, but would like more the layout to be more customizable in order to be able to be differentiated from other stores other than just changing their banner and details.