JOINA

Re-designing my first school project
to match Joina’s new brand

Project Summary

PLATFORM

App

TEAM

Just me (UI)

RESPONSIBILITIES

Brand research, UX heuristics, hi-fi design

The Client

Joina is a gamified app that transforms health and workout goals to fun and rewarding experiences. With multiple challenges to choose from, the app makes it easy for you to stay motivated and to build new habits.

Original Design

This is what the original design looked like. Some of the design issues I wanted to fix were:

  • Accessibility: color contrast

  • Overuse of primary color

  • Preventing users to get overwhelmed

Step 2: Descriptive design
Instead of having just labels like “beginner, intermediate, advanced”, I added more visuals and descriptive titles.

NEW

My Re-design

Why?
As mentioned above, the original design along with Joina’s old design system, did not pass WCAG 2.2 and the design had several major issues with color use and element misuse. I also felt like the design didn’t reflect my current skills.

But first…
Joina has gone through a complete re-branding themselves. So, in order to put my new design into context, here’s what Joina looks like today:

NEW

Step 6: Inviting friends
I cleaned up the invitation page, too, by utilizing more white space and keeping it simple.

OLD

OLD

OLD

OLD

Create Your Own Challenge 2.0

Step 1: Checkboxes
Doing away with checkboxes for two reasons:
1. You’re only supposed to be able to choose one option.
2. They’re kind of hard to click on compared to a card.

I also decided to stick to one step per page for the following reasons:
1. To avoid cluttering the page and overwhelming the user.
2. To add a progress bar (see Step 2).

NEW

NEW

Step 5: Banner image
I decided to focus on the visuals by enlarging the banner image choices.

OLD

OLD

Step 3: Calendar
1. Instead of two calendars, you just choose number of days the challenge will last.
2. Stroked highlight for current date and filled highlight for selected date.

NEW

Step 4: Exercise cards
This part I stuck to a similar design as Joina did, because I like how clean and simple, yet effective, these cards are.

NEW