Case Study: serene
An app for logging and tracking symptoms, without the anxiety found in most clinical spaces.
An easier way to document experiences with chronic or sporadic health issues.
Health-focused, with a calm and compassionate atmosphere.
A time-sensitive tool for when speaking to doctors and other professionals.
Team
(Myself) Daria Zadorozhnaya
Research & development
User Testing & Interface
Prototyping
Type
UC Berkeley Extension Course Project
Year
JUN 2023 - AUG 2023
The Problem
The concept for this app was derived from my own experiences with chronic health issues and unexplained symptoms.
In the wake of Covid-19, people have begun to pay more attention to their health than before.
A number of my friends and family have struggled with cataloguing their new and/or sporadic symptoms.
I found myself wishing that I had an easier way to document what I was experiencing. That when I was able to speak with my doctor, I would have something to point to with direct and detailed information.
The Timeline
Week 1
The Problem and the Project Plan
Week 2
Preliminary Sketches
Week 3
From Wireflows…
Week 4
…To Wireframes
Week 5
Usability Evaluation Summary
Week 6
Hi-Fi Wireframes: Attempt #1
Week 7
Hi-Fi Wireframes: Attempt #2
Week 8
Logo Inspiration and Style Guide
Week 9
Design Specs and Final Frames
Weeks +
Presentation and Prototype
01 Starting from Scratch: Preliminary Sketches
Like with most of my projects I started with research, brainstorming, and some preliminary sketches.
When considering similar apps that might be used as inspiration for the layout, I found myself drawn towards the Alarm and Reminders apps that were built into most phones.
I knew that I wanted to have some kind of list that could be scrolled through, added to, removed from, and edited for further detail.
My initial critical path for success was one where a user could view all the previous entries, add in a new one, see that entry confirmed, and then review everything with the latest addition at the top of their list.
The original working name for my app was “Project Chronicle”, in reference to its ability to document symptoms according to time and frequency.
A few key points:
I was already wondering whether the grid or list format would be more appealing for users, and noted that I would need to bring it up during testing.
I considered alternative methods of initiating a new entry.
I knew that the app had to have confirmation of the entry to satisfy users.
02 First Step Up: From Wireflows…
My sketches formed the basics of my wireflows, and from there I began to extend beyond my initials ideas.
Added in calendar view.
Ability to track specific symptoms.
Multiple avenues of adding a new entry.
Figured out some of the information that would be needed for each entry.
03 And Once More: …To Wireframes
Once were my ideas were more put-together, I further elevated my work into its first set of wireframes. I used Figma to add features and screens such as:
A “create an account" screen.
A “sign in” screen with the options to recover the username and password.
Options for both grid and list formatting.
Detailed symptom logging options.
Calendar tracking.
The “before and after” of a new symptom log in the formatting options.
At this point, the project was referred to as “The Archives”.
04 Hearing from Users: Usability Evaluation Summary
To determine whether my wireframes were heading in the right direction, I performed user testing with several participants. I presented them with scenarios and questions, recording their actions and answers as we went through the screens.
Highlights from user testing:
Users were successful in signing in, creating a new account, and traveling between the two screens. The experience was streamlined and successful.
Most users noted that the grid layout felt “busy and chaotic”, with one user eve noting that she felt “overwhelmed by it” in comparison to the more “calming” list view. I had specifically questioned this in my earlier designs, and it was great to confirm my concerns and that I would need to use the list view as a default. I also noted that I would need further testing to determine if it was successful on its own, or just in comparison to the less-popular grid view.
The list view managed the space better, but one user suggested that it could be helpful to add tags or descriptions to help them sort through and pick up on things faster.
After discussing initial impressions with the users, I came up with a few more plans for different pages to further minimize clutter and anxiety. These included moving the calendar to a separate display for more breathing room.
Finally, one user suggested that I allow for symptoms to be “linked” to one another. I had already included this feature, but all of my users found its current presentation confusing; which meant I needed to reevaluate and try again.
05 Moving Forward: Hi-Fi Wireframes Attempt #1
Reworks:
I rebranded my project to “Serenity Archives”, although unfortunately this would not stick. One of my users quickly pointed out that it sounds more like the name of a cemetery or funeral home. (Oops!)
The wireframes were upgraded to a higher fidelity with a greater emphasis on the content itself, the placement, text, icons, and similar components.
A great deal of time and effort was also dedicated to solving the issues pointed out by participants in the previous round of user testing.
Key Features:
Added in a hamburger menu.
Defined both list and grid layouts.
Created icons.
Included more information upfront.
Added in options for sorting.
Struggles:
Finding a color scheme that was calm and soothing without becoming boring or overly clinical. I also struggled to find enough contrast between the colors I was using. Unfortunately, my attempts to reduce health-related anxiety instead suffocated the personality of my project and left it feeling sterile.
Finding a font that worked with my theme, ideas, and the overall project.
Consulting with my Colleagues:
After I shared this version with my peers, my supervisor reached out with some concerns about the project’s level of fidelity and UI scope.
We had a long discussion on what changes to be made, and she encouraged me to take some extra time working on this part of the project before moving on.
I took careful notes of her feedback, and began to plan how I could implement the changes to fix some of the major issues.
Even though it required a great deal of overhaul, the increased amount of time spent on this stage of the project ended up being both entirely necessary and very much worth it.
06 Taking a Step Back: Hi-Fi Wireframes Attempt #2
After speaking with my supervisor, I knew that the components and user experience of my wireframes was pretty solid.
It was the user interface that now needed my attention.
More Reworks:
Changed the typography (fonts and placement) and the color scheme to be more cohesive and thematically appropriate.
Researched resources online to find a combination of colors that more successfully relayed the feelings of ”soothing and refreshing.”
I removed the dark lines I had outlining everything, which also helped to remove the tense, claustrophobic effect I wasn’t even fully aware of at the time.
I created and incorporated a logo into my project, featuring its colors and likeness throughout the rest of the project as well.
Other minor layout changes.
I put into practice some specific tips I’d received, like using #222222 instead of a solid #000000 for the text and black lines to increase readability.
07 Defining the Look: Logo Inspiration and Style Guide
I based my new logo off of rock cairns (also referred to as stacked stones) that are found frequently on hiking trails. While they have many meanings, they can also be associated with peace and patience.
The topics covered here:
Colors
Logo Parameters
Icons
Typography
Font & Size
Spacing
Tone
Accessibility
08 Polishing and Publishing: Design Specs and Final Frames
To Summarize:
serene is an app that provides users with a platform to log their symptoms, track the progression over time, and consolidate their information without the anxiety and confusion of overly-clinical spaces. Through the development of this project, I aimed to come up with an answer for a problem that was close to me and my loved ones, with consideration for the trauma and stressful times that we have all recently endured.
Outcomes
A digital prototype that allows for free-form exploration of the app.
Critical paths include:
Viewing previous entries on the platform.
Logging a new symptom with all of its details.
Viewing and interacting with the platform through multiple avenues of sorting and layout.
Seeing how the symptoms can be linked together.
UX elements and deliverables.
Improvements in:
Using Figma.
Using UX methods effectively.
Significant improvements in how to utilize UI skills.
Further practice in refining drafts and wireflows/wireframes to higher fidelity versions.
What I Learned
How to utilize resources available to me online and through other means. While I should obviously retain my own ideas and creativity, there is no need for me to suffer trying to re-invent the wheel. For example, in what colors or fonts coordinate well together.
How to approach work that I’ve done with a critical eye, sometimes even requiring a complete overhaul visually to make improvements.
How to better take into account the feedback of my stakeholders (my instructor in this instance) and my participants in user testing.
What Comes Next
Further testing to revealing additional pain points and areas of potential improvement to the prototype.
General skill improvements when using Figma will go towards bettering the prototype.
Potentially exploring dietary options, specifically for food intolerance or allergies rather than weight loss endeavors.