Branding, UX/Product Design, Art Direction
Breakout EDU is an education technology startup that boasts over 2 million active users across the United States. Breakout’s client base consists of teachers and school districts that incorporate Breakout’s educational escape games into their curriculum. Breakout covers all grade levels k-12.
I was hired by Adam Bellow (Breakout’s CEO) in an effort to bring Breakout’s branding and user experience into the modern age.
Here is Breakout's original branding and visual design:
There were a lot of issues here at the start. For one, the design was outdated and “clinical”, but more importantly than that, the user experience was extremely convoluted and confusing. There were duplicate header links; there were dozens of buttons that all looked identical; there was no clear hierarchy of information; creating and managing classes was practically a nightmare for teachers. The user experience was a major pain point for Breakout and one of the primary reasons why Adam brought me onboard.
Getting Started / Branding
It was immediately clear to both Adam and I that before digging into the UX, I would need to bring Breakout’s visual identity to life. After a few rounds of revisions with the rest of the team, the new look was introduced.
We felt that this provided a solution to the team's marketing dillema of wanting to appear professional in front of school administrators, but feel playful enough that elementary aged children would engage.
The next step in the project was to collaborate with the development team to roll out color changes across the old site in order to cement the company’s new look and feel. We treated this a cycle between branding changes and ux changes. Here are the results of the re-skinning the old website with the new look.
The Next Phase: Redesigning Key User Flows
The First issue on my list to tackle was the amount of redundancy throughout the site. Some features had atleast three separate links that would direct to them, which made the site convoluted and confused a lot of users. I was able to solve this problem by switching away from a traditional site structure and introducing a side rail instead of a header.
Next: Three Core Features
As I mentioned before, the old user experience was not ideal. Take a look at this example:
This is the class management screen which is a major feature. You’ll see that it is confusing and the hierarchy of class management is unclear. In order to solve this, I proposed having three major views in the new UI, one for classes, one for game creation, and one for the platform dashboard. Here is the finished class view, including the branching options:
You’ll noticed that by working closely with the dev team, I was able to incorporate certain data points to track student progress. This was a big value-add for the company. Here are some other views, including the new homepage and game creation screens.
