CINDY

Aqua Terra Culinary

A lunch ordering system for web and mobile.

aquaterra_1.jpg
 

project information

This project required a redesign of the web application for an internal-facing employee dashboard, a consumer-facing interface, and the creation of a mobile application. After experiencing the original consumer-facing website, I determined the new site needed to optimize for usability and understandability. Based off the client’s preferences and budget, the mobile application would be a simplistic extension of the website allowing only for ordering. 

 
 

aqua terra culinary

role: UX, INTERACTION & VISUAL DESIGNER

Timeline: 2 months

 
 
 

impact

  • Reduction of steps
  • Clarification of information
  • Optimized for ease and accessibility  
 
 

 
 
There’s no nutritional information for the meals I’m looking at. Since my child has a nut allergy, I want to be extra careful about what I’m ordering.
— User
 

wireframe web

I defined pain points of the current web application with a usability test. To revitalize the areas that needed it, I  reorganized the layout to be able to view the important pieces of information easily, and shortened the number of steps in the checkout flow.

 
 
 
 

wireframe mobile

As a simplified version of the website, the mobile application focuses primarily on viewing the month’s lunch options, selecting, and ordering. 

 

 
 
 
 

Website

I utilized a bright and friendly color palette since the lunches were inteded for elementary school children. Even though the main ordering would be done by their parents, the cheerful tones would differentiate it from other functional websites. 

 
 
 
 
 

Mobile

I used the same color palette as the website to carry over into the mobile application. In this example, the parent has two children that he needs to order for. The two children are color coded to ensure each gets the meal that s/he wants.

 
 

Client Project 

A smart lockbox mobile application.

mock1.jpg
 

project information

I was hired as a freelance designer to visually design out a mobile application that would accompany the company’s smart lockbox. The client had worked with another designer previously who had worked on a darker styling. I went in a lighter direction to encourage a more modern feel. Additionally, I advised on the interactions and architecture to ensure optimal understandability and usability.  

 
 

startup client

role: freelance designer

 
 
 

impact

  • Created clear solutions for mobile interactions & navigability
  • New investment buy-in
 
 

 
 
03.24.17_PINGZEE FLOWS MARCH 24 2017_Page_16.png

Wireframes

I was given a series of wireframes to derive the visual styling and screens from. The flows weren't intuitive so I suggested that my client and I work together to create a more straightforward access point for all the available features. 

 
 
 

recommendations

Prior to beginning my process, I clarified what all of the important features were, why they were important, and what kind of functionality was required. I then quickly sketched out some ideas. Below are some examples of what I proposed.

 
 
 
 

collaboration

As we continued our collaboration, we would discuss and I would provide input as visualized here.

 
 
 
 

styleguide

The main color palette was carried over from the previous generation look & feel, however the final results are quite different. I updated the typefaces, and designed a new icon family.

styleguide.png
 
 
 

screens

 
 

Terafina, Inc. 

A financial tablet application.

terafina_ipad.jpg
 

project information

I partnered with the Terafina, Inc. product team to create a better experience for banking end users as they go through the online application form on a tablet. The main goal was to determine how to reduce the application drop off rate over the course of a 2 week sprint. 

 
 

Terafina, inc.

role: researcher, ux & interaction designer

Timeline: 2 weeks

 
 
 

impact

Improved rates of process completion within the final product.

 
 

 
 
Screen Shot 2017-06-21 at 9.24.40 AM.png

Usability Test

To determine the pain points for the user flow, my team and I performed a usability study. I tested the application flow with 7 randomly choses individuals. Below are our results.

 
editUsability Test Results.jpg

It feels like a long process. I've gone through multiple pages, but i'm still on step one.

- User 2

 

Some major issues that the users encountered as they went through the application included:

  • Lacking a sense of progress through the form
  • Lacking a sense of security as a banking system 

As a result, my team and I determined the most important things to tackle during this two week sprint was the design of the progress bar. This was the most noticeable missing piece of the system. Users would repeatedly state that they would have exited the form on stage 2 because there was no clear indication of where they were and how many more pages there were left.  

 
 
 

sketches

As the primary point of reference for the user, the progress bar should reflect the number of steps still needed to complete the process & provide the user with a feeling of movement through the forms. Below are some of my sketches that explored those capabilities.

 
 
 

wireframes

I wireframed three progress bar variations that best resolved the issues that the users had described.

 
 
 

prototype

My team created rough prototypes to test in a comparative study. To determine which was the proper recommendation for our client, we measured success through the qualitative rating of three key components:

  1. Understanding of Current Location
  2. Progress through the Form
  3. Anticipation of Next Steps
 

final recommendation

 
 
Recommendation.jpg
 
 

Project & Product Sharing 

A content sharing web application for large companies.

homepage-1.png
 

project information

I was asked to design a content sharing platform. Large companies, such as Mercedes-Benz, have multiple teams working on a variety of overlapping projects. The project goal was to reduce the redundancy of work, promote collaborations, and encourage cross functional behavior by offering a transparent platform for teams to share their work & product testing. 

 
 

mercedes-Benz R&D

role: visual designer

timeline: 2 weeks

 
 

 
 

Proposals

The homepage's desired functionality was to allow for browsing, so I provided a variety of layout proposals that promoted that interaction. 

 
 
 
 
 
Homescreen.png

wireframes

My client liked the casual browsing that a standard grid layout afforded , but wanted a more unique look and feel. I decided to create a free flowing template where the natural direction of the images would prompt the user to browse and continue finding new things.

Below is the base flow including a breakdown of the content page.

 
 
 

moodboard

I put together a moodboard emphasizing minimal colors, graphical geometric shapes, and warm accents. 

moodboard.jpg
 
 

screens