HANA – One Challenge, Every Day

Origins of HANA

Towards the end of my time at UC San Diego I had the privilege of taking an HCI design studio course led by design visionaries Professor Scott Klemmer and Design Lab Director Don Norman.

I worked with a diverse group of UC San Diego students (Max Kuang, Isabelle Pinard, Beumjoo Kim, and PhD student adviser Robert Gougelet) to apply UX design principles. Over 10 weeks, we dove into the design process, from need-finding and paper prototyping to deploying the application with Heroku and performing A/B testing at scale. HANA was developed over the course of 10 weeks over which we applied iterative development and feedback cycles. We meet weekly with our PhD advisor Robert Gougelet and at the end of the course, presented our work and findings to the class.

HANA is a web application built on top of Meteor.js and the Telescope App. This allowed us to create a dynamic community page with a Reddit-like voting system to allow users to encourage other users as they completed challenges. Other features include Facebook OAuth, real-time posting and updating using Meteor.js, nested comment chains, and real-time notifications for comments and other account activity.

Currently, I am developing a chat-bot version of HANA that can be interfaced through Facebook Messenger. The machine learning component is based on API.ai and I will eventually include a link here 🙂 !

Design Inspiration

Our design studio was focused on the theme of improving users’ sense of “mindfulness.” As students, my teammates and I knew firsthand how busy life could get, and how difficult it could be to find time to reflect on self-improvement. Taking this into consideration, we wanted to create a simple, lightweight tool which empowers people to adopt a singe life-improving habit every day.

The name HANA is derived from the Korean word for “one,” in reference to our original design motive to keep the user experience simple. We wanted HANA to be a friend that challenges users and links them to a supportive community that is also seeking to create life-long habits.

Key Design Lessons Learned:

  • When in doubt, trust the numbers! A/B testing was an invaluable tool for validating whether our design hunches were accurate. We were often surprised by the results!
  • Humility is key when testing with users. Never assume that your product speaks for itself and that incorrect usage is “user error”! The customer is always right.
  • Test with users that are knowledgeable in UX design. This is extremely helpful as they are able to clearly articulate and describe the pain points they are experiencing.
  • Test with users that are not knowledgeable in UX design as the true litmus test. Observing them bouncing against the walls, getting stuck, and making mistakes are helpful pointers to subtle design flaws.
  • Use Git. No really, use it! Working in a group of four and having all of us constantly making changes required us to be diligent in our version control.
  • Don’t be afraid to revisit the paper prototype. We caught ourselves being hesitant to make important UX changes once HANA was propped up and held together with code. It took courage to go back to pen and paper and use analog forms to iterate and validate that indeed, we do need to make changes!

The Design Process:

Design process.png

HANA: UX Overview  (Web version)

HANA UX Flow@2x.png

HANA Video walkthrough (Mobile):

HANA Mobile Screenshots:

Screen Shot 2016-08-20 at 6.47.56 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s