AVA GARFINKEL
As part of our final for the MADE Winter Studio, we were all tasked with different projects meant to improve our UI skills. As someone with no experience in UI/UX prior to this project, I as excited to try something new and apply what I've learned in this assignment. For my project, I worked with a company called Flourish Labs who asked students to help redesign their app håp, an app meant to help people track their mental health over time. We were asked to specifically redesign the check-in section where people answered questions several times a day and the dashboard section where the results and tracking is displayed.
PROCESS
Because I wanted my designs to be something that the company may actually implement, I challenged myself to stay within their brand guidelines throughout my redesign. I started by reviewing their current check-in and dashboard designs as well as their brand guidelines. In addition, the company shared with us that they had recently had a psychologist redo their check-in questions, and they wanted help adjusting the check-in so that it was suitable for the new questions.
Current check-in screens
Current dashboard screens
CHECK-IN UI NOTES
Gradient direction changes every question
Gradient color is brighter towards the more favorable answer
Current check-in categories are confusing/unclear
Slider doesn't work for new questions
DASHBOARD UI NOTES
Can only view three factors at a time
Heights of bar graphs are confusing, no labels
Hard to see trends over time on weekly view
I started my redesign by creating new factor categories that worked better with the new questions and were more clear. I kept all the colors the same except for 1, which I changed for accessibility purposes so that black text was more legible on top of the color. I then categorized each new question into these categories (this part would definitely have to be redone by a psychologist or mental health professional).
I started my redesign by creating new factor categories that worked better with the new questions and were more clear. I kept all the colors the same except for 1, which I changed for accessibility purposes so that black text was more legible on top of the color. I then categorized each new question into these categories (this part would definitely have to be redone by a psychologist or mental health professional).
I started my redesign by creating new factor categories that worked better with the new questions and were more clear. I kept all the colors the same except for 1, which I changed for accessibility purposes so that black text was more legible on top of the color. I then categorized each new question into these categories (this part would definitely have to be redone by a psychologist or mental health professional).
With the new categories, I could begin redesigning the check-in and dashboard. For the check-in, I left the gradient but turned it on its side so that it looked less blocky and didn't change direction for each question. To create a more responsive user experience, I also made the gradient get more saturated as the slider was moved towards the right and less saturated as it moved towards the left.
Revised check-in screens
Gradient change on check-in screens
For the dashboard, I decided to display the daily graphs horizontally to mimic the direction that the slider moves in. I also made the daily graphs smaller so that all the data could be viewed at the same time, and added a scale at the bottom so that it's clear what the length of the bars mean. For the weekly view, I added lines between each data point so that trends over time were easier to see. I also added a feature that allowed users to click on a point to get specific information for that date. Both views still allow to turn factors on and off if they would only like to see some information.
For the dashboard, I decided to display the daily graphs horizontally to mimic the direction that the slider moves in. I also made the daily graphs smaller so that all the data could be viewed at the same time, and added a scale at the bottom so that it's clear what the length of the bars mean. For the weekly view, I added lines between each data point so that trends over time were easier to see. I also added a feature that allowed users to click on a point to get specific information for that date. Both views still allow to turn factors on and off if they would only like to see some information.
Daily view
Daily view with gradients
Daily view with factors turned off
Weekly view
Weekly view with factors turned off
Weekly view with data point selected
After presenting these designs to the client, I got a lot of feedback to help inform my final iteration.
CLIENT FEEDBACK
Explore a scrolling check-in instead of a tap-through check-in
Include a free response check-in question
Consider accessibility in dashboard, other indicators for categories besides color
Consider horizontal display for all dashboard views
Consider how the daily dashboard can be incorporated into the home screen
PRODUCT
For my final deliverable, I made edits to my current screens based on client feedback and more research. I explored how the weekly and monthly views may be displayed horizontally, and I explored how accessibility could be improved in the current vertical display. I provided a scroll option for the check-in, although through research I found that tap-through may be the best option since it's not preferred for users to see all the questions at the same time in case the response to one affects the response to another. Finally, I explored a new daily dashboard design that can be displayed as a graphical element on the home screen.
Updated daily dashboard, shapes change size based on check-in responses
Horizontal weekly view, one factor viewed at a time
Horizontal weekly view, one factor viewed at a time
Horizontal monthly view, one factor viewed at a time
Horizontal monthly view, one factor viewed at a time
Weekly view with different shaped data points
Weekly view with data point selected
Weekly view with different dashed lined
Weekly view with data point selected
Scrolling check-in
Scrolling check-in
Scrolling check-in
Scrolling check-in with fill in response
Default home screen/daily dashboard
Updated daily dashboard, shapes change size based on check-in responses
Daily dashboard detail view
Daily dashboard detail view