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.
