top of page




Mobile-first website



My Role

UX/UI designer, user researcher, brand designer


4 months


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.


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.


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


User Persona

Card Sort


User & Task Flows

Low-fidelity Sketches

3. Develop

Mid-fidelity Wireframes

Branding & Visual Design

High-fidelity Wireframes

4. Deliver


Usability Tests


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.

A table comparing features, strengths, and weaknesses of 3 productivity platforms: ClickUp, Strides, and
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.


cite time constraints as a major obstacle


desire a community or like-minded individuals


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.

An affinity map made up of sections and sticky notes to that visualize patterns among user interview participants.
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.

A user persona of a woman named Evie. Includes her motivations, pain points, and personality characteristics.
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.

A sitemap for HobbyHub showing how the content is organized across the site.
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.


Task Flow

A task flow for searching for a local organization

User Flow

A user flow for searching for a local organization.


Task Flow

A task flow for signing up for an event.

User Flow

A user flow for signing up for an event.
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.

Low-fidelity sketches of key screens for the chosen tasks.

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 mid-fidelity wireframes for key screens relevant to the chosen tasks.


Desktop mid-fidelity wireframes of a few key screens relevent to the chosen tasks.
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.

Digitized black-and-white logo ideas for HobbyHub.
Final logo variations for HobbyHub.


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

Style tile showing visual design elements, including logo, color palette, typography, and brand keywords.
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.

Mobile high-fidelity wireframes of key screens for HobbyHub.

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

A GIF showing the prototype flow for searching for a local organization.

Event Signup

A GIF showing the prototype flow for signing 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.

HobbyHub homepage on mobile.


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.

Thanks for reading!

Want to reach out?
bottom of page