inspect motion hero image

Treadwill - Mental Health App



For - Bio-informatics Department (IIT Kanpur)

Website




Problem : “We are planning to include a Support Group in TreadWill. It is a space where users can interact with other TreadWill users.”

A user can:

Existing design

Previous Design Treadwill

Requirement

In TreadWill, users can also earn badges and experience points (XP). Let’s say there are three kinds of badges a user can earn ⎼ gold, silver, and bronze. We want to show the number of different kinds of badges (Example:- 2 gold, 8 silver, 20 bronze) and the total XP (650 XP) a user has earned near the user avatar. Showing the XP and number of badges earned will help our users assess the credibility of a user at a glance.

The challenge is to show these details near each user avatar without making the UI look cluttered. Use some representative graphics for depicting the kind of badge and make up some number of badges and XPs earned by each user. Feel free to rearrange the existing elements to accommodate these details.

Solution

Layout Architecture with form conversion (negative to positive)

Layout Architecture

Problem Solving Form

Problem Solving Form

Redesign

Mockup

Prototype