UI/UX
Over the past couple of years, I've been privileged to work on app and web projects both for companies and at my university. Here are a few of my favorite examples!
H2Pro Water Tracking App
Research and Design Project
In this cross-functional prototyping project, I helped lead a design team that collaborated with engineers, developers, and business people to create a prototype water tracker that gamifies a task that’s sometimes easy to forget: staying hydrated.
Addressing the Problem
During this process, we first addressed the issue of dehydration. Through our research we found that over 75% of Americans are chronically dehydrated. The average American is only drinking half the amount of water that is recommended each day. We wanted to see what might be a way to change this.
Searching for a Solution
After many different ideas were thrown on the board in order to try and solve this problem, we settled on a water bottle lid that is attachable to several different sizes of popular brand name bottles. This tracker would be linked to an app (my job) where it would display a personal profile that tracks weekly water consumption stats.
Gamifying Usability
In order to help motivate users to drink more water, we wanted to add a competitive element to our application. To come up with this gamified addition to the app, my team members and I used sticky notes to write down what we might like to see: achievement notifications, friends' consumption statistics, personal progress, etc. After seeing all the options on the board, we determined that a leaderboard with friends to see who consumed the most water week by week was definitely the most intriguing option. With gamification of many of our day to day tasks on the rise in modern culture, we realized this concept could potentially really interest users.
The Process
After defining a direction for H2Pro, it was time to wireframe. We then drew many iterations for each and every app page and taped these on the wall. We did this in order to see the good and bad elements of all our ideas. After marking up our wireframes, we moved on to more detailed, low-fidelity mockups. Throughout this process we reached out to our team members to see what their opinions were. This cross-functional support was useful since they had different perspectives to offer. From here, I created high-fidelity mockups that our computer science team members used to develop a prototype app. This project was formally presented at the end of the semester to local business leaders from Fortune 500 companies, Walmart, Tyson, and JB Hunt, ultimately leading us to 2nd place in the competition.
Customer Personas
Iris, 26
Hometown: Denver
Occupation: Nurse
Interests: Hiking, spending time outside
Need: Iris has recently decided to climb Mt. Kilimanjaro. She has a lot of training to do and she needs to drink a certain amount of water.
​
Liam, 32
Hometown: London
Occupation: Trainer
Interests: HIIT workouts & running
Need: Liam leads an active lifestyle and needs to keep track of his water consumption for his fitness plan.
​
Judy, 83
Hometown: San Diego
Occupation: Retired
Interests: Spending time with grandchildren
Need: Judy was told by her doctor she needs to drink more fluids but needs help remembering her progress.
​
Wireframes
Low-fidelity Mockups
Key App Features
Interactive profile panel with stats and today's date
Leaderboard that updates with each day's progress
Join multiple competition groups
Create custom groups of your own and edit the group bio
Field Agent Client Facing Design
Building UI for Online Retail Solutions
When working in b2b marketplace, Plum, I helped solve how to better explain to shoppers what they would receive with each product. We implemented a new visual preview of the sample results to allow users to see what they would be getting.
In this process, I always started out with talking to my team leads and listing the problems that need to be solved. From there, I would sketch out 5-10 wireframe iterations of each page I was working on. During this time, I would consult with my team leads to help tweak any potential pain points until we were able to move from low-fidelity mock ups to production ready design that was able to be worked on with the in house developers.
These designs would ultimately contribute to Plum, a Field Agent subsidiary, that helps companies around the world solve retail challenges such as audits, product-trial, and marketing solutions.
Examples of work:
Field Agent Application Design
Building UI for In-App Retail Solutions
When working on the Field Agent App, I helped eliminate pain points and designed product solutions to provide a more intuitive flow for users. My work on the Field Agent app would ultimately contribute to a system used by over a million shoppers.
Oftentimes users on the app side of Field Agent were very verbal about the things they liked and didn't like about our app. This feedback was crucial in order to design a better user experience for them. With this feedback in hand, my team and I would go to the drawing board, create potential solutions, and work together with the software development team to get these solutions live as soon as possible.
Examples of work:
Other work
UI work completed for Field Agent, University & Projects
Campaign Templates - Explaining the commercial process.
