Braincheck Web Redesign
Redesign the BrainCheck Website to improve the user experience and increase accessibility to brain health information.
This personal project was created as part of a Web Redesign Proposal for braincheckeck.net.
Role: UX researcher, visual designer
Period: 1 – 29 February 2024
Project overview
The aim of this project is to redesign the BrainCheck (http://www.braincheck.net/ ) desktop and mobile web interfaces to enhance the screening process for dementia patients and overall mental health evaluations. The redesign will prioritize usability, accessibility, and provide clear guidance for subsequent steps based on the assessment outcomes.
Role: UX Researcher, UX Designer
Duration: 8 days
Team: Independent
Context
This project is a website redesign for BrainCheck website that provides online brain testing services and information about brain health, to deliver friendly services and make users feel comfortable using the site.
This project is a test project for Aimet Company. The experience is designed to be aligned with Aimet’s vision and goal.
Case Study VDO
Checkout the video, for my presentation of the website redesign case study.
You can click here to download the presentation slide
Problem Summary
Although the overall design of the former web design is quite engaging, but from my own observations and feedbacks from users, I discovered some problems such as:
-
Irregular UX writings
-
Some texts are long and difficult to read
-
Some images/designs, though pretty, cannot make connections with users
-
Contact methods are limited
-
Some game questions have unclear instructions/bugs.
Solution Summary
From the research and observations, I made some adjustments as follows:
From the research and observations, I made some adjustments as follows:
-
Make the UX writing more consistent.
-
Group the information, and make them compact + to the point.
-
Make website mascot where users can relate to.
-
Provide more contact options
-
Give clearer instructions and make some adjustments to the game/test.
1. Irregular UX writing
The overtone should be friendly and quite informal.
“ปุจฉา” is a fairly old and poetic word – to some, it could cause confusion.
I changed it to “เป็นใครแต่ใดมา”, a fairly simple word with some playfulness.
Some information that is too long—I grouped them, and chose only the information that users really need to know.
2. Long texts: #1 difficult to read
Texts are made more concise
Only the important info. to the users are kept.
*สถานการณ์ (Situation) might be an interesting content, but to users worried about dementia, they would rather know the condition or how to treat them.
Give the concise results and clear results what steps to do next instead of telling miscellaneous information.
2. Long texts: #2 Keep the necessary info.
I created ‘Brainy’ (น้องสมอง) as a website’s unique mascot. Its frequent appearance throughout the website, will create connection between users and the website.
3. Mascot: users can relate to.
4. Contact option: prompt consultation
The original has only email option, which is inconvenient when users want to consult with the staff immediately, or if they are not comfortable with email, especially the elderly.
Game/Test adjustment: #1 Spelling Variation
Besides bad user experience, unclear instructions and some bugs in game might lead to incorrect results.
Words borrowed from foreign languages, like some fruit names (apple, raspberry, etc.) tend to have spelling variations.
So, instead of names of fruit, I changed it to name the adjectives instead, since the answers could be more flexible but still tests language skills.
Design Thinking Process
I conducted this project using Design Thinking Process.
Research: Try the app
To empathize with users, I tried both desktop website and website app on my phone to see the overall experience that users have to go through, and form some assumptions.
-
Texts are too long
-
Some texts might be too small
-
Users want to call?
-
Some games’ instructions are confusing.
Research: Interview
I interviewed 6 users, who are either old people, or people with old relatives (some with dementia.)
The quotes on the right highlight some of the insights I found.
“The texts are pretty long in information. And some instructions aren’t clear”
“I cannot drag the line in ถนนสู่ดวงดาว game”
“I want to know the clear results if my old relatives have dementia and what steps to take.”
“Texts are small; can’t read with glasses.”
Persona and User Story
Based on my interview, I created 2 user personas and user stories for each of them. Thet are Mai (a person with potential ill relative) and Wan, a potential patient, to help me focus better who my users are going to be.
Mai: a person with dementia relative (her mum)
Wan: a person who might have dementia
User Journey Map
From both personas and user stories, I made Journey Map of Mai to understand her pain points in finding how to verify her Mum’s illness, and how I can improve her experience with the digital product.
Problem Statement
After Empathize Phase, I created a problem statement for my persona Mai, so I could see clearly what problem she needs fixed.
Ideation:
After I understand my users, and their problems, now it’s time I list out what adjustments I will make to improve their experience on desktop website/mobile phone.
Prototype: mobile first
In this project, I used the ‘mobile-first design’ concept. For from my research, it is easier to give aged people mobile phone to do the test, rather than having them sit in front of a computer to do it.
High-Fidelity Prototype (Hi-Fi)
The overall structure of the website is fairly well-organised, the changes could be done directly in the High-Fidelity.
Phone Prototype
Desktop Prototype
Design System
I made the Design System, so that both desktop website and mobile site would remain consistent.
The color scheme is adopted from the original website.
The navigation bar has been redesigned to incorporate new mascot: Brainy that is added into the website.
Character Design: Brainy
Brainy is a fun-loving and kind brain character that will accompany users throughout their journey on the site.
Brainy, my designed mascot character, is inspired by the Homepage main illustration.
Instead of the indifferent image, I want to add an interesting character that would enhance the positive experience and connection to the users.
Final Design
Home
Information
Contact
Test
Result
User Testing
After the design, I asked 2-3 users to test out my redesign, and received feedbacks as follows.
“Brainy (the mascot) is so cute. It feels enjoyable while in the website.”
“Having the option to telephone is much better than only with the email.”
“The instructions are clearer to understand.”
“The texts are easy to read. I could see the information I want faster.”
Results and takeaways
-
Trying the product before redesign is important.
-
Although we are not users, experiencing what the users might go through will help us empathize and understand the issues better
-
-
Design for two devices require adjustments
-
From mobile phone UI into desktop UI is not only increasing the text size, but it means trying to add more contents and new layouts, the the minimal UI design of phone to desktop UI with much bigger spaces.
-
Thank you
May you have a great day.
