View on a larger device.
My portfolio is not yet optimized for viewing on smaller devices. For optimal viewing experience, please view my portfolio on a larger device, such as a laptop or desktop.
My portfolio is not yet optimized for viewing on smaller devices. For optimal viewing experience, please view my portfolio on a larger device, such as a laptop or desktop.
Developing chronic illness or pain can come with several lifestyle changes. How might we design a system that would support people who have developed chronic illness to manage their new lifestyles? In a team of six UX-UI designers, I led in establishing the backbone of our design through detailing the design language, principles, patterns, and UI components.
Design System, Pattern Library, Interaction Design, Design Presentation
Original mobile operating system (persona, design language, mockups)
Brisa J., UX Designer
Ethan K., UX Designer
Isabella H., UX Designer
Jacky C., UX Designer
Sophia J., UX Designer
As an undergraduate student at the University of Washington’s School of Information (iSchool), I enrolled in Mobile App Design (INFO 365) taught by Professor Brian Fling. In groups of the largest size throughout my iSchool experience (7 people), we set out to design completely original mobile operating systems, as well as their core applications.
Existing mobile devices might include features such as reminders for tasks or weather alerts. How can we capitalize features like these to directly address the needs of individuals with chronic conditions?
a health condition that lasts 1 year or more and requires ongoing medical attention or limits activities of daily living or both (CDC).
How might we design a mobile operating system that supports people with chronic conditions in managing their experiences, so they can improve their overall well-being and daily quality of life?
As an individual, I was hesitant to take our mobile operating system in the direction of health, particularly mental health, a topic that has been tackled far and wide in recent years. The health theme also posed the challenge of security considerations; to what degree would our OS be involved with its users as patients? To help frame goals for our OS, we performed a market analysis.
Provide young people with communities and one-to-one consulting for a variety of topics, from mental health issues to studying.
Promotes mindfulness through guided meditation lessons.
Online health journal aiming to ease communication with others regarding one's health conditions.
Deciding to focus on a theme of “maintaining a sense of balance and normalcy despite health issues” was essential in giving shape to our OS. This led us to zero in on designing for people with chronic illnesses or pain, rather than for other types of patients. Digging deeper on this theme, we identified three points to emphasize in our OS:
After brainstorming words that reflect these three points, dot voting resulted in ideas such as: “embrace,” “cherish,” “moment,” and the Latin phrase, “memento mori,” an artistic saying meaning, “remember that you [have to] die.” Having once considered terminally diagnosed patients as a target audience, the Latin phrase stood out as highly relevant to the theme of our OS. Thus, taking “memento” from “memento mori” and combining it with “moment,” we decided on “Momento” as the name for our OS.
Finally, although we aimed to create experiences for those with chronic illnesses or pain, we also wanted to emphasize that users do not have to be diagnosed as such patients in order to use our OS. To highlight this idea, our main persona’s health issues are not rare nor grave conditions.
“I need to balance my health and my career. I want to be there for my clients but also for myself.”
As a result of Henry’s chronic allergies, he also:
With complete creative freedom with this project, many other teams in our class worked with OS concepts for new types of devices. Keeping our target audience in mind, we decided to build an OS for mobile smart phones.
Our core users already have managing personal health conditions on their plate. To avoid overwhelming them with a new hardware, we will only ask them to spend time learning a new software.
Once our team had a collective idea of Momento in mind, we split into smaller groups to work on different pieces of our OS. During the first sprint of such work, I voluntarily collaborated with two teammates to begin conceptualizing UI components. While team members shuffled responsibilities during the next sprint, I continued working on Momento’s design core and naturally became a lead figure within the team.
For the purpose of this case study, I will be introducing UX patterns first, despite initially working on UI components.
Designing with recognizable mobile patterns to reduce cognitive load.
Caring for oneself should not get in the way of tasks, but tasks should not get in the way of caring of oneself.
Emphasizing the beauty of the real world to prevent dependency on technology.
Illness and pain are not hindrances to living life. Design to empower the user to participate more fully in daily activities.
With Professor Fling’s guidance, my team changed course to work on screen layouts. Rather than scrutinizing details of individual UI components, we focused on deliberating how users would interact with Momento. What will make Momento’s experience unique as a mobile operating system?
As a 50-50% team of mobile Android and iOS users, we asked ourselves:
Providing a reason with each of our answers helped us envision Momento's ideals, as well as recognize patterns to avoid.
I worked on defining and designing each of the layout components detailed below. This section covers up to their mid-fidelity stages. Any subsequent changes to their designs were made as we designed Momento’s applications and will be discussed in a later section. Please note that a sub-set of my team was simultaneously putting together Momento’s styleguide, which will be detailed later.
Inspired by the page titles in both Android and iOS, and keeping our design principle (#1. Conventional) in mind, we decided Momento needed a similar layout component.
As a finalized concept (but non-finalized design), the top bar featured three states: default, search, and menu. The default top bar can feature up to two immediately available action buttons/icons. If one of these actions is “search,” the search bar will expand upon tapping on the search icon. If a page has more than two action options, the second icon will be three dots used to open a menu of additional actions.
Considering several OS applications often have multiple pages to display, we engaged in designing a tab controller for Momento.
Momento’s design principle (#1. Conventional) disencourages the introduction of new ways of interaction. However, considering that chronic conditions may involve different mobile abilities, we looked for alternative ways to change the active tab.
As a finalized concept (but non-finalized design), the tab controller can switch tabs via tapping or horizontally scrolling. Tapping and holding a tab to view its title seemed extraneous, since switching tabs would immediately result in viewing its content, including its title in its top bar. We therefore decided to remove the tap and hold tab interaction.
Android’s bottom navigation bar provides a dynamic and readily available way to navigate the OS. We saw an opportunity in adapting this component to directly address the needs of our target audience, and therefore add to Momento’s unique experience.
As a finalized concept (but non-finalized design), the universal bottom bar (UBB) featured three action buttons: Back, Home, and Virtual Assistant. Taking after Samsung’s navigation bar, we created three alternative colors based on Momento’s style guide to act as background colors for the UBB. These options helped the UBB blend in with the content of the current view.
This section will highlight the iterations of components in groups up until their mid-fidelity phase, after which they evolved while designing Momento’s applications. For each group of components, my sub-team worked individually to ideate designs divergently before engaging in convergent design, resulting in a mid-fidelity design kit.
Our mid-fidelity buttons demonstrate progress within the styleguide team, as primary, secondary, and tertiary colors are decided as mauve, deep green, and sand, respectively. Drop shadows are removed from toggle sliders and radio buttons, and their colors are limited to gray and mauve to increase simplicity.
While cleaning up Momento’s mid-fidelity UI components, I also stepped in to help define its styleguide.
Our overall design goal is to emit a collaborative and compassionate ambience through Momento. To help achieve this, we consciously avoid creating a clinical impression, which our target audience may be all too familiar with. Three ways we do this are:
In addition to assembling a color palette, we decided on two fonts to use throughout the OS:
Finally, we found the Feather Icons kit to fit our styleguide. A team member also stumbled upon Mikołaj Niżnik’s 3D Weather Icons pack while designing Momento’s Weather application, and this was also integrated into our styleguide.
At this point, I joined other team members in designing Momento’s core applications. Continuing with our system of sub-set teams, we chose to work on the applications we were most interested in as individuals. This section will review my design work on the following applications:
Henry is trying to manage his health as well as manage his career goals. He needs personalized care and recommendations to support his unique set of needs.
The decision to include a virtual assistant in Momento was unique to our OS and team. This is due to the nature of virtual assistants, which do not require user input to successfully complete tasks or make suggestions for them.
Another deciding factor for including a virtual assistant was its branding potential. Considering existing voice assistants, such as Siri, Alexa, and Cortana, we recognized their identities did not extend past having a name. With Momento, we want to provide our target audience with a friendly figure that encourages trust and decreases feelings of loneliness. We figured visual personification was the right direction.
As one of Momento’s main themes is “Embracing the Self,” we initially thought a virtual version of the user would act as the virtual assistant. However, Brisa, the team member I was working on the app with, pointed out that not all people are most comfortable with other people, or even themselves. With this in mind, we looked for other options for our visual personfication.
Inspiration for non-human virtual assistant: animals (top left), Yummy World (top right), Couch to 5K (bottom left), Squishables (bottom right).
We came across an article about studies proving humans can feel more empathy for animals than other humans. A fitness application called Couch to 5K capitalizes on this by featuring virtual trainers of different species and personas to choose from. Popular culture has also seen merchandise trends such as Yummy World, which personifies food items, and Squishables, which turns anything from animals to well-known branded characters into a fuzzy plushie with an endearing face.
While we liked the idea of offering multiple non-human avatar options, we had limited time to design app mockups. Furthermore, we would need to create original characters and/or art to fit the aesthetics of Momento. This led us to look towards what was already available to us.
On the note of personified objects and cute animals, we were reminded of the 3D Weather Icon pack used by another sub-set of team members on the Weather app. Utilizing these icons as Momento’s virtual assistant was an opportunity to emphasize design principle #3 (“Grounded in reality”), by reflecting nature and the current weather conditions in contexts other than the Weather app.
With the visual component of our virtual assistant decided, it needed a name: Momo, derived from “Momento.”
In this mid-fidelity demo, Henry interacts with the full-screen version of Momo, the voice assistant, which is accessible via tapping its app icon from the springboard. Henry can either voice or type his needs to communicate with Momo, who then makes suggestions to remedy his requests based on data collected from Henry’s other uses of Momento.
“I had lots of moments of delight [while watching this].”
Brian Fling, Professor
Henry taps the sunshine icon in the universal bottom bar to open the virtual assistant, Momo, in overlay form (mid-fidelity). Similar to the full-screen display, Henry can either voice or type his needs to communicate with Momo. Using Henry’s data to support its recommendations, Momo displays these in a simplified fashion, as well as provides an option to continue the conversation in the full-screen application.
In designing this version, we altered the modal component, replacing its outline with a drop shadow. This creates elevation, which better separates the modal from the current view content.
Like most existing AI assistants, Momo is able to automatically complete tasks for its users. We imagine Henry being able to set Momo to complete particular actions at certain times. In this mid-fidelity demo, Henry has set Momo to ping* his wife, Kira, every time his health check-in has a negative outcome via Momento’s Health application. When Momo sucessfully pings Kira, it reports to Henry via notification.
*The ping feature is covered under the Contacts app.
Henry's support system is very important to his overall sense of well-being. Due to Henry's condition, his family wants to be easily reachable in case of an emergency.
Early version of the Contacts List.
We had three initial ideas for Momento’s Contacts application:
Jumping right in to mocking up a standard Contacts List screen, we immediately felt the need to rework some UI components. We pulled Professor Fling aside for individualized advice, which resulted in an overhaul of Momento’s main layout components. The main points of concern were:
Concurrently, another sub-set of our team was designing the Tasks application. Dissatisfied with the claustrophobic combination of the tab controller stacked on top of the universal bottom bar at the bottom of the screen, they explored new designs for the tab controller.
With the new tab controller, the bottom of the screen had better spacing and appeared less busy. Because the solid alternative mauve background color for the top bar unintentionally matched the universal bottom bar, we reverted it back to the gradient. This allowed us to retain the unity between main layout components. Designing other screens relevant to the Contacts app went smoothly with these points straightened out.
Mid-fidelity versions of the Contacts List screen (left) and the Emergency Contacts screen (right).
As health conditions can be unpredictable, Momento keeps Emergency Contacts separate and easy to access. Only a limited number of contacts can be specified as emergency contacts, therefore allowing each contact a larger amount of screen space. Emergency Contacts are also reachable via the Aid button* on Momento’s lockscreen.
*The Aid button is featured on the Lockscreen & Notifications.
Unique to the Momento OS, the ping feature is another way to contact others, alongside calls, messages, etc. Pings provide a method of getting in touch with someone without requiring input, such as voice or a typed message. On the receiving end (likely an Android or iOS device), a ping may appear as an automated text message.
Mid-fidelity version of the Contact Details screen.
Final version of the Contact Groups screen.
While the ability to group contacts was a feature we wanted to include from the beginning, we only got around to mocking its relevant screen up in the final sprint of the project. Momento includes three default contact groups: emergency, medical, and family. Users can create and customize additional groups.
This mockup also includes another instance of Momo, the virtual assistant, offering suggestions based on Henry’s usage of Momento.
As this feature was designed later in the project, it is evident how we responded to aforementioned feedback regarding contrast and the top and bottom bars.
Henry needs to be aware of communications, whether with family, his clients, or Momo. This should be easy to access.
The Lockscreen & Notifications was a part of the OS that I took over in the final sprints, but was originally worked on by other team members in the early stages of the project.
Early versions of the Lockscreen & Notifications that I used as inspiration for the final designs. From left to right: Lockscreen - Idle, Lockscreen - Morning, Lockscreen - Evening, Lockscreen - Night, Lockscreen - Inspirational Quote.
The initial Lockscreen & Notifications team had a variety of concepts. I selected the above five screens to iterate upon, as they best fit our built concept of Momento.
Final version of Lockscreen & Notifications (Morning) - Inspirational Quote.
When Henry awakens his device for the first time in a day, Momo will greet him with an inspirational quote.
Henry’s notifications are visible as icons from the lockscreen. Notifications from his most important applications are prioritized, and these can be prioritized in Momento’s system settings. When a notification icon is tapped, its details will expand.
Final version of Lockscreen & Notifications (Day) - Notification Preview.
Final version of Lockscreen & Notifications - Idle.
Background information is always displayed on the screen when idle. This includes the time, date, notifications, as well as the “Aid” button. “Aid” provides immediate access to Emergency Contacts and is always accessible.
Momento’s default lockscreen background reflects the time of day with color gradients. With backgrounds for the Morning, Day, Evening, and Night, the lockscreen automatically adjusts its contrast visibility throughout the day.
Final version of Lockscreen & Notifications (Day) - Notification Preview.
Henry is familiar with how applications are laid out in other mobile operating systems, such as Android and iOS. He needs to access all of Momento’s apps in a similar way.
The Springboard was the final piece of Momento’s puzzle. We waited to design this after many of Momento’s applications were in their final stages because we believed the Springboard would perform best as an element that tied the operating system together as a whole. As a result, the Springboard adopts features from many other parts of Momento.
Early versions of the Springboard (1 of 2). From left to right: Version 1, Version 2, Version 3.
To begin with, we tackled decisions such as:
Keeping our target audience in mind, we decided to limit each row of applications to 3. More spacing between each application icon allows for more accurate taps.
We referred to Momento’s Lockscreen & Notifications for guidance on which general widgets to include: Clock and Date. In addition, a minimal Weather widget provides a branding opportunity through Momo’s presence on the Springboard. We decided an operating system-wide search bar was also essential for ease of navigation.
As for widgets unique to Momento, our Health application stood out as a representative for the OS. At first, we attempted more distinct designs for the Health widget (see Early Springboard Version 4). However, we quickly decided against this, as it contradicted Momento’s design principle #1 (“Conventional”).
After settling on a shortcut-based widget design for the Health widget, we moved on to consider the following:
Early versions of the Springboard (1 of 2). From left to right: Version 1, Version 2, Version 3.
Final versions of the Springboard. From left to right: Morning, Day, Evening, Night.
As the Springboard is often what greets users upon unlocking a device, we recognized an opportunity to strengthen Momento’s design patterns by aligning the Springboard with the Lockscreen & Notifications. The following table lists parallels between the lockscreen and springboard:
This section will detail my work as part of our final deliverable for Professor Fling’s Mobile App Design course at the University of Washington.
Easily access Momo from the Universal Bottom Bar.
Momo utilizes user input and usage trends to understand needs and make personalized recommendations.
Open Momo in the full-screen Virtual Assistant application for a more immersive experience.
Momo connects users with their favorite self-care tools.
Navigate to a contact via search or the alphabar
Pinging a contact is a method of communication that does not require verbal or typed media
Emphasis on Emergency Contacts
In addition to pre-set Groups (Emergency, Medical, and Family contacts), users can create custom Groups
Start every day with an inspirational quote from Momo
Notifications appear as a row of app icons, and each expands with details when tapped
Lockscreen background changes depending on time of day (i.e. evening)
Background information is displayed when the screen is idle, and "Aid" connects with Emergency Contacts and is always accessible
Clock and date elements are consistent with the Lockscreen
Springboard backgrounds match time of day, consistent with Lockscreen
Widget for the Health App highlights the app's essential role in the Momento OS
Features a prominent search bar for easy access to search through the OS, as well as online
The design work covered in this case study is limited to that which I have worked on. In addition to a design language and guiding persona, Momento consists of 10 applications:
View Momento as a complete operating system below or see the live presentation deck.
Each sprint of this project was a rollercoaster due to each team member adjusting to working in a larger group and eventually taking on more individual responsibilities due to one member dropping the course. However, our efforts and struggles paid off as we were showered with praise during every design review with our instructor. My work for this project exemplifies my ability to receive and deliver on constructive feedback.
Due to working with a larger team, it was often difficult to gather, especially to make small decisions. On the single occasion that I made my own decision, it was the minority opinion of the group. With discussion and listening to others’ perspectives, I easily understood why my original decision was not the best aligned to our design language.
As a particularly detail-oriented person, I was encouraged when I discovered one of my team members shared my attention to detail in our screen designs. This mutual value helped build trust among our members, and lessened my burden of feeling responsible to do a final detail check on others’ work.
