• Add to Collection
  • Tools Used
  • About

    About

    A responsive web app designed to track and forecast user moods. Developed as part of a research project in the UC Santa Cruz HCI lab. We applied … Read More
    A responsive web app designed to track and forecast user moods. Developed as part of a research project in the UC Santa Cruz HCI lab. We applied human-centered design practices including: need finding interviews, hierarchical task analyses, user personas, storyboards, paper sketching and interactive wireframes. I served as a research assistant and designer on the project. I conducted user interviews and participated in all phases of the design, taking the lead on visual design of deliverables like the user personas, and implementing the final CSS for the UI. The app was built with AngularJS, Foundation for Apps, and D3.js. Mockups were designed using Axure RP Pro, Balsamic, and InDesign. Read Less
    Published:
We chose to deploy the finished product as a responsive web app, rather than a native iOS or Android app, in order to reach the widest user base (Android, iOS, and computer users) with limited development resources and a tight schedule. We optimized the UI for smartphone format, but ensured it was still functional and visually appealing for laptop/desktop users. 
The home screen needed to serve two purposes, to show the user's emotional forecast and to allow quick access to add new entries and edit past entries. We settled on a dashboard view with the 5-day mood "forecast" central in the view, and "+/edit" buttons on the bottom for easy thumb reach on smartphones.
The research study required participants to log entries two or more times per day, so it was critical to make this process quick, easy, and enjoyable. Through user testing we determined that most people preferred a series of several short entry pages over one long entry form, and that emoticons were a favored visual. We settled on a design featuring sliders large enough to easily operate on a smartphone with clearly labeled end points. And we choose an emoticon representation of mood which was animated to bounce more or less vigorously with energy level. Post-test interviews confirmed this feature was well received.
Other data entry screens were designed following consistent UI patterns and featured a clear progress indicator. We tested our prototype with users to ensure data entry was smooth and painless. 
We began our design process with a series of need-finding interviews. We synthesized the interview results to produce storyboards and user personas to guide our design efforts. 
We used an iterative design process, starting with paper sketches and then moving to digital wireframes using Balsamiq and Axure RP Pro.
We created several versions of the wireframe mockup before moving on to designing the UI in HTML. The first version were simple static screens created in Balsamiq Mockups.
We iteratively improved our wireframes and created a fully clickable prototype using Axure RP Pro, user testing two versions of this before moving on to final UI in HTML. Left images are an early iteration, right images are closer to the final design.