Responsive Design | BümoBrain
BümoBrain launched as a result of the pandemic pivoting from what initially was supposed to be a co-working & daycare space to an online school. Its quick pivot resulted in a website and business that was built in 11 days. While BümoBrain garnered a lot of initial interest, the quick build resulted in a lack of responsiveness and context around the available programs. Data also showed a high bounce rate and lack of user engagement.
My Role
UX Designer
Team
UI Designer
Developer
Skills/Tools
User Research, Competitive Analysis, Wireframes, UI Design, Figma
Timeline
4 weeks
How might we optimize the user experience and responsiveness to decrease the bounce rate and increase user engagement?
Solution
Challenge
Based on research uncovered, this helped expose the areas for improvements, specifically around information users are looking for in order to make the decision to purchase.
*Update: Live website has undergone changes since the original redesign process
01.
Discovery and Research
Site Audit
At first glance, the BümoBrain website was visually stunning with its bright and fun colors. However, as I started to go through the website, I noticed several areas that needed improvement:
mobile responsiveness (through further research in Google Analytics, I found that this was especially important because 60% of its users came through the mobile site)
minimal and unclear information about the product and service offerings
lack of consistency in the visual hierarchy
in-active areas easily mistaken to be clickable because of the animation
Competitive Analysis
To understand the competitive landscape, I reviewed BümoBrain’s competitors to identify what they were doing well and what wasn’t. A few important highlights that would be necessary to include are:
clear information on what is offered by the classes provided
direct CTAs
Interviews
While the site audit and competitive analysis offered a great overview of what could be improved through the re-design. I wanted to know who the users were and how they would interact with the site. In interviewing with 4 parents with children ages 1-4, I was able to validate that the products BümoBrain offered were relevant however common questions and feedback included:
What are the age groups for each program?
How much are the programs and what is included?
How does this differ from other schools and programs/why should I buy this?
There’s so much information, but it still doesn’t give any context into the programs. It’s overwhelming.
02.
Define
Personas & Empathy Map
Olivia and Vivian were two personas that were created based on research to put into perspective who the users were. This helped highlight the questions of who they were, what they were looking for, and how and why they make their decisions when it came to their children’s education.
03.
Ideate
Because the site hierarchy was very straightforward, no changes were made, but the user flow was designed to show how each user would go through the purchase funnel once they’ve considered and converted.
User Flow
04.
Design
Mid-Fidelity Wireframes
I started with the mid-fidelity wireframes, working in the user research that was established earlier on in the process. Because 60% of BümoBrain’s users were coming in from mobile, it was super important to showcase the wireframes for mobile.
Screens below were the first iteration of the responsive design, and through feedback from stakeholders, the high-fidelity wireframes will showcase what information was added and taken out for the final solution.
UI Kit
BümoBrain already had an established branding, however, because their initial designs were built off of Canva, there wasn’t a UI Kit available, making the original site less consistent in its styles. The UI kit was created to provide consistency in the design.
High-Fidelity Wireframes
I worked with the UI designer in creating the final design. She worked on desktop while I worked on the mobile UI. Final iterations of a few of the key pages that need the most work highlighted below.
05.
Impact and Reflection
How did we measure success and impact?
After the launch of the newly designed website, BümoBrain saw an 8% decrease in bounce rate and an increase of 35% in average duration per session
What this means is that users were staying on the pages for longer and going down the funnel to conversion
While we did see the impact as a result of the new website, through the design process, I wish I would have been able to collaborate with the developer more often and more frequently. Because the developer was not in-house, communication was limited due to budgeting constraints from the company. If in the future, there is an in-house developer, I would bring the developer into the process sooner to talk through the designs.