Better We

Everyone wants things to be different. Everyone wants to begin a new relationship, break harmful habits, or experiment with a different look. It is easy to start a new lifestyle, but it might be challenging to maintain it until it becomes ingrained in the body. According to the study's findings, it takes an average of more than two months for a new behaviour to become permanent; to be precise, it takes 66 days. Because of the length of this period, it will be difficult for anyone to maintain a new habit over this period.

Quick Summary

A mobile application that motivates you by visualizing and materializing your achievement. It will also help you directly by social tie-in your challenge so that you can promote your new challenge and find a place to get advice or support.

Tools

Figma

Miro

Canva

Timeline

Jan 2023 - Feb 2023

Team

Sagith Kalaichelvam

Youngho Kim

Joseph Chung

My Role

Primary / Secondary Research

Persona Building

Visual Design

Workflow Prototyping

Sector

Lifestyle

Navigation and Exploration

Mobile Application

Skills Developed

User Research

Usability Testing

Wireframing & Prototyping

High - Fidelity Prototyping

UI Elements

Platform

App

Step 1: Problem Discovery and Interpretation

Defining the Problem Space

Proposed Solution

After completing our research, we came up with the idea of developing an application called 'Better We' to provide users with a solution that will make their lives healthier and more enjoyable.

This app will function as a habit-forming tool, assisting users in developing and customizing new challenges. The mobile application will include a function that enables social network interfaces. Users can ask their friends and family members to participate in the new challenge, and they can encourage one another to maintain the new lifestyle. The following are the essential features of the app:

Customization interface
Ability to invite family and friends
Activities that are titled "Season x" that occur at periodic intervals

The app will offer a monthly plan to collect user data (available as an in-app purchase) and offer seasonal challenges where users can participate in challenges endorsed by third parties. Future releases will have an A.I. system where users can set objectives that are realistic based on the predictions by A.I., and they are also capable of modifying those goals as they progress toward the ultimate goal.

We are confident that this will make the lives of the users better. Transforming anyone's lifestyle into positive and healthy shouldn't be hard. Users of our app can enjoy better lifestyle and share them with friends and families. Through the use of this technology, the transition to a new and more satisfying way of life will be made more accessible.

Proto-Persona

To develop a better understanding of the painpoints and needs that our solution will accomodate, we created a proto-persona informed by secondary research of existing solutions and primary research by minimum of 10 survey response from users that our app is targeted towards.

Step 2: Ideation

Putting all ideas into Prioritization Matrix

To satisfy our persona's needs and wants, our team conducted a Brainwriting and Starbursting brainstorming session on Miro to generate ideas for Better We.

After going through our ideas, we ended up organizing them into sections on a Prioritization Matrix based on impacts and feasibility. This is the step where it allowed my team to use these ideas to generate our 3 major tasks flows for this project.

Scope Definition

Our MVP release goals are to include the essential feature and content that allow users to create and customize a new challenge.

Some non-essential feature/content were also added for feasibility reasons.

Our design will follow the contents and features of this release.

Task Flows

We have created 3 different major task flows which will demonstrate the tasks that users can create a new challenge, view their challenge progress, and are able to redeem rewards and gifts.

We also implemented an option for users to watch videos of different challenges in learning process, but we did not create a task flow for it because it was not the main function of this application.

Sketches

We first started sketching out our ideas based on our tasks flows to get a thought before working on the wireframing prototypes on Figma. We have compared all our sketches and chosen the best design in our wireframing prototypes.

Step 3: Experimentation

Wireframe Prototype and Usability Testing

We decided to create mid-fidelity wireframes prototype to conduct usability testing from our target users.

From our Usability Testing, we found areas where problems were severe and universal. We decided they would warrant correcting. The list of the problems is as follows:

Too much white space (where?)
The back button should not be at the bottom, and should not be in shape with the word 'Black'
Too many blank spaces across the screens
Texts are too hard to read
Inconsistent phone layouts interfere with the experience
Redundant buttons are confusing, i.e. 'Yes' and 'No' buttons beside 'Next' button

Creative Strategy

We are focusing on making an app that targets users who want to improve their lifestyles. We wanted to ensure that the app's design encourages users to keep challenges in life and stay strong against anything holding them back from creating new habits.
Color Blue is chosen as the primary colour for the design. It represents freedom, inspiration, responsibility, honesty and faithfulness to themselves. These are the impressions users want to have for our application.
The minimalistic sans-serif typography with long height is carefully chosen to represent a powerful and convincing feeling but at the same time for the modern and future-looking feature,
Other design elements, icons or buttons, stay minimal as possible unless it disturbs other design focuses listed above. The minimalistic design may make the app plain, but for the habit-creating app that the user needs to open up at least once a day, strong figures will make users tiered.

Here is our moodboard that we created which reflects based on our creative strategy:

Keywords inspired the mood board are inspirational, fresh start, cheerful, positive, and optimistic.
Blue and green are the main focus of this moldboard to create the positive feeling we want our design to have.
Features of each image are carefully selected to deliver messages in appropriate manner.

Style Tile

For typography, we used the font Spartan because it is readable and a sans-serif type. We kept everyting as the same font and used different size to bring visual hierachy for the user.

We end up using our moodboard as our reference into applying different shades of blue into our style tile to create a positive feeling.

Mock-Up Prototype

All UI elements and colours were done individually

Here are some examples of the High-Fidelity screens that I have created:

Try out the interactive prototype here!

View Prototype

Step 4: Evolution

What I Learned and Reflection

In this project, we were given a Project Brief, where we followed exactly what our Project Manager wants, and end up delivering a product that is very useful for users to change their habits to be better in their lifestyle. We were given a one month timeframe to complete this project on time, and I have successfully learned how to follow Time Management to effectively finish this product and deliver the best product prototype to our Project Manager.
Working as a team allowed me to learn lots of useful ideas during the Agile Ideation methods that can be used within our product.
Throughout this project I have gained lots of understanding of using UI elements and creating wireframes on Figma from different workshops, which allowed me to deliver a product with a better user interface, while making the user experience better for our potential users.
It was difficult to work with different colours, since the design aspect needs to have better User Interface with the use of effective colours. After completing this project, now I understand that effective use of colour style tiles are very important. Colours can create some sort of visual hierachy to stand our for the user.

Overall, this experience have helped me to gain more experience in using Figma, and applying the understanding of UI concepts. I have gained lots of skills such as Usability Testing, creating User Personas, and adapting the use of Visual Hierarchy. This project have made me to gain interest on creating more future UX design projects with the UI aspect.

Page updated

Google Sites

Report abuse