Contact Me: 562.688.7509


Timeline: 10 days, 2, 5 day, sprints
– Interviewing
– User Persona
– Competitive and Comparative Analysis
– User Flow, Site Map
– Mood Board
– Wireframing
– Prototyping
Tools: Adobe Illustrator, InVision, Pen & Paper


Meet Jessica. She is a student who is working on a project and she can’t seem to wrap her head around creating a process flow diagram. When she came home at night after class, she found herself struggling to understand a diagramming concept necessary for her to complete her project and has started to look for help. She texts her classmate for help, but he is busy finishing up his own project. She tries to find some tips online through forums but they are too general and often vague. She posts her problem on a forum, but receives various answers that sharply contradict each other; there’s no telling the answers are credible. She reviews her teacher’s lecture slides and notes, but it does not clarify her problem. Her wall clock is ticking, reminding her that she getting closer to presenting this unfinished diagram to the class first thing tomorrow morning.

What keeps students up at night?

Jessica is not alone. While conducting surveys with 20 students, ranging 18–34 years old, we learned that other students are struggling to find help when teachers are not available. Anu and I began to explore this problem space in-depth. From the data we collected, we discovered that students preferred learning online because they can learn on their own pace and can receive personalized attention. Students, who took the survey, stated that they value feedback more from teachers and their peers than from outside experts and friends. Students, who had trouble learning online through learning software and websites, stated that the interface was not user-friendly, there was no one to immediately ask questions. There was one statement that we heard repeatedly through the one-on-one interviews and online surveys:

What’s the problem we are solving?

Students need immediate design help from experts when teachers are not available.


Market Research

Once I clearly understood the problem by listening to students speak about their learning experiences with teachers, peers, and online technologies, I then begun brainstorming possible solutions to this problem. I did a comparative feature analysis of various technologies to identify what types of features were available and what were missing in the most widely-used learning products today.


As I was creating this chart, I discovered that the majority of products were lacking a design tool that allows student and educators co-create and edit diagrams and visual interfaces. This could very well be the feature that differentiates this solution from other products.

How was information structured?

Once data was collected through surveys and conducted a contextual inquiry, we created our key persona, Sam. We used card sorting techniques and create affinity diagrams to learn how students organize information and navigate through education websites. I mapped out user flows and the initial site layout before moving on to building a low-fidelity prototype.

Design Thinking: Mobile First Design

My teammate and I designed a paper prototype to visual create an online classroom experience for students to get help on assignments and projects. We iterated our low-fidelity prototype three times before finalizing our prototype. Each of the iterations were tested with multiple students and educators.

How was user testing conducted?

In order improve the first prototype, I had a conducted usability testing with a few co-workers. I did A/B testing to determine whether it was more intuitive for users navigate through multiple courses or display default course on the interface.

Final Design

We received positive feedback from the students saying “navigation was easy-to-use and icons/labels were easily understood in the prototype.”

Tools Used:

Adobe Illustrator, Invision, Gliffy