MVP Development
6 Usability Tests
|
1 UX Audit
|
3 months
|
6 Usability Tests | 1 UX Audit | 3 months |
About
Light Blue Learning is a company that offers classroom management resources to K12 teachers for trauma-informed strategies on multiple platforms
Challenge
With branding already established and a grand vision of the future product, I worked to simplify the user flow and focus the vision of the MVP. Design an easy-to-use MVP for mobile use in the classroom that provides strategies based on specific behaviors.
My Role
UX researcher and information architect
Tools
Figma / OptimalWorkshop / Adobe
Timeline
12-week sprint | May 2021 - July 2021
Because I came to the team in the middle of the project, I was tasked with creating wireframes for the app first thing. I completed these mid-fidelity wireframes in Figma using sketches that were shared to solidify the main user flow.
Nonlinear Design
Discovery
While preliminary research had been conducted, I conducted a more in-depth analysis to gain a comprehensive understanding of the company, its competitors, and the needs of its users. It became evident that users were seeking a streamlined system for managing student behaviors, along with heightened support from parents and school administrators. Subsequently, I organized my research findings into a slide deck and delivered a presentation to the CEO.
5 Areas of Focus for Design
Ensure teachers quick access to the behavior strategies
Creating a short task flow from entry to goal completion keeps teachers from being overwhelmed and distracted by unnecessary content.
2. Help teachers find the information they need easily
The MVP's value proposition centered around teachers easily discovering effective strategies. However, the primary call-to-action on the existing website didn't directly guide users to this value. The mobile app was strategically designed to ensure users could promptly access strategies for specific behaviors. In guiding the team, I urged them to consider a scenario where a teacher might not have a specific behavior in mind but still required strategies, emphasizing the need for a seamless solution.
3. Provide immediate value to the teacher
The team encountered challenges in distinguishing between strategies and behaviors within the site map and user task flow. After clarifying this distinction, I crafted a straightforward sitemap by aligning stakeholder preferences with insights from my competitive analysis. To address the confusion surrounding behaviors and strategies, I developed a user journey map. This visualization was designed to aid the team in understanding how users navigate the dashboard while searching for saved strategies.
Recognizing the importance of simplicity for teachers, our analysis of data from OptimalWorkshop confirmed that neatly categorizing various behavior types posed challenges and led to confusion among teachers. In response to these findings, the team opted to abandon the idea of behavior categorization. Instead, we streamlined the approach by implementing a user-friendly drop-down menu featuring the most common behavior problems. This decision was subsequently validated through usability testing, affirming its effectiveness in simplifying the user experience for teachers.
4. Design an app that is accessible to all teachers
The founder expressed her intention to utilize the company's established colors to signify various domain types within the product. In our discussion, I raised concerns about the accessibility implications of this decision, referencing the Web Content Accessibility Guidelines (WCAG):
Success Criterion 1.4.1 Use of Color (Level A): Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
We ended up changing one of the blues to something that was #colorblindsafe, and she agreed to use symbols, text, and color to distinguish the different strategy domains.
In addition, all but one of the colors failed the contrast ratio on a white background.
Success Criterion 1.4.3 Contrast (Minimum) (Level AA): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Keeping these constraints in mind, I used the colors sparingly as I designed. To ensure the users could see the information clearly, I used near black for the text elements and the primary brand color for accents only.
5. Deliver an experience that is enjoyable
I conducted six usability tests, comprising one in-person, two remote, and three unmoderated sessions. Overall, participants confirmed that the primary user flow was functioning as expected, and they expressed satisfaction with the clean user interface (UI). However, feedback revealed a need for several small adjustments to enhance clarity. Participants reported challenges in understanding certain icons and expressed a desire for more information about the referenced domains, prompting the identification of areas for improvement in the design.
Handoff & Development
The developer asked me to send him my Figma files and share the Google spreadsheets that were created to organize the images and icons. The final prototype was shared with the team and the MVP is currently in development.
Key Takeaways
Less is more
Using feedback from testing I ended up removing unnecessary icons, simplifying the onboarding screens, and utilizing affordance in the card design. I also learned that just because I can design it, doesn’t mean developers have the time or resources to make it happen. I designed a card that flipped and scrolled but it was scrapped in development.
Work as a team
I gained valuable experience collaborating with stakeholders and a developer to define and refine the information architecture, which became a central focus of my role. Additionally, I learned the importance of maintaining organized and clearly labeled Figma files throughout the design process, as this ensures a smoother handoff to developers and minimizes the need for last-minute adjustments.
Assume nothing
As a researcher, I learned to take nothing as certain without proof. Assumptions, even as simple as users understanding an icon, were challenged. Aspects of the app that seem obvious to stakeholders needed extra clarification for users.