Case Study: Hobbi

Hobbi - the brand spankin’ new social app that helps cool cats like you find the hottest events in your area that you actually want to go to.

Project Overview

Hobbi is a new social app centered around building community through shared interests. Users create a profile, add their favorite hobbies, and search for related events near them.

Target Audience: 18 to 40 years old

Duration: 4 Weeks

Tools: Figma, FigJam, Adobe Excel

The Problem

How do people ever find their own community in this hectic world? Between busy work schedules, being an adult in a new city makes it nearly impossible to find friends; particularly friends who share common interests with you.

The Solution

Part social app, part event planner, Hobbi combines the community building of social media profiles with the utility of event sharing. Users create their own profile, add their specific interests, and are shown a personalized feed of events in their area that are relevant to their hobbies.

  • Assess features needed for MVP

  • Determine how users are most commonly finding friends with similar interests

  • Ensure app is accessible for all potential users

  • Create clean, familiar UI

Define

Research is a designer’s best friend. Through user research, I can define the needs, motivations, and behaviors of potential users so that I may craft the ideal product.

Both quantitative (competitive analysis) and qualitative (user interviews) research methods were used during this process so that I could ensure a robust body of data to start my design process.

Research Goals

User Persona

Affinity Map

Research Objectives

Competitive Analysis

First order of business was a competitive analysis. Four products were analyzed: 3 direct competitors (Bumble BFF, Yubo, Amino) and one indirect competitor (Reddit.) Here’s what we found:

  • No product included an event creation feature

  • Only 2/4 competitors provided identity verification

  • Products with a younger userbase (Yubo and Amino) had brighter, “noisier” UI than products with an older userbase

  • Information overwhelm made navigating mobile versions of these apps difficult and frustrating

  • Determine which features are most widely used by users of similar products

  • Determine any roadblocks preventing users from meeting with friends found online IRL

  • Assess user frustrations with similar products

User Flow

The user flow was invaluable in helping me begin to visualize how Hobbi would look and what it really needed to do.

This flow represents the user’s journey from application launch to their discovery of all possible app features.

Task Flows

Three task flows were isolated in order to prioritize features needed for the MVP, that I would later prototype and test.

Ideate

Design

With everything in place, it was then time to hit the ground running and begin designing what would soon become Hobbi. I started with low-fidelity wireframes and, after a few iterations, ended up with a beautiful prototype ready for user testing.

Low-Fidelity Wireframes

  • Took inspiration from successful dating/event planning apps

  • All elements created with responsive design in mind

  • Figma’s auto layout and component features made circling through iterations much faster and more efficient

High-Fidelity Wireframes

  • Monochromatic purple color palette used in final design

  • Splash Screen replaced with a solid color background

  • Icon set changed to Github’s Octicons

  • Text finalized and refined; including copy and functional text

Prototype

User Testing Feedback Grid

With the three selected task flows successfully constructed into a prototype, 5 users graciously volunteered to test Hobbi.

To consolidate and synthesize the feedback, I organized what Users had to say into a feedback grid.

Final Thoughts

What I’ve Learned So Far…

  1. End-to-End design presents new challenges that I did not anticipate. I had to be incredibly disciplined and stick to a rigorous schedule to ensure I did not end up off track and kept the “minimum” in “minimum viable product.”

  2. Good visual design is integral to good usability! I found myself scrambling to finalize the designs as I neglected to create a style tile or a UI kit to guide me.

  3. Solo/Freelance design may not be the field for me just yet. Designing an end-to-end app with minimal guidance was an overwhelming experience that has made me appreciate group efforts even more.

Next Steps

  • Create a brand style tile to ensure cohesion among all screens

  • Add an “account created successfully” screen after the account creation process is completed

  • Rework button placement during account creation to be more finger-friendly

  • Create separate page in nav bar for event search feature in addition to search icon in explore page

Thank you!