HobbyHub
INDEPENDENT PROJECT
Product
Mobile-first website
Industry
Social
My Role
UX/UI designer, user researcher, brand designer
Length
4 months
Tools
Figma, FigJam, Google Suite, Zoom, Optimal Workshop
Many people want to pick up a new skill or hobby, but figuring out where to start or dealing with obstacles along the way can be a hurdle. My task was to create a mobile-friendly website that solves a common problem related to learning a new skill. Enter HobbyHub—an all-in-one platform connecting users with local organizations and events related to their hobbies, from the mainstream to the niche.
Problem
People wanting to try new hobbies struggle to start due to a lack of knowledge of how or where to begin, often causing stress and preventing them from pursuing their learning journey.
Solution
A mobile-first website that inspires and easily connects hobbyists to local organizations and events, spanning a vast range of skills and interests and instilling motivation and excitement in their learning journey.
Design Process
1. Discover
Competitive Analysis
User Interviews
Affinity Map
2. Define
POVs/HMWs
User Persona
Card Sort
Sitemap
User & Task Flows
Low-fidelity Sketches
3. Develop
Mid-fidelity Wireframes
Branding & Visual Design
High-fidelity Wireframes
4. Deliver
Prototype
Usability Tests
Iterations
1. Discover
Understanding Learners and Navigating Opportunities
Competitive Analysis
In the initial phase, I conducted a competitive analysis to pinpoint the project's specific focus. Exploring productivity platforms and habit trackers, I identified gaps in the following areas:
-
collaboration
-
personal coaching
-
reward systems
-
motivation features
This void presented an opportunity to cater to users seeking a more comprehensive and engaging learning experience.
User Research: Hearing Firsthand Experiences
From these insights, I needed to conduct discovery research to really hone in the exact direction I wanted to take the project. I aimed to understand the motivations behind learning a new hobby, identify the obstacles that hinder people from doing so, and explore the resources that people commonly utilize for acquiring a new hobby.
Research Goal
-
Understand the motivations behind the desire to learn a new skill/hobby
-
How people choose a new skill/hobby to learn
-
Learn what research people do about their desired skill/hobby
-
Determine the obstacles people face that may prevent them from learning a new skill/hobby
-
Understand how learning a new skill/hobby fits into their daily lives
Key Research Questions
-
What motivates individuals to learn a new skill/hobby?
-
How do they choose and integrate a new skill/hobby into their lives?
-
What obstacles hinder them, and how do they overcome these challenges?
Conducting 1:1 interviews with five adult participants revealed key statistics and insights.
80%
cite time constraints as a major obstacle
80%
desire a community or like-minded individuals
60%
rely on YouTube for learning new skills
“I always have to be learning something new. If I'm learning something new, then I feel like I'm contributing to either the world or my family. I have to be learning or I don't do well in life.”
- Participant
Visualizing patterns through an affinity map clarified common experiences and pain points among participants. Themes such as motivation, obstacles (time constraints, start-up costs), key resources (YouTube), and the desire for community emerged prominently.
Most Prominent Patterns
-
Motivation: Personal accomplishment, future goals, and enjoyment.
-
Obstacles: Time constraints, start-up costs, and access to resources.
-
Resources: Predominant use of YouTube and a desire for community.
-
Progress Tracking: Diverse methods include photos and comparisons.
2. Define
Crafting a Purposeful Framework
Point-of View Statement
Building upon research insights, I narrowed my focus on exploring ways to help curious individuals connect with fellow learners, because having another person who is learning the same skill/hobby increases motivation and accountability.
How might we . . .
-
Help individuals find and connect with fellow learners of the same hobby?
-
Ensure connecting with fellow learners is a positive experience?
User Persona: Meet Evie
With the project's direction clarified, I crafted a user persona—Evie. Evie, a curious homebody, seeks connection with others learning the same skill in her area. Her struggles revolve around accountability and locating fellow learners nearby.
Card Sort: Navigating Information Terrain
Conducting an unmoderated hybrid card sort on Optimal Workshop, I gathered insights on potential users' expectations regarding information placement. While responses varied for most cards, consistency emerged around search filters and user profiles. Some cards could be assigned to multiple categories, highlighting the importance of clarity in card wording.
Card Sort Takeaways
-
Varied responses for most cards, with some consistent themes.
-
Potential duplication of cards under different categories.
-
Need for improved clarity in card wording.
As this was my first time doing a card sort, it was a big learning opportunity. I learned that I needed to be more aware of phrasing/wording with the cards so that user expectations align accurately with the content, leading to a more intuitive and effective information organization.
Sitemap: Creating Structure
To solidify the website's organization, I created a straightforward sitemap. The goal was to ensure easy navigation and intuitiveness in accessing key information.
User and Task Flows: Streamlining Interaction
Focused on two primary tasks—searching for a local organization and signing up for an event—I employed common design patterns. This ensured a user-friendly experience aligned with the insights gathered during research and interviews.
SEARCH FOR A LOCAL ORGANIZATION
Task Flow
User Flow
SIGN UP FOR AN EVENT
Task Flow
User Flow
Low-fidelity Sketches: A Glimpse of the Future
Pencil met paper as key screens for both tasks were sketched, offering a preliminary visual representation of the potential end product.
3. Develop
Crafting the Digital Realm
Mid-fidelity Wireframes
Transforming low-fidelity sketches into dynamic wireframes in Figma marked a pivotal step. Enriching user engagement, motivational quotes, and featured blog articles were seamlessly integrated. Multiple search filters, including location, were strategically placed to enhance customized results. Although it is a mobile-first website, I designed a few desktop screens in addition to look at responsiveness.
MOBILE
DESKTOP
Branding & Visual Design
This is where my passion for logo and brand design began. I chose to name the wbesite "HobbyHub," encapsulating the platform's essence. I implemented circles and rounded aesthetics in nearly every visual design decision, symbolizing connection and keeping to a cohesive identity.
Highlights:
-
Logo design featuring a simple circle around "Hub" for symbolic connection.
-
Consistent roundedness in buttons and icons for a unified visual language.
-
Purple symbolizes creativity and introspection, while yellow represents positivity and energy, fostering an environment of exploration and enthusiasm on HobbyHub.
-
Gilmer typeface chosen for its modern and friendly design.
High-fidelity Wireframes
With colors, typefaces, logos, images, and text, high-fidelity wireframes manifested into an exciting and inspiring digital product. The culmination of thoughtful design decisions aimed to create a visually captivating user experience.
4. Deliver
Breathing Life into HobbyHub
High-fidelity Prototype: Interactive Vision
With colors, fonts, and logos applied, wireframes transitioned into a vibrant reality through prototyping in Figma. I meticulously connected key elements, ensuring a seamless user experience with multiple entry points for each task.
Search for a Local Organization
Event Signup
Usability Tests: Real-world Validation
Putting the prototype to the test through one-on-one moderated usability tests with 7 participants provided valuable insights.
What Went Well
-
Event sign-up form achieved a 100% success rate, lauded for clarity and efficiency.
-
Positive feedback on UI design and branding elements, including colors, fonts, and spacing.
-
Hub and event information deemed sufficient.
What Needed to Change
-
Search filter clarity needed refinement, with 5 out of 7 participants facing slight issues identifying them.
-
One participant expressed a desire for a skill level indicator on the event info page.
-
Ambiguity in wording regarding the total spots of an event, leading to confusion for one participant.
What I learned: Feedback from participants and mentors emphasized the importance of framing usability test prompts as real-world scenarios. Avoiding step-by-step guidance allows for a more genuine understanding of user instincts and behaviors.
Iterations: Fine-tuning for Optimal Experience
-
In response to user feedback, I implemented several iterations:
-
Clarified search filters with a simple heading for enhanced visibility.
-
Added a "Level" indicator on the event info page to convey the skill level of the event.
-
Revised the wording of total spots for events to eliminate ambiguity.
Wrap-Up
Lessons Learned
-
User research is critical; assumptions hinder progress.
-
I discovered a newfound passion for logo and brand design.
-
Learned to structure information effectively through card sorting.
-
Crafted authentic scenarios for better usability testing prompts.
Potential Impact
-
Foster a sense of community through HobbyHub, inspiring users and increasing motivation.
-
Contribute to greater life satisfaction through enriched learning experiences.
-
Improved user engagement leading to increased platform traffic.
-
Enhanced brand loyalty and positive word-of-mouth through a user-centric approach.
Next Steps
-
Address prioritized feedback for refinement in the iterations.
-
Collect ongoing feedback for continuous platform improvement.
-
Ensure a smooth transition with organized files during the developer handoff.
Starting my first UX project with HobbyHub emphasized the crucial role of user empathy, initiating a dedication to ongoing improvement for genuine user experiences and positive outcomes for both users and businesses.