Aun Zaidi

Hobby Hub

INDEPENDANT PROJECT

Product

Mobile-First Website

Industry

Social Networking

My Role

UX/UI designer, user researcher, brand designer

Length

5 months

Tools

Figma, FigJam, Google Suite, Notion, Maze, 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
• Task Flow
• Low-fidelity Sketches

3. Develop

• Mid-fidelity Wireframes
• Logo & Branding
• UI Kit
• 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?
Site time constrains as a major obtacle
0 %
desire a community or like-minded individuals
0 %
rely on YouTube for learning new skills
0 %

“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 in Focus: 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

SIGN UP FOR AN EVENT

Task Flow

User 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 choose to name the website "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

SIGN UP FOR AN EVENT​

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.

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 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.

Thanks for reading!

Want to reach out?