Project

← All projects

Personal project

Hobbies App

Problem
Finding a new activity for your free time, and people nearby to share it with, is hard to do in one place.
Solution
Hobbies, a concept app that suggests activities based on your interests and connects you with people nearby who share them.
My role
Everything, as a personal project: UX, UI, illustration and design system.
Skills
UI designUX designDesign systemIllustrationConcept
Methodology
An illustration set drawn first, then a design system (a purple palette, type and components) and the app screens built from it.

An experimental personal project, built around an illustration set I drew for it: a purple palette, twenty characters and a design system behind the screens.

Design decisions

  1. One clear start

    A single welcome leads straight to an interest picker, so suggestions are personal from the first screen.

  2. Navigation you can see

    A tab bar keeps the four main areas (Home, Explore, Community, Profile) one tap away from anywhere.

  3. A home that remembers you

    Home puts the session in progress first, then suggestions, then what is popular nearby.

  4. Progress you can read

    Progress is always a bar with the count beside it, used the same way on every screen.

  5. People and places together

    Explore brings hobbies, distance and people into one view, and each hobby groups its forum, gallery and events.

WorkMobile app / UX/UI / Design system

01 Welcome
02 Interests
03 Home
04 Hobby detail
05 Explore
06 Profile

Design system

The screens are assembled from a small kit: one purple scale, one typeface and a handful of components.

  • 12Colors
  • 6Text styles
  • 18Icons
  • 20Illustrations

Color

A scale built around one purple. The number on each step is its contrast against the text it carries.

Purple scale

  • 90017.1 · AAA#2A0F3AHeadings
  • 70010.1 · AAA#602483Brand · actions
  • 6007.6 · AAA#7436A0Pressed
  • 4005.2 · AA#A57FC4Inactive icons
  • 20011.2 · AAA#DCCBE8Illustration shapes
  • 10014.2 · AAA#EFE7F5Surfaces
  • 5015.7 · AAA#F8F4FBBackgrounds

Neutrals and accent

  • Ink#1D1326Body text
  • Muted#6F6478Secondary text
  • White#FFFFFFCards · sheets
  • Amber#FFC65CStreaks · highlights
  • Amber soft#FFF1D1Accent surface

Text pairings

  • AaPrimary button10.1 · AAA
  • AaHeading on surface14.2 · AAA
  • AaLink on background9.3 · AAA
  • AaSecondary text5.6 · AA
  • AaStreak15.3 · AAA

Aa

Poppins

Regular 400SemiBold 600

ABCDEFGHIJKLM
abcdefghijklm
0123456789

Typography

Six styles and two weights. Sizes in px, as used on a 320 px wide screen.

StyleSize / lineWeightUsed forSample
Display25 / 1.15SemiBoldWelcome

Find your people.

Title L21 / 1.2SemiBoldScreen titles

What are you curious about?

Title15 / 1.3SemiBoldSections · cards

Picked for you

Body13 / 1.5RegularDescriptions

Discover activities you’ll love.

Caption11.5 / 1.4RegularMeta · counts

Session 4 of 20 · 10 min

Overline10 / 1.4SemiBoldLabels

Continue

Elevation

Flat by default. One soft shadow, only for things that float over a map or image.

FlatFloating

Components

The pieces every screen is built from, with their states.

Buttons

Get startedFind a new hobbyMaybe laterContinue

PrimaryOutlineSoftDisabled

Selection

AllOutdoorsCreative
MindfulnessPhotography

SelectedDefault

Input and feedback

Search hobbies or places
9 / 20
2Hobbies14Sessions 5Day streak

Lists and cards

Karaoke12 people · 0.8 km

Continue

Mindfulness

Navigation

HomeExploreCommunityProfile

Icons

One line weight (1.75), rounded ends, on a 24 px grid, so they sit next to the illustrations.

  • home
  • compass
  • users
  • user
  • bookmark
  • back
  • next
  • search
  • settings
  • check
  • pin
  • play
  • edit
  • flame
  • calendar
  • chat
  • image
  • clock

Illustrations

Twenty hand-drawn characters carry the personality. They always sit on a purple 100 or 200 shape.

Back to top