Embedded Files
Project Sample 1
Project Sample 1
DP Breath
DP Breath
--> Ultimate solution for digital mental health
"Each Breath is a Unique Journey"
Background
Background
Self founded on 2025, Ongoing
The project was initialized by Tony Bi, who is a current fourth-year student at Western University.
The project was initialized by Tony Bi, who is a current fourth-year student at Western University.
The initial inspiration came from the recognition that increasing number of people in London, ON community are facing severe mental health issues including but not limited insomnia, ADHD, anxiety and mood disorders .......
The initial inspiration came from the recognition that increasing number of people in London, ON community are facing severe mental health issues including but not limited insomnia, ADHD, anxiety and mood disorders .......
The DP Breath is built to provide those people in need a one-stop non-entertaining digital platform which can easily access the most of digital mental support resources, so their situations can be relieved.
The DP Breath is built to provide those people in need a one-stop non-entertaining digital platform which can easily access the most of digital mental support resources, so their situations can be relieved.
The project is currently advancing and optimizing. Stay tunned ......
The project is currently advancing and optimizing. Stay tunned ......
Project Procedure
Project Procedure
User Personas
User Personas
Bernice ⬇
Primary target market
Matt ⬇
Secondary target market
Hover the image,
click arrows to see more
⬅️ ➡️
version A Prototype
version A Prototype
The version A prototype was created to target user group like "Bernice".
dp breath mobile .mov
user journey map
user journey map
Track user feelings and opportunities in each stage, provide target users Personalized recommendations, Feedback loops and Gamification elements to enhance overal experience
version B Prototype
version B Prototype
Developed the 2nd version of prototype on Xcode IDE, which formed a comparative group with version A, preparing for the incoming A/B test to receive first round of target market feedback.
DP Breath may face to a core function repositioning after conducting User Interview, Quantative Measurement and problem analysis ......
swift simulate.movdigital product Mock-ups
digital product Mock-ups
DP Breath is planning strategicall expand on mainstream social apps (e.g., Instagram) to improve brand engagement ratios of reach and frequency
DP Breath is planning strategicall expand on mainstream social apps (e.g., Instagram) to improve brand engagement ratios of reach and frequency
Connect With Us on LinkedIn
Mission:
Mission:
Provide accessible mental health self-care resources for those struggling with concentration, sleep issues, or finding mental peace.
value proposition:
value proposition:
A "One-stop hub" designed to optimize relaxation, rest, and focus. It positions itself as a "mental healing shelter" for users.
↳ competitive analysis:
↳ competitive analysis:
Direct competitors:
TIDE, Opal, Headspace
Indirect competitors:
Apple Health, Focus app, Portal
Tide
Tide
Core Offering: A physical and mental care app integrating sleep, meditation, relaxation, and focus.
Key Features:
--> Nature Soundscapes: High-quality sounds (rain, ocean) for sleep and focus.
--> Focus Timer: Combines Pomodoro technique with immersive backgrounds.
--> Breathing Guides: Visual and audio breathing guides (e.g., 4-7-8 method).
--> Quotes: Daily inspiring quotes displayed in a minimalist UI.
UX Strengths: "Fluid" design language; extremely minimalist and aesthetic; seamless transition between focus and sleep modes.
Weakness: Can feel limited for users seeking structured, long-term guided meditation courses compared to Headspace.
What are "DP Breath" Key Features ?
What are "DP Breath" Key Features ?
What we can use to being competitive?
What we can use to being competitive?
click to drop down ⬇
Breathing Exercises: Tools to practice focusing on the present moment. No subscription fee needed, all features free to new users for now
Digital Shelter: It is more than a web or tool. DP Breath will construct its own digital community. Build a safe space concept to escape social media noise.
Holistic Approach: Encourages physical activity and nature connection ("Make a move") rather than just app usage.
Comprehensive Supports: We will integrate comprehensive digital mental health information, and open the feature of User-Generated Content to allow users share relevant resources.
Control flow scheme
Control flow scheme
(Log in)
Web development
Web development
1st generation UI
1st generation UI
rroblem 🙁:
rroblem 🙁:
---> Lack of attractive points
---> Layout is rigid, cannot effectively reflect the brand overall style and value. The color scheme should be adjusted
2nd gen DP Breath UI.mov2nd generation UI
2nd generation UI
iteration 📈:
iteration 📈:
==> Redesign the homepage layout to make the landig page UI more dynamic
==> Redesign the overall color scheme, which emphasize our business belief more efficiently
other UI design samples
other UI design samples
A Web Design Project for
London ON local business
"Juls Aesthetics"
Using HTML, CSS to develop the entire project lifecycle independently.
A Web Design Project for
Golden Retriever lovers and owners
Aim to integrate information about golden retriever and pet care knowledge.
Developed all the website digital media assets independently, received lot of recognition from classmates
Ongoing project design ....
Ongoing project design ....
A mobile app for elderly generation to expand digital social experience
I designed the low-fi wireframes, control flows, 1st generation prototypes ...
This app will enhance elderly social life experience, effectively support them to adapt into community ...
Project sample 2
Project sample 2
-- Portfolio Site Optimization
Iterated my personal portfolio sites by recognizing key problems and needs.
Developed corresponding solutions and apply them using UX principles and guidelines
1st version
1st version
Problem 1:
Linear click thru experience 😟😟😟
Problem 2:
Layout is too monotonous 😟😟
current
current
Solution 1:
--> Redesign the information architecture of entire site;
--> Categorize all the samples, add more interactive widgets to encourage more user engagements;
Solution 2:
--> Improve the aesthetic layout, developed a consistent color scheme, implemented the CRAP principles as guideline;
Project Sample 3 :
Project Sample 3 :
Digital platform Transformation
Digital platform Transformation
at Western University Faculty of Health Sciences.
(Oct 2025 -- Ongoing )
As Web Design Intern at Health Sciences Faculty web team, I conducted Web auditing, Priority ranking, User journey mapping to identify friction points and strength on faculty webpages
As Web Design Intern at Health Sciences Faculty web team, I conducted Web auditing, Priority ranking, User journey mapping to identify friction points and strength on faculty webpages
Implementing digital platform transformational strategies for comprehensive web migration via Cascade CMS
Implementing digital platform transformational strategies for comprehensive web migration via Cascade CMS
Leveraging Google Analytics for web traffics tracking, applying iterative high-visibility landing pages to boost data-driven UX decisions.
Leveraging Google Analytics for web traffics tracking, applying iterative high-visibility landing pages to boost data-driven UX decisions.
calendar website management
calendar website management
Student Experience Department, Western University
(Oct 2024 -- April 2025)
Managed event information and digital assets on the Western "Luminate" system to effectively arrange e-communications and scheduling among various departments.
Managed event information and digital assets on the Western "Luminate" system to effectively arrange e-communications and scheduling among various departments.
Page updated
Google Sites
Report abuse