HabitZee Flix - Case Study
UX Research, UI Design & Branding
UX Research, UI Design & Branding
Bad Habits
We all have bad habits and breaking a bad habit can be difficult. In James Clears’ model for behaviour change, there are four sequential stages required to create a new habit: cue, craving, response and reward. This framework will motivate the person to create a new habit.
The task is to undertake and compile UX research by exploring and identifying a problem space, in order to form a new habit for a particular user before developing an app.
Bad Habits App Goal
Using the compiled UX research, develop an app to create behavioural change.
Problem Space
Problem Statement
The user lives a hectic lifestyle, juggling school, freelance jobs and running a small art business. The user easily gets stressed, loses focus and motivation, and becomes disorganised. As a Korean Drama fanatic, keeping up with dramas and earning leisure time is far from the reality due to her disorganised self.
New Identified Habit
Be more organised, focused, and efficient with time in order to have more leisure time to watch dramas.
Solution and Goal
To create a motivational and rewarding app that will allow the user to form a new habit and routine.
About HabitZee Flix
HabitZee flix is a task Management app that has a reward system consisting of sweets and puzzles.
It also has an integrated system that connects to a VOD Streaming Service (e.g. Netflix) enabling a lock that prevents the user from getting distracted from watching dramas.
How it Works
Every task created turns into a gift box. Every time you complete a task, the gift box unravels and the user receives an award.
Once all tasks are complete, it unlocks content from VOD Streaming Service and disables the lock feature. The user is able to send a message to a friend if they’re ready to watch.
Reward System
Main Award - Puzzle Piece
Every task you complete you receive a puzzle piece that becomes part of a puzzle board that unlocks new content (if connected to Netflix, it’ll unlock the content, depending on the number of tasks you have in the day, number of tasks = number of puzzle pieces)
Bonus Award - Sweet Item
Sweet Item for the user’s Sweet Tooth. The item is collected when the user uses the focus timer feature and completes all tasks in the day.
Once all tasks are complete, it unlocks the video and disables the lock feature, able to send a message to a friend if you’re ready to watch.
If the user doesn’t complete the tasks for the day, the hungry sweet tooth monster eats a sweet item from your reward system (sweet jar).
Research
Field Diary & Comparative Analysis
Over the course of five days, a field diary and comparative analysis was conducted accordingly in order to find similar problems and help gather insights about each application's strength and weaknesses. These insights will help assist and identify features that the HabitZee Flix app could offer.
Scenario
A user scenario shows how users might act to achieve a goal in a system or environment. This will further explain the users' motivations, frustrations, needs and wants.
"Joanne is a student in her final year of university also running a small art business and working as a freelance illustrator.
She is currently at home during the long summer break. She receives a message from her best friend notifying her of the new drama they’ve been anticipating for a few months, that’s dropping on Sunday. It’s currently Wednesday, and unfortunately she hasn’t been able to complete her scheduled tasks since Sunday. She has a client illustration project due on Sunday and has to restock her shop for the upcoming Christmas season on Monday. She believes her current routine isn’t motivating her to complete tasks on time.
She wants to complete her scheduled tasks but isn’t sure how she’s going to watch the drama with her friend on time, without losing focus and motivation."
Define
The Solution
After analysing Palette Cup's business model, we wanted to develop and design a mobile application that will help the business reach a broader audience, from locally to globally. To enhance their presence as a business, we established a new brand identity and guidelines for Palette Cup.
What makes Palette Cup's business and app different are two of their services - Purchasing food and beverages and Paint Studio Booking.
A unique service tailored to Palette Cup is Palette Cup Studio. This particular service allows customers to paint at the cafe through a booking system. The customer is able to choose a specific cafe franchise location to paint at, with the option to pick up the painting or have it delivered to their door once completed.
Ideation
Different ideas were explored for the ordering service and purchasing system. From a personal experience, restaurants have been adopting a new dine-in option that allows consumers to scan a QR code, order and pay at the table. This is a unique function that has sparked the inspiration for one of the features in the application.
Many different restaurants have also been approaching the QR code dine-in option even after the pandemic. Adopting this contactless experience might become the new normal in the future.
Storyboard & Journey Map
The storyboard and journey map is a visualisation that is stemmed from the scenario. A storyboard is useful to visualise the overall problem space. The journey map of the user's steps highlights the important goals and opportunities that can be explored in the mobile application and ways to simplify their journey to breaking a bad habit.
User Task Analysis
A user task analysis assists the user to navigate through the application and identify the main flow of a user when completing a task. The user task analysis also shows the user experience in detail.
Design
Sketches
After ideating and identifying the key screens and processes needed for the design, the next step was to start sketching low-fidelity screens in order to map out ideas. This creates an opportunity to examine the ideas before digitising the screens.
Wireframes
The aim of wireframes is to provide a visual understanding of the mobile app in the early stages of the project. As the entirety of this project was assessed based on the conceptual and UI development of the app, creativity, originality visual structure and UI design are the main focus of this project.
HabitZee Flix went through 4 wireframe refinement stages to produce a high-fidelity prototype.
HabitZee Flix went through 4 wireframe refinement stages to produce a high-fidelity prototype.
Moodboard
Two moodboards were created to gather an overall mood and stem inspiration around the specific attributes and visual style of the mobile application.
Style Tile
The visual style was developed further through a style tile. It serves as a synthesizing document of the brand ideas and inspirations gathered, incorporating logo design, colour palette, typography, and imagery that will guide the user interface design during the prototype stage.
Wireflow
The established styles made in the style tile are applied to high-fidelity wireframes. By creating a wire flow overview of the application, the visual balance can be examined.
HabitZee Flix Prototype
Final Thoughts + Next Steps
With the final prototype created, I believe I have met the goals outlined at the beginning of the design process. I designed a mobile application that provides gamified features centring on improving day-to-day habits, especially for those who like to watch Netflix on a daily.
If I had more time to complete the final prototype, I would dive deeper into enhancing the micro-interactions to create a more seamless experience, especially the link between the tasks and the gamified puzzle board to unlock the content.
