A Desktop Web App

Created during AngelHack 2014 and developed and prototyped within 24 hours, I worked in a team of six composed of frontend and backend developers.

Ever tried picking up some coding skills through Codecademy or Treehouse and noticed how you’ll drop a lesson here or there or eventually all together? Well, Code++ is a place to learn with friends. We link you to your friends and community and encourage you to stick it out till the end. You’ll have someone to learn beside you, mentor you, or cheer you on! Never learn alone again with Code++.

Objective: Encourage our user to finish coding lessons with a community.

My Role: UX/UI Designer: user flow, wireframes, and visual design.

Discovery

PERSONAS

Although there was no time to do user research, I created two personas of possible users we would want to target. Both had different goals and background but shared an interest in learning coding. This at the least allowed me to have a start point and direction.

Personal A Summary (Focused Learner)

  • Works full time but is still starting out in the work force.
  • Considering learning coding to switch careers.
  • Has leisure time to learn after work.

Personal B Summary (Casual Learner):

  • Works full time but also supporting a family.
  • Learning code casually as a hobby.
  • Has limited leisure time.

Explore

Features Chart

Working with my team members of developers, we collaborated on a features chart and created a MVP. This allowed the backend coders to start building databases while I continued to work on UX/UI.

Essentials include:

  • Adding Goals (ie. I want to learn html at codecademy.com)
  • Adding Lessons (ie. I want to learn how to code tables in html)
  • Adding Daily Accomplishments (ie. I just learned how to create padding around the tables!)

Taskflow

With my features chart, I continued to work out main task flows. Not all pages of the navigation were possible to build out in our limited time, but I focused on tasks of primary goals.

Wireframe Sketches

Wireframes

LOWFI/ROUGH DRAFT

Shown to the right is the Dashboard. On this first round, a current list of active goals is in a module at the top. It’s the main priority for the user. The secondary focus is on the Daily Achivements module where users can record daily goals, get a sense of personal growth, and get feedback from the community.

Users can access other goals, create goals and lessons, and add friends to learn along by interacting with the first module.

FINAL WIREFRAME/UI

Dashboard

  • The primary module is still at the top and features Current Goals. However, a plus sign is added as a better visual cue to continuing adding goals.
  • Daily Achievements is listed below. Users can add what they have acommplished and also ask for feedback from the community. Private messages can be sent to respond to any questions.

Goals

  • Lesson Plans are accessed when clicking on any Current Goal. Here you can gain points for completing lessons on time, and follow along with your friends. Your specific goals are also shown here.



Conclusion

FINAL THOUGHTS

  • Priorities: Communty/Peers is important for accountability, create an easy and accessible experience for all people, and gamification is secondary for return and gratification.
  • Working with the same people for 24 hours can feel like weeks.
  • I learned to iterate and toss out bad ideas/designs fast.
  • MVP!
  • Still learning how to speak developer talk.
  • People are actually really nice and want to succeed with you.

Top
ALL CONTENT © 2017 SUZAN CHOY