Mindflow Website Design
MindFlow was my graduation project, with the entire UI carefully designed with mental health and user needs in mind.
Role
UX/UI Designer
Industry
Health & Fitness
Duration
5 months
Usability Audit
When conducting the usability audit for the "MindFlow" website, I first ensured that the site was accessible to all users, including those with visual impairments. I checked that all text had sufficient contrast with the background and that alternative text was provided for all images. I also ensured that users could navigate the site using only their keyboard, which is crucial for accessibility.
Next, I focused on the site navigation. I wanted to ensure that all navigation links were easily visible and clear to the users. The "Take a Mental Health Test" and other call-to-action buttons needed to be easily clickable and prominent. I also tested the "Back to Top" button to ensure it worked properly across different sections of the page.
Design Strategy
In developing the design strategy for "MindFlow," I focused on user-centered design. I conducted user research to understand the needs and preferences of the target audience, and I developed personas to represent different types of users and their journeys.
Visual hierarchy played a crucial role. I used contrasting colours, varying font sizes, and strategic placement to highlight key information and actions. This helped guide users' attention to the most important elements first. Consistency was key in maintaining a cohesive look and feel across the site. I ensured that the colour scheme, typography, and button styles were consistent throughout. I also used consistent iconography and imagery that aligned with the mental health theme.
Engagement was another important aspect. I incorporated interactive elements like the chatbot and mental health test to keep users engaged. Testimonials and success stories were included to build trust and encourage users to explore the site further.
Finally, I focused on an emotional design by choosing colours and images that evoked a sense of calm and positivity. I used friendly and supportive language to create a welcoming atmosphere.
Prototype Development
The prototype development process began with wireframing. I created low-fidelity wireframes to outline the basic structure and layout of each page, focusing on the placement of key elements like navigation, call-to-action buttons, and content sections. Next, I developed high-fidelity mockups using Figma. These mockups added detailed visual elements, colour schemes, and typography to represent the final design.
Interactive prototyping was the next step. I built an interactive prototype to simulate user interactions and navigation flow. Using tools like InVision, I created clickable prototypes that could be tested with users. User testing was crucial. I conducted usability testing sessions with a diverse group of users, gathering feedback on navigation, ease of use, visual appeal, and overall user experience. This feedback helped me identify pain points and areas for improvement.
Outcome
The outcome of the design process for the "MindFlow" website was highly positive. User engagement significantly improved due to the user-friendly and visually appealing design, leading to higher interaction rates with features like the mental health test and chatbot. Accessibility enhancements ensured that users with disabilities could navigate the site effectively, receiving positive feedback from those using assistive technologies. We were able to show our website to colour-blind people and got positive feedback.