Project Brief

Dog Rescue Without Borders (DRWB) is a non-profit dog rescue organization that teams with other local groups in Tijuana, Mexico to save homeless and abandoned dogs.  The website redesign aims to establish a brand that evokes fun, reliable, and friendly vibes that will invite users to put trust in the organization and, ultimately, adopt, donate, or foster.

Duration: April 2014 - June 2014

My Role: Interaction Designer and Front-End Developer

Collaborators: Alex Lee, Kenna Hasson, Victoria Ly

Skills Used:  User research documentation, user interviews, competitive analysis, mood board, low-fidelity prototypes, HTML5/CSS3/JavaScript, JQuery


Research


The Problem

For starters, DRWB's current website uses vague navigation links, confusing site architecture, and ineffective imagery.  The client's goal of the website redesign is to present DRWB as an honest and reliable reputation so that people adopt / foster their dogs, donate, and volunteer to their cause.  With just 10 weeks, my teammates and I were determined to give the website an overhaul by first getting to know the target users.  

Understanding the User Needs

After conducting 10 user interviews and collecting responses on post-its, we determined that the primary users of the website could be organized into three personas; volunteers, potential adopters, and fosters.  Throughout the design process, I would frequently refer back to the personas to ensure preceding steps were aligning to the end user needs.

Competitive Analysis

To gain insight and inspiration, we evaluated the good and bad cases of brand, functionality, content, information architecture, navigation, and design of three competitor websites.  I took a deep-dive in Rocket Dog Rescue's website and really liked how they organized their IA and showcased meta-data about the dogs in a delightful way.  

Updating the Client

Before jumping the ideation phase, we prepared a creative brief for the client that summarizes our user research findings, objectives, scope, and potential roadblocks.  


Ideation


Mood Board

The mood board served as a canvas of images, text, colors, and textures aimed to evoke feelings of care, unity, comfort, and playfulness.  These are the emotions that align with the act of adopting and fostering a rescue dog, as well as donating to the cause.

Wireframes & Functional Specs

Using Axure, my teammates and I worked together closely to create consistent layouts and styles between the different screens of the website.  We each annotated the functionality for all the interactive elements on the pages we were responsible for.


Execution


Final Implementation

After gathering user feedback on our wireframes, I made adjustments before bringing the designs into development.

To allow users to find the dog that meets their needs, I designed a filter feature with the criteria of "Breed", "Age", "Sex", and "Size".  To add to the playful brand, I added a delightful transition between each filter selection.

dogs_imac_mockup.jpg

Above:  Age field set to "Puppy" repopulates the collection of dogs to only display puppies.

Users were apprehensive about where their donations were going towards.  The client reiterated that the money was going towards items that would help the dogs (ie. medicine, shelter, toys, and food).  I decided to leverage Instagram's API to collect imagery of "wish-list" items for the pups to be displayed on the donations page.   

donate_imac_mockup.jpg

Above:  A random selection of wishlist items that the donation money will go towards.  Images leveraged from Instagram's Developer API (#dogtreats #dogtoy #dogbed #dogmeds).


Conclusion


At the end of a 10 week timeline, we tied our user research, client's needs, interaction design, and technical implementation into a 15 minute presentation given to the class and client.  


Project Brief

In my Ubiquitous Computing class, four software developers and I wanted to explore how exercise safety could be improved with Kinect skeletal tracking technology.

Duration: September 2013 - December 2013 

My Role: Interaction and UI Designer

Collaborators: Alex Lee, Kevin Katz, Chirag Toor, Steven Nguyen, Emmett Smith

Skills Used:  User Interviews, User Flow, Sketching, Usability Testing, Adobe Photoshop, Sketch 3


Research


The Problem

After interviewing 10 athletes, fitness enthusiasts, and yogis, I discovered that people avoided certain exercises out of fear of injury and judgments from others.  My teammates and I were determined to design and develop a solution that will gives users immediate feedback to self-correct their exercise form without the need of an expensive personal trainer.  

Competitive Analysis

The fitness applications we researched are great for overall fitness, but neglect immediate feedback for stretching and weightlifting form.  

THE BIGGEST PROBLEM 

These solutions require the user to copy the instructor's form on the screen as opposed to the instructor giving constructive feedback to the user.  


Ideation


 

Design Opportunities

With 10 weeks to complete the project, we had to narrow down which exercises and stretches to develop.  Turning to our users, we surveyed which stretches and exercises would require the most form assistance.  

Due to the limitations of Kinect’s skeletal tracking feature, exercises and stretches that required overlapping skeletal parts could not be recognized.   This was a major setback for us because many of the exercises that our users wanted could not be implemented. 

Above:  The user performs a toe-touch stretch but the Kinect cannot correctly recognize his skeletal structure.

After conducting a second round of interviews with our users, I compiled a list of eight exercises and stretches that we would implement based on the user feedback.

Application Workflow

Since users would be using this in a gym environment, I saw an opportunity to take advantage of Kinect’s voice recognition feature.  I created a short workflow to support faster transitions between exercises for fast-paced workouts.  

Above:  A few sketch ideas of FORMula's UI at its infancy.

Above:  The flow chart depicts all of the the paths a user can take using the application.

Wireframes

After sketching the screens and creating a user flow, I created wireframes of the screens including the functional specifications in the form of annotations.  

Above:  The wireframe for the Dumbbell Shoulder Press screen including annotations of the functions.


Execution


High-Fidelity Mockups

After creating high-fidelity mockups of the user interface in Sketch 3, I collaborated with a developer teammate to implement them in Visual Studio 2013.  

Usability Testing

In the final weeks, we merged the updated user interface with the implemented exercises, voice recognition commands, and SMS messaging system.  After conducting usability tests with 5 users, we had to make metrics tweaks with regards to correct form.

Above:  The user is performing a bicep curl with good form, therefore his skeletal region is highlighted in green and there is a green thumbs up.

Above:  The user is performing the crescent lunge right incorrectly; therefore the skeletal regions that need to be adjusted are highlighted in red.  The system state also gives the user live feedback about how he can correct his form.  


Conclusion


Future Applications

With future improvements of the Kinect SDK and it's skeletal tracking feature, we believe that many more exercises can be implemented.  We envision this product making its way into mainstream gyms because of its versatility and ubiquitous nature.


Project Brief

Caught up in our busy lives, many of us struggle to find the free time to give our parents a quick call, grab food with a friend, or even plan a vacation.  Live Free is a mobile web-application that leverages our calendar data and intelligently reminds us when we are free to accomplish the activities we tend to let slip from memory.  

Duration: January 2014 - March 2014

My Role:  Interaction Designer

Collaborators: Alex Lee, Kenna Hasson, Vinay Mavram

Skills Used: Contextual Interviews, Paper Prototyping, Storyboarding, Heuristic Evaluations, Usability Testing, A/B Testing, Node.js, HTML/CSS/JavaScript


Research


The Problem

Users struggled to find free time despite using existing time / task management systems.

Storyboarding

In this scenario, the user is notified when he is free as it is synced to his time management system, such as Google Calendar.  The mobile app will provide the user with a list of free time activities (set in advanced by the user) that fit into his time frame.

In this scenario, the user wants to plan a lunch date with his friend.  The mobile app provides the user with a visual display of free time over the next month.


Ideation


Paper Prototypes and Heuristic Evaluations

Prototype 1

With the option to move up and down activities on the menu, the little graphics to the left seems confusing more than anything and I believe it should be changed to something else. Perhaps just have one short arrow on top and one short arrow pointing down below instead of two right next to each other.
— Anonymous User

This prototype allows users to pre-populate a set of activities to accomplish for the day as well as an estimated duration for each one.  The app will notify users when they are free and provide them with the tasks that fit in their time frame.

Prototype 2

Having the daily view seems a bit unnecessary as well, the weekly view already gives a good hour-to-hour oversight of each day so I don’t see the point in having a daily monitor.
— Anonymous User

This prototype allows users to toggle back and forth between their free time and busy time and represents this information in a calendar format.  


Execution


First Prototype

Taking the feedback from our heuristic evaluations, we set out to develop a mobile-friendly interactive prototype using node.js and Twitter Bootstrap framework.  Even with a structured development plan, we ended up "pair-programming" the the majority of the prototype as the technologies were new to us.

Usability Testing

I asked users to create a task and complete a task using Live Free.

Observation:  User struggled to find the task that she created in the list of tasks.

Fix:  Realizing that there was an issue with the visibility of the system status after adding a task, two changes were made.

  1. Added a scroll bar to indicate tasks below the fold.
  2. New tasks were added to the beginning of the list as opposed to the end.

Observation:  User didn't understand what she was supposed to do once she got to the home screen.  She didn't realize until the task was over that there was a help button in the top-right corner of each page.

Fix:  Design a short walkthrough guiding users through the journey of the app.  

Designing the Tutorial

Each screen contains:

  1. Image of the button icon that would require interaction
  2. Name of the action
  3. Purpose of the action

A/B Testing: Stopwatch Timer vs Countdown Timer

COGS120 A9 Writeup   Google Docs.png

Using Google Analytics, the experiment was to determine the more intuitive timer page based on the version that had higher number of completed tasks.  The results led us to believe that users prefer viewing how much free time they have left versus how much free time has elapsed (incrementally).  


3-31-15 Update


Visuals for Version 2 

Unsatisfied with the first version of Live Free, I decided revisit this project and improve the visual communication of the user interface.  I focused on creating a better user experience by using a single typeface, one CTA color, gesture interactions, and adhering to iOS 8 Design Guidelines.