My Role:
UX Research | Wire framing | UI Design | Presentation Design | Visual Design | Usability
Testing Tools:
Figma | Adobe Illustrator | MS PowerPoint
Deliverables:
Research Documentation & Analysis | Low Fidelity Wire-frames |
High Fidelity Prototype
Project Partner: Akhil
Project Brief
The Brighter Kids Foundation (BKF) is a family-focused health organization that provides kids and the people who care about them with the knowledge and resources they need to live healthy lives. The organization's website needs to be updated because it is out of date and does not offer the optimal user experience if it is to have a greater impact.
The goal of this redesign project is to increase user flow, create a more user-friendly information architecture, establish visual coherence, and ultimately make it simpler for users to accomplish their objectives on the website.
Overview
Redesigning a website for a nonprofit organization was the aim of this three-week assignment. We wanted to take this chance to give back, so Akhil and I, on a small design team, decided to work with the Brighter Kids Foundation (BKF)
Primary research
Sarted with retrieving demographic information and statistics for New York City, New York. Just 41% of people in New York City, New York. According to the most current census report (2019), speak English as their first language. The majority of people (57.6%) don't speak English at home. So, we need to provide multilingual support in order to increase the number of users that may visit this site.
Heuristic evaluation
The color palette is too complex and does not pass the color tests completely, there are visual discrepancies with photographs and elements throughout the website, and basic gestalt principles are not followed, according to our thorough Heuristic review and UI annotations.
Problem & Solution
Many of the health programs offered by BKF are quite challenging to use and access.
Enhancing UX flow with an emphasis on navigation and information architecture is our proposed approach.
Enhancing UX flow with an emphasis on navigation and information architecture is our proposed approach.
Identifying user needs
In addition to usability testing of the BKF website we interviewed parents and caregivers to understand their needs and frustrations in general, unrelated to the BKF. During this process we were able to draw patterns about the main painpoints which were mainly focused on the overwhelming amount of information, lack of time and financial insecurity.
User Persona
Based on interview observations, organization's data and preliminary research that included Santa Clara Country Census report we created our user persona that we use as a reference point in the future project development.
Information architecture
Feature prioritization. By the end of our interview analysis, we were able to cluster the responses in categories. At the same time, we conducted an I like / I wish / What if activity among 8 participants. All this allowed us to define the main features that we'd like to incorporate in the new design.
Sitemap
The structure of the future website and an updated sitemap are based
on the card sorting results.
Prototype
After sketching a paper prototype, we made 2 versions of Lo-Fi digital prototype and performed A/B testing. Users feedback and recommendations together with our observations were integrated into the Hi-Fi prototype.
Design system
In parallel with defining, ideating and prototyping phases we were building project style tile. Our goal was to create a color palette that is associated with kids and provokes positive emotions. We wanted the new page to look gender neutral, soft, friendly and modern and at the same time avoid standard medical colors such as blue or green. So, we ended up with a pastel palette with bright accents.
To maintain the soft look all the UI elements, such as buttons, have rounded corners and smooth lines. For the same reason we used font family "Cabin" as it has elegant rounded letters and has high readability.
To maintain the soft look all the UI elements, such as buttons, have rounded corners and smooth lines. For the same reason we used font family "Cabin" as it has elegant rounded letters and has high readability.
No visual impairment
Creating a new logo presented another obstacle throughout the graphic overhaul. It wasn't initially anticipated. Yet, during our initial round of interviews, participants said that they liked the current logo's concept, which prompted us to pay it more consideration. Those who participated in the interviews particularly loved the logo's use of many colors and the atmosphere it portrays, so we were certain to maintain that element. But, I discovered a few problems with the current logo that prompted me to rebuild it. It is quite difficult and scarcely responsive, to start. When something is little, it is difficult to tell three people apart and see details. The second variation is horizontal positioning with side text.
So, taken all that into account I created a new BKF logo. It's recognizable, more balanced, simple and responsive and can be used in many layouts.
Before (on the left) and after (on the right) versions
Desktop homescreen
We brought organization's value proposition to the homepage to avoid confusion about BKF specific. It's followed by the list of three most popular health programs and then by secondary information. Donate button grabs attention right away. And we incorporated language menu, so that user can immediately change language. We used 12 column grid to make the new BKF website responsive and optimized for laptop, tablet and mobile.
Mobile flow
Future steps
- We were able to submit a redesign plan by the project's end, with the intention of presenting it to the management at the Brighter Kids Foundation in accordance with our communication. We were able to substantiate our assertions and firmly cling onto research as we moved through the redesign process.
- These are some creative directions we hope to pursue in the future with our website design.
- An opportunity to register for access to the child's files and the online health portal, which will contain information on appointments, reports, etc.
- Live video chat with a doctor that includes subtitles in multiple languages in real time.
- Also, we produced products.
We have also created merchandise prototypes with new logo that can help generate extra funding opportunities for the non-profit organization.
