Completer Mobile Web App

Date: Jan. 2019 - Mar. 2019

Hours Spent: ~ 45 hours

Key Terms: Time Management, Mobile Web App, Needfinding, Ideating, Storyboarding, Paper Prototype, Heuristic Evaluation, Wireframing, Adobe XD, User Testing, Programming, HTML, CSS, Javascript, Bootstrap, Github, JSON, A/B Testing

Overview

In a team of 3, I co-developed a routine managing mobile web app that notifies the user to do their routines, log them, and get rewarded for completing them.

This was my first design project that included programming into the process. I got to learn a little bit about data collection/storage (JSON) and improved many skills involving computer language (HTML, CSS, Javascript), version control (GitHub), and digital wireframing (Adobe XD). I also got to improve my skills in needfinding, storyboarding, paper prototyping, user testing, A/B testing, and visual design.

View App

Needfinding

We were told to take time to observe students and the fields of learning. Some issues that we observed were with the navigation of UCSDs’ class portals, and how packed a library or coffee shop. We also looked into the issue of procrastination and motivation, which led us to create COMPLETER to nullify those issues, keeping the user accountable in completing their tasks.

Storyboarding

Paper Prototype

Heuristic Evaluations

To improve our paper prototype design, we conducted heuristic evaluations on three users with the use of Jakob Nielsen's 10 Heuristics. We recorded their thoughts as they traversed through the whole prototype, and organized them into a ​​document.​

Wireframing

User Testing

To improve our app’s design, we conducted user testing on 3 UCSD students. We had them traverse the app completing 3 tasks while speaking their thoughts. At the end, we debriefed them with some questions. Throughout the whole testing, we recorded their thoughts and actions to see what we could change.

User Tasks:

Scenario: You are going on vacation to Los Angeles from San Diego on November 15th. Your hotel check in time is after 2 pm on that day.

  • Create a routine
  • Complete a day of a routine
  • Finish and view a routine
  • Explore the rest of the app

Debrief Questions:

  • “Did you understand what the app is about?”
  • “Was there any confusion that you had while interacting with the app?”
  • “What did you find about the aesthetics of the app? Anything to change or keep?”
  • “Any features that you wish to change or add?"

A/B Testing

One aspect that was noticed through user testing, was the design of the “Create Routine” screen. We conducted some A/B testing to see whether an additional screen was necessary for the “Set Alarm” function. We determined that an additional screen was not needed and the “Set Alarm” function could be put within the screen.

Final Prototype