Inspiring youth to be creators of technology. [QPi's first iteration]


CurricuPi (QPi for short), is a startup based in the Bay Area.  They provide lessons and customizable kits.  QPi integrates low-cost and easy-to-learn hardware such as the Raspberry Pi with software applications to break down complex subjects into simple pieces. They want to encourage creativity in middle and high school students through project-based learning. CurricuPi aims to tackle the gap in STEM education around computer science and prepare youth for the changing workforce.

Note: This is the first iteration of QPi Education.


CurricuPi has a generally functioning site.  Due to the plethora of information, especially in the individual Module pages, the instructions may be hard to follow.  QPi is looking for is an improvement on usability for teachers and students who use the site.


Redesign the current website for a visual refresh

Make the site responsive for tablet and mobile

Improve the website’s information architecture and overall usability


I performed market research to look at sites that provide similar service and the features the site has. was the site that stood out to me the most.  Other educational site I used to reference include Khan Academy and DesignLab.

Screen Shot 2017-11-04 at 9.41.03 PM.png
Features Analysis


I interviewed 6 participants on their thoughts regarding education sites and performed a contexual inquiry using the current CurricuPi site.  The entire script can be seen here. Four are teachers in the STEM field but do not have any coding background.  Two are engineers with coding background and volunteered to teach coding at camps.  Out of the 6 participants, only one has used Curricupi’s website.  Most of the participants are in their 20s with one in their 30s and one in their 40s.  All the teachers use technology in their classroom to some extent.

Participants generally thought the home page is overwhelming and has too much information.  They found it challenging to figure out right away what CurricuPi offered.  When looking at the modules, they all thought the images were helpful but suggested adding videos.  The modules might be intimidating for those who have not coded.  Participants thought it’d be useful to have a teacher and student version.  For teachers, it’s important to know what questions could arise for their students.  Another suggestions was differentiating between levels as some students might be already well versed in coding.  Participants also thought more explanations of terms and why they’re coding would be helpful for both teachers and students.

After speaking with the stakeholders, we established that the site will be used by two main sets of users.  The first set and the primary users are middle and high school students who will use the lessons to mainly follow along and self teach.  The second set are instructors with engineering backgrounds who will use the site as a guide for teaching the students.  Due to the legality around interviewing children under 18, I created provisional personas for a variety of students with different motivations.  The teacher persona is based off of the user interview.

Volunteer with Engineering Background Persona
Personal 1 - teacher
Provisional Student Personas
Persona 2 - students


The hierarchy of the pages on this site is pretty straightforward as there currently aren't many pages to categorize.  I reorganized some of the current hierarchy (e.g. Set Up Guide was in Lessons and is now moved to Resources) to make the site easier to navigate.

User Flow
User Flow
Site Map
Site Map


Robot Car (Lesson) Page
Robot Car Page
Module Page
Module Page
Robot Car Page
Robot Car Page
Module 1 Page
Module Page


Since there are two distinctive user groups, the teacher and the student, I created two scenarios to test.  Five participants who are currently engineers were given the teacher scenario and four DesignLab students were given the student scenario.  Due to the complications involved in using participants under 18, DesignLab students were recruited as proxy students.

The tasks for both were similar, the teacher group where given a scenario a scenario in which they imagined they volunteered to teach at a coding camp while the student group imagined they would like to learn code and signed up for a STEM summer camp.

The participants were able to complete most tasks.  The complete findings can be seen here.


Desktop screens after improvements based on Usability Testing.
Robot Car (Lesson)
Robot Car (Lesson)
Module 1
Module Page
Set Up (View as one page)
Set Up Page
What We Offer Page
What We Offer
Who We Are
Who We Are


Robot Car_Responsive_All_v2.png



Click on the image to play around with the prototype on Heroku


This project taught me a lot regarding finding the intersect between user needs and business needs.  From the start, I was in constant communications with the stakeholders to make sure we are in the same page.  It took multiple conversations to understand who their main users are and to define the primary goal of this iteration of redesign.  What we aimed to do was to break down the information into organized parts.  I used background shapes and colors to group modules and lessons so they're clear and easy to navigate.  This was successful as all the testers were able to find the information easily.

In the future, I would like to test using actual students instead of proxy students as various age groups may respond to information differently.  Many participants also provided feedback on separating a teacher and student version.  The business side currently want the lessons to be geared towards everyone, which was the most challenging part of the design.  In the next design phases, I would like to add a feature for teacher guides.

Other projects: