01 / OVERVIEW
Principles of User Experience (UX)
After a few years of some self-taught UX and trying to understand the concepts on my own, I enrolled in the University of California – San Diego Extension for User Experience Design. My goal is to earn the UX Design certificate available through this Extension program.
My first course and introduction to this new way of thinking was Principles of User Experience (UX). This course defines what is UX design and we specifically ventured into a variety of topics to explore what is and isn’t UX, UX best practices, and how to best employ and implement these within a project. Exploring and understanding the theories and principles of human factors and UI design (which also include human-computer interaction and design principles and standards.)
I took this course during the Fall of 2020. During the course, I created user personas, wireframes, and a prototype of a fitness/health app.
02 / CONTEXT
How it Went & my First Project
My first project for this course was to design and develop a health app. With my current healthy living and goals, calorie counters, pedometers, and health apps have been my constant companions. They can be incredibly frustrating due to how the app responds to user input and where this input goes. Sometimes it isn’t very intuitive and editing entries or custom items can be convoluted and frustrating. My goal for this project was to come up with ways to address or solve some user defined pain points.
03 / STORYBOARDS
Creation of Storyboards to Understand User Interactivity
The app would allow for user input and indication of favorite items (food, recipes, workouts, etc.) It would also allow the user to adjust their settings at any time, including updating their progress, resetting the app to light or dark mode, and selecting a specific eating style. For example if the user wanted to try out keto for a couple weeks (after doing CICO,) then there is the option to change this setting. There would also be an option for favoriting or pinning specific food/recipes and workouts. I would also include a way to sync workouts that used video games (Ring Fit, Just Dance, Quell, etc) as a companion to working out.
Storyboard—User Persona: Ashley’s daily use of her Health App.
04 / USER PERSONAS & EXPERIENCE
Who are my Users?
The users who would use this app would first enter in some health information about themselves and the app would curate this into helping the user get the most out of the app. I would also like to include different ways of eating, such as keto, diabetic focused, or intermittent fasting. With intermittent fasting, having a way to create a window of time for the user to eat, notifying them when they should eat, and alerting them when they go over (and pushing the window out the next day due to this.)
05 / DEVELOPMENT & WIREFRAMES
Development Of The App & And Challenges Encountered
Health Apps Don’t Always Provide a Seamless User Experience!
Health apps and their connections to user devices don’t always provide a seamless experience. They can be incredibly frustrating due to how the app responds to input and where this input goes. Sometimes it isn’t very intuitive and editing entries or custom items can be convoluted and frustrating. Not to mention the handful of apps don’t connect to each other nor share information easily. Thus forcing the user to manually input information, which is inconvenient and a glaring pain point at best.
Most of the users of this app would be on a weight loss journey and want a single experience to track their progress, enter in their food/favorite foods and workouts, and link their scale information (instead of a handful of different apps.)
To better understand the user journey, I created wireframes to help visualize this and to create what I wanted to see in the app. Building out each screen, and applying what made sense according to the personas, the app slowly took form.
For the wireframe, it was advantageous to have something to showcase that would be easily implemented and also easy to follow. Laying out the use case scenario within the “app” (and branching out slightly from that,) helped make the project feel more well thought out.
06 / PROTOTYPE
Prototyping the Interactions
After creating the wireframes, a prototype was created in Adobe XD. This prototype included transitions between pages, a menu, and screens to document progress within a weight loss/exercise plan. Due to time constraints, it was a fairly basic walkthrough of what could potentially be available to the user.
Shown here is just a snapshot of what is possible with this app and it’s behavior.
The option to preview the interactivity and share it online proved to be incredibly helpful in seeing what worked and what didn’t work.
07 / MOBILE
Mockups of How the App Looks on a Mobile Device
To fully see how this app would look on a mobile device (the intended use,) mockups on an iPhone were created to help visualize it.
08 / REPORT
Reporting the Findings
After creation of the prototype, a presentation/report was created. This report outlined reasonings and gave a concise visual representation of the steps taken to create the app.
View the PDF Report here.
09 / RESULTS & OUTCOMES
What Was Learned
Never Enough Time for Everything
The main issue that I had through the production of this app was running out of time to fully develop what I visually wanted to see developed. I would make every attempt to allow myself more time, but I quickly realized why and how this sort of design really does require a good amount of time to create (and actually be helpful to the end user and be visually appealing!) I eventually found my stride, but I still required some forethought as to how much time to allocate to each step in the process.
Mindful Step by Step Process
What was helpful in not feeling overwhelmed with the amount of work it takes to make something like this was the strategic steps it takes to not only work through the UX design wheel, but to actually make something alongside it. I found this technique of taking manageable chunks of the project to work on week by week immensely helpful.
The part I found most enjoyable was the creation of storyboards (and sketching using old tried and true methods of pen/pencil and paper.) Using these methods made the production more personal and mindful in execution. There is something to be said about manual forms of communication, it can prove to be incredibly helpful in all steps of production.
PREVIOUS PORTFOLIO ITEM
NEXT PORTFOLIO ITEM