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:
Freelance Designer
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.
more customization
A couple of iterations were made with the feedback we received. But with majority of the feedback stating that customization was important, we went back to the drawing board to come up with ways that sellers could structure their store with more freedom while still keeping it super simple to use.
The best solution we thought to easily solve this user pain point was to implement blocks into our storefront editor. Using Figma and Final Cut Pro, I was able to create mock-ups to illustrate the idea.
ARRANGE TO their LIKING
Using the commands on the side, sellers are able to move or delete each block to adjust the layout of their storefront just the way they like it!
CONTROL & CUSTOMIZE
Simply decide which color, font, and size in order to align with any store’s brand needs.
DECIDE store FORMAT
Stores can easily choose the format of each block to set themselves apart from other stores.
what i learned
This was my first experience working with a team. As a founding member in an early start up, I was fortunately able to gain some knowledge from the developer's side and contribute/learn from a business side too. It was shocking to find out that storing data and implementing certain design features costs money. With that information, some challenges we faced were coming up with designs that not only catered to user's needs but also adhere to the company's budget. Working closely on hand with a developer to gather feedback on what designs are possible required fast iterations and was not a cookie cutter process. Instead of step by step, we had to create page by page in terms of moving on a limited timeline. Defining the brand, name, and overall company's direction that agreed with all 5 of us took the longest amount of time.
Overall, it was a rewarding experience that helped me understand new perspectives, and I was able to refine my Figma skills!
what's next?
Our initial designs and iterations for Hoopla's MVP is completed and has been passed to the software engineer who is currently working on turning those designs into reality.
To adhere with the NDA, the complete prototype is not available to view and only agreed upon sections of the design was able to be showcased.
But please feel free to check out our current demo while our developers are working hard on the rest.
