BeepBoop
Case Study
Purpose:
As a language learning platform, BeepBoop relies heavily on the teacher to student interaction. Beepboop is in the process of creating their MVP web/mobile platform for their students and instructors, easing the teaching process and consolidating all of BeepBoop’s user data.
Timeline:
10 weeks
Team:
Salvatore Lupo - Designer
William Perez - Designer
Melissa Valencia - Designer
Devon Saliga - Company CEO
Tags:
The Challenge
BeepBoop’s user interface relied on the Calendly and Zoom applications for the majority of the user flow. The design team was tasked with creating a mobile application for addressing the BeepBoop intructors user flows from selecting courses to leading in a lesson.
The Product
Established in 2019, BeepBoop aims to help users practice their Spanish pronunciacion through a series of increasingly challenging memory retention and pronunciation exercises. The proudct is influenced from pedagogical work pioneered at Dartmouth College
Talking to the Instructors
Kicking off our research stage, the design team conducted 5 user interviews with drill instructors and the CEO. We synthesized our findings into key pain points for our users. Additionaly, the team created mindmaps targeting core instructors emotions. The team devloped a how might we question to guide the rest of the design process, highlighting the focus on establishing key functionality.
Pain Points
Handwriting personalized notes for post-drill feedback.
Identifying VIP members & distributing correction time accordingly
Scheduling drill instructing lessons an selecting course topics
Providing personalized post-drill feedback to each student
Mind Map
HMW create a simple user flow to solidify our main features while also encouraging engagement?
Ideation - Crazy 8s
The each member of the design team sketched eight screens in eight minutes, depicting the main features:
As a team we used the dot voting method to identify the screens that we wanted to prototype keeping in mind the points for virality for the proudct
Ideation - Crazy 8s
In an attempt to deviate from industry standard navigation bar, the team decided to play with rounded corners and centered on the live streaming aspect. We began with overlays as a way to decrease clicks need to reach other pages; however, after broader discussions we decided to set these pages as part of the navigation bar.
Ideation - Crazy 8s
Quick user testing on the greyscales confirmed the direction in whcih the team moved forward for the high fidelity screens. As a team we divided the design work evenly, ensuring that we had the opportunity to collobarate on screens and ask for feedback throughout the process. After multiple scrapped screens we moved forward with testing versions of the the home, profile, and review screens:
User testing showed that the core funcitoinality of the app served its purposel; however gave multiple insights into new directions and features that could be added later down the road.
“Everything from scheduling, prep, teaching, and feedback is taken care of”
- Drill Instructor
Brand Identity
Being in such early stages of the start up, there was so much flexibility to take the company in any given direction. However, the design team focused on the user research and expereince portion of the sprint before entering in conversations about the brand and the interface components. The marketing team developed a brandbook that was then used to create the styling library for the sprint.
Future Features
Reflecting
Iterating on design is a necessary part of the process. Leaving this design sprint with BeepBoop, I am congizant that not every idea will be best for the user. The answers lie with the iusers. From user test, we quickly stear our unconventional navigation towards a traditional navigation bar. The user research aspect of the project created clear paths for the user interface. The visual designs in regards to color could be improved, but that is a direct result of poor communication between the marketing and design team. Nonetheless user advocacy is our primary focus as designers
Check out the fully functional Figma protype!
william pérez
