OVERVIEW

Hoopla streamlines the process of online selling, providing an intuitive and user-friendly platform that eliminates the need for coding expertise. At Hoopla, we are committed to creating an inclusive and accessible platform that helps sellers of all backgrounds achieve their goals, enabling them to thrive in the competitive e-commerce landscape.

My Role:
UX Research, UX Design, Branding, Logo Design, UI Design, User Testing, Visual Design

Team Members:
1 stakeholder, 2 engineers, 2 UX & UI Designers

Timeline:
October 2022 - January 2023

Project Type:
E-Commerce Platform
Website Design
Team Project

Tools:
Figma, FigJam, Notion, Procreate, Paper & Pen

MEETING THE TEAM

When I came aboard the team in October, the founder and two engineers had a wealth of ideas written down but lacked the expertise to translate them into a compelling visual and user experience. Over the next four months, the five of us collaborated to validate our solution by developing a landing page experience that ultimately led to the creation of a minimum viable product (MVP).

THE PROBLEM

Shopping is as easy as 1, 2, 3.

The shopping landscape has been transformed since the outbreak of the pandemic, making it more convenient for people to buy anything, anywhere, and at any time. Thanks to the rapid advancements in technology and rising demand, the shopping experience has undergone a significant overhaul, greatly benefiting consumers. This raises the question - have there been similar improvements from the seller’s perspective?

OUR SOLUTION

While there are many online selling platforms available, some of them come with an exorbitant price tag or do not prioritize the seller's success on their platform.

Seizing the opportunity to address the challenges faced by sellers, we have developed Hoopla - a revolutionary no-code e-commerce platform designed to empower sellers to effortlessly set up their shops, manage inventory, sell, and achieve success without any prior technical knowledge.

Goals:

With a seller-centric approach, our 3 main goals in creating Hoopla focus on:

SOURCING FOR “REAL” CONVERSATIONS

To gather valuable insights into the online selling landscape, we tapped into public resources and turned to Reddit as a source for authentic conversations on the topic. Specifically, we focused on our main competitor, Etsy, and examined discussions on both r/Etsy and r/EtsySellers. Our research yielded surprising results, as we found an abundance of posts from individuals seeking alternative selling platforms to Etsy.

By analyzing these conversations, we gained valuable insights into the pain points and needs of online sellers, which informed the development of our own selling platform. Our findings highlighted the importance of offering a user-friendly and customizable platform, with fair pricing and policies that prioritize the success of sellers.

VALIDATING THE NEED

In the early stages of our startup, we wanted to ensure that there was a demand for our product before investing time and resources into developing a Minimum Viable Product (MVP). To validate our ideas, we decided to create a simple landing page that explained our product, its features, and pricing plan. We also included a waitlist section, where we encouraged visitors to sign up for early access.

Using Plausible Analytics, we were able to track visitor behavior that included their clicks and waitlist submissions. After just two weeks of launching the landing page, we received a 20% conversion rate. This number exceeded our expectations and provided us with validation that there was a market need for our product.

ANALYZING OUR COMPETITORS

To gain a better understanding of the existing e-commerce platforms and their strengths and weaknesses, we conducted a comprehensive competitive analysis on Etsy, Go Imagine, eBay, and Amazon Handmade. This competitive analysis allowed us to gain insights into the current market trends and to identify areas where we could differentiate our product.

Our analysis included:

Pros and Cons of both the buyer and seller’s user experience
Highlighting the features and functionalities that these platforms offer
Examined each platform's pricing model, transaction fees, customer service, and seller tools
Identified features that we found particularly useful and relevant to our own product

👇🏻Check out the full competitive analysis findings here!👇🏻

Competitive Analysis

INFORMATION ARCHITECTURE

Once we had identified the key features and functionalities that we wanted to incorporate into our e-commerce platform, we created an information architecture map using FigJam. This map helped us to visualize the navigation flow that our users would follow when using our platform.

-Look around! I’m interactive!-

DIGITAL WIREFRAMES

In order to make the most of our limited time and budget, we decided to streamline our design process by jumping straight into creating digital wireframes for our MVP. This approach allowed us to quickly iterate and test our ideas, without getting bogged down in the details of a more polished design. By starting with low-fidelity wireframes, we were able to focus on the core functionality and user experience of our platform, ensuring that we were on track to meet our MVP goals.

GIVING A STYLE TO HOOPLA

Once we had developed our digital wireframes and prototypes, we turned our attention to the brand development for our product. We began by iterating on various logo designs and exploring different name options, all while keeping in mind the overall visual appeal we wanted our brand to convey.

Ultimately, we decided on the name "Hoopla," as it conveyed a sense of excitement and community that we felt was reflective of our platform's mission. We also worked on refining the brand's visual identity, incorporating bright colors and playful design elements to create a sense of energy and fun.

AFFINITY MAPPING

To gather insights into the user experience of our platform, we conducted a moderated usability testing session with 7 participants. Each participant was given prompts from a seller’s point of view, which focused on key areas of our platform: landing page, onboarding experience, storefront customization, and seller’s dashboard.

Based on the feedback from the usability testing, we created an affinity diagram to organize the information and identify common themes. To assess the ease of use and time it took for each task, we used KPI questions during the testing. The results indicated that each section had an average score of 1-3 out of 10, which indicates that the tasks were generally easy to complete. However, we also identified some minor design flaws, such as confusion with the copywriting and the location of certain button features.

BLOCKS SYSTEM FOR FLEXIBLE CUSTOMIZATION

**IMMENSE WANT ON CUSTOMIZATION**

Despite the ease of use, all participants provided feedback requesting **more flexibility in customizing their storefronts** to differentiate themselves from others. This feedback spurred more ideas within our team, leading to the **development of what we call "blocks"** in the storefront experience. Although this system is still in development, PinnPinn has created a video mockup to showcase the idea. Please take a look below!

**ARRANGE ALL YOU WANT**

Using the commands on the side, you’ll be able to **move or delete each block to adjust the layout** of your storefront just the way you like it!

**DECIDE THE FORMAT**

Easily choose how you want the format of each block to look and **set yourself apart** from other stores.

**CONTROL & CUSTOMIZE**

Simply decide which color, font, and size you want in order to **align with your store’s brand** needs.

FUTURE ROADMAP

Working with the startup team was an unexpected and fulfilling experience that allowed me to learn and develop new skills. Throughout my journey, I was exposed to a variety of tasks that improved my workflow and knowledge in areas such as:

Working closely with engineers brought realistic constraints to designing. Collaborating with developers was a valuable experience as it provided me with insights into the technical limitations and practical considerations that needed to be taken into account during the design process. It was eye-opening to see how the designs we created could be impacted by these constraints and how we needed to work closely with the engineers to create a functional and user-friendly product.
User testing was valuable in driving both design and business decisions. There were times when it was challenging to come to an agreement on design decisions without factual data on user needs and preferences. However, I was amazed to see how user testing results could drive design decisions and align the team's business objectives.
Utilizing the auto layout feature in Figma. I learned how to use the auto layout feature in Figma, which allowed me to create more efficient components and streamline my workflow. Utilizing this feature significantly reduced the time I spent on creating pixel-perfect designs.

Shopping is as easy as 1, 2, 3.

Goals:

👇🏻Check out the full competitive analysis findings here!👇🏻

-Look around! I’m interactive!-

~ THANK YOU FOR VISITING! ~

More projects: