Heather R. Bennett

Client:

• an Edtech startup whose mission is to prove that, by making it available and accessible, every child can learn to code

Team:

• 2 Project Managers

• 3 Content Strategists

• 2 UX Designers

• 7 Software Developers

My Role:

• UX Designer

Timeline:

• 48-hours (Hackathon)

Methods & Skills:

• Information Architecture

• Sketching

• Wireframing

• Visual Design

• Prototyping

Tools:

• Draw.io

• InVision

• Pen, Paper, & Post-Its

• Sketch

Deliverables:

• User Flows

• Wireframes

• Prototypes

Overview:

ManGo Think! is a desktop educational gaming platform I designed that engages learners with fun and wacky, yet large and abstract, kid-centric questions as a way of teaching computational thinking skills.

Challenge:

Project managers described a trend they noticed while teaching their programming classes to kids: a majority of their students struggled with the logic and problem solving skills needed to successfully develop code. To better prepare their students for success, I was tasked with creating a free, web-based tool that enables students and teachers to learn to “think like a programmer”.

Process:

The project managers drew from their experience teaching coding to kids to provide the quantitative and qualitative data needed to identify their target user. I used this data to inform the creation of a persona to help keep our users in mind throughout the rest of the design process.

A gaming platform seemed like the best way to get our users interested, engaged, and excited. Because the game was intended for educational purposes, we decided to design it specifically for classroom use. This decision meant that there would be two components to the tool: a teacher site and a student site. On account of this, we really had to consider when the sites would function similarly and differently, and design for those interactions in the user flow.

Now that we had formalized the structure of the game, I began iterating ideas by hand drawing low-fidelity sketches. Once we had decided on a design and layout, I created medium-fidelity wireframes focused on functionality. Finally, I added subject matter text, applied a visual design emphasizing the ManGo Code color palette, and incorporated some delighter elements to create the high-fidelity version of ManGo Think!

Outcome:

The project managers were thrilled with the results and brought the designs to their development team. 

Development of ManGo Think! will be completed shortly. The platform will be designed for desktops, laptops, Chromebooks, and tablets. ManGo Think! will be free to use and is slated for public release in time for the next school year. 

Lesson:

The Mighty MVP!

This project reinforced the value of feature prioritization, establishing an MVP, and long-term planning. Given the tight deadline, it was crucial that we maximized the time we had and worked as a team to deliver the most VIABLE and VALUABLE product possible.

Our laser-focus on the MVP meant that we could devote our energy to fully designing and developing the essential features. It also meant that some difficult decisions needed to be made and some really sweet features didn’t make the cut... for this version.