UX Design: Brainiac

The Project

In today’s fast-paced world, parents crave real-time insights into their child’s education. Brainiac is more than a tool; it’s going to be a parent’s new essential. Imagine being actively involved in every step of your child’s learning journey. With Brainiac, you can track progress, view schedules, access valuable resources, and partner closely with teachers. Let's empower parents to be active participants in their child's success.

Role

Lead UI/UX designer doing  the following tasks

  • Ideation and User Research

  • Sketching and Wireframing

  • Prototyping with Figma

  • Usability Testing

Duration

June 2024

A corkboard with family photos and notes pinned to it, including notes about Rose, a retiree in Plymouth, and Vanessa, a single mother with three teenagers. There is also a note about Mark, a 48-year-old IT professional from Dunedin, highlighting family and work priorities.

Personas

USER RESEARCH

Painpoints

Responsiveness
The school website's communication systems are unresponsive and only properly viewable on a desktop. This poses a problem since most users use mobile devices like tablets and phones.

Unorganized Content
Users want a single place to view all of the student's activities at school.

Notifications and reminders
Sometimes, the website fail to remind us about school activities. It would be nice to have Google Calendar integration.

Communication with school
One-stop contact page for open communication lines with the school.

Hand-drawn website wireframes outlining multiple web page layouts with sketchy lines and text labels.

Wireframing

Draft of a website design with wireframes drawn on white paper, placed on a white surface, accompanied by a blue pencil.

Paper Wireframe

A grayscale wireframe layout of an educational website with multiple sections, including home, profile, calendar, student profile, learning hub, school toolkit, contacts, and events.

Lo-Fi Wireframe

Flowchart diagram illustrating a website's navigation structure starting with Homepage, then Sign-up/Login, branching to Student, Parent/Carer, and Teacher sections, each with their respective submenus and options such as Profile, Learning Hub, Calendar & Events, School Toolkit, and Connect with Us, with detailed sub-sections.

User Flow

Design style guide featuring logo options, color palette, typography, icons, and buttons. Logo options include a stylized head with brains. Color palette includes dark purple, Penn blue, Payne's grey, Ukrainian blue, Azure, Brainiac gradient, Tiffany blue, and vivid sky blue. Font is Roboto in various weights. Icons depict a house, person, a lamp, calendar, mail, and magnifying glass. Button styles include elevated, filled, tonal, and outline.

Design System

USABILITY STUDY

Research

While I do have personal experience as a parent, I acknowledge that this may impact my initial expectations for a Learning Management System. To address this potential bias, I conducted a comprehensive research study using both qualitative and quantitative methods to examine how caregivers and parents engage with a school app for tracking student activities and accessing school information. This research also explored the features that participants found most valuable.

USABILITY STUDY : FINDINGS

Round 1

  • A tutorial on the homepage was added to help with accessibility.

  • Moved the navigation in the left side from the top part for easier access.

Round 2

  • Confirmation Checkout

  • Add an option to add ticket to e-wallet

  • Opt-out or proceed to checkout while on add-on page.

Screenshots of a mobile app for cinema ticket booking, including sign-up, movie selection, seat selection, add-ons, checkout, and ticket confirmation.

USER RESEARCH

Accessibility considerations

Color gradient outline of a palette and paint swatches on a black background.

Color Contrast
Ensure all text has a high contrast ratio with the background (at least 4.5:1 for small text, 3:1 for large text) to be readable for users with visual impairments

Neon outline of a hand pressing a touchscreen, with Wi-Fi signal lines above the finger

Gestures
Keep gestures simple (tap, swipe) and offer alternative ways to perform actions for users who have difficulty with specific gestures

Icon of a speaker with a plus sign, indicating increasing volume or sound.

Audio
Optional haptics and sound-on-button interactions

Outline of a data server connected to three storage drives in gradient purple and blue colors.

Logical Structure
Maintain a consistent and logical layout for the app's interface

TAKEAWAY

Impact

The impact of an app that's easy to use with a smooth checkout process can be significant for both users and the business. Here's a breakdown of the positive effects:

For Users:

  • Increased Satisfaction: An easy-to-use app reduces frustration and confusion, leading to a more enjoyable experience.

  • Improved Efficiency: A smooth checkout process allows users to complete tasks quickly and easily, saving them time and effort.

  • Higher Engagement: A positive user experience encourages users to spend more time in the app and come back for repeat use.

  • Greater Trust: A well-designed app fosters trust with users because it demonstrates a focus on their needs and ease of use.

My learnings

Incorporating usability testing throughout the design process is an essential strategy for creating a user-centred product. Testing with real users after each design iteration can continuously identify and address any pain points that arise. This iterative approach enables me to refine the design at each stage, ensuring a smooth and intuitive experience for the final product. This not only eliminates frustrating obstacles for users but also fosters a sense of satisfaction and loyalty by demonstrating that their needs are being prioritized.