What is BrainX Community
BrainX Community is the biggest online community with 3000+ community members across 24+ countries, where physician researchers and innovators come together to connect, learn and share scientific knowledge about applications of Machine Learning in healthcare.
Disclaimer: This is an ongoing project and only portion of the deliverables have been completed.
Project Details
Problem
With the current layout, the users aren’t able to access all the information on the website in the most efficient manner. It also lacks web accessibility and readability standards.
Solution
Re-design the website layout (UX) and UI, making it more user friendly while embedding the Web Content and Accessibility Guidelines (WCAG).
Overview
Duration: 2 months
Team: 2 Designers
My Role: Low-Fidelity Wireframes, High-Fidelity Mockups, Style Guide, Prototypes
Tools: Figma, Web Accessibility Contrast Checker, Material Palette Generator
Deliverables: High-Fidelity Prototypes of Homepage and Individual Pages
Approach
Steps taken in my design process
Research relevant or similar websites
Designing new Style Guide (Colours, Typography, Fonts, Grids)
Research
We researched and studied websites that were relevant or similar to the medical background and we came to below were our main findings.
There was a Hero Section on all the websites that helped the user understand what the website is all about and what they can expect. It is the first thing users see when arriving on a website.
Being in the medical field, most of the website followed Web Content and Accessibility Guidelines which was lacking in BrainX’s current website.
Content hierarchy was applied so that the most important information receives the most emphasis.
Wireframes (Homepage)
We started creating wireframes for the homepage to define the layout. We presented Option 1 to the stakeholders and post their feedback about the homepage being a bit lengthy, we made the iterations. We changed the layout to the Final Iterated Wireframe shown below in which we combined few sections and removed few to make the layout more clean and short.
Initial Wireframe
Final Iterated Wireframe
Style Guide
Once the wireframes were finalized, we created the style guide to use for designing the high-fidelity mockups. While creating the colour palette, we kept the Web Content And Accessibility Guidelines in mind and made sure that the colours and the fonts meet minimum AA Level. We also defined the spacers and grid layouts used in designing to maintain consistencies during development process.
High-Fidelity Mockup (Homepage)
Hero Section
Before and After
The new Homepage design made the scroll length shorter and presented the information in a clean manner. Each section was laid out in a structured manner keeping the content hierarchy in mind. The info-graphics are now presented in a more easy to read form than just being the plain text.
Before
After
Key Takeaways
While doing the homepage, I learned how important two things are - content hierarchy and following Web Accessibility guidelines. I also understood how the hero section can help translate what the website is to its users. As this is an ongoing project, I am sure there will be more learnings as we re-designing the rest of the website. The project page will be updated as soon as the project gets completed.