CareMessage is a health-tech nonprofit that aims to make underserved populations healthier by enabling clinics to better connect to and engage with their patients. As the Product Designer, I helped redesign their single-page web app to design a product that was scalable, intuitive, and welcoming. Because products like CareMessage's app are less common in the healthcare industry, I focused on ensuring the app was very easy for first-time users to understand and use, no matter their level of technical proficiency or experience using similar platforms.
MY ROLE
UI & UX Designer
BACKGROUND
SAOTA is a firm of architectural designers and technologists including in-house CGI and marketing teams. Their virtual reality app allows users to walk through and look around buildings and homes. However, the previous app was difficult for people to use.
THE CHALLENGE
Develop an app that clearly identifies its features while not distracting the user from the augmented reality presented by the app.
THE SOLUTION
Use large images and small buttons to keep the user’s attention on the architecture. Ensure that there is always enough contrast behind the buttons so the user is always able to navigate within the app, regardless of whether they are looking at a dark or light part of the building.
BUTTONS
Some of the buttons in the previous app were hidden and relied on the user knowing to scroll or swipe in certain areas to find them. Many of the users I interviewed never found these buttons, so I moved their location to make them visible and clear to the user. I added a menu to group some less-clicked-on tabs, such as About and Contact. This way, the links were still part of the app, but they would not be distracting to the user.
COLORS
The previous app only used black, white, and gray. The reasoning behind that was to allow the user to focus on the beautiful images. However, that made the call to action buttons difficult to find, and links were not clearly distinguished. Thus, I added orange as an accent color. The orange complemented the warm tones found in most of the images, and I used it sparingly. This kept the focus on the architectural renderings while still helping guide the user through the app.
VIRTUAL REALITY INTERFACE
When using the virtual reality (VR) portion of the app, there are several buttons that need to be visible to the user are all times: back, help, and the toggle to switch VR on and off. These buttons need to be clearly visible, but at the same time, they cannot distract from the experience of augmented reality. They also need to be visible on all background colors- whether the user is looking at a dark corner of a house or up at the bright sun in the sky. I decided to make the buttons white outlines to keep them subtle and non-distracting. To ensure that they were always visible, I added a slight dark gradient behind them that was nonintrusive to the rest of the screen.
THE RESULTS
The new app was much more intuitive, clean, and easy to use. There were no more hidden features, and all the app’s capabilities were clear to the user. The new app allows users to easily and seamlessly navigate to the virtual reality aspect, which is the main focus of the app. Users can now focus on enjoying walking through luxury mansions and skyscrapers without getting frustrated by confusing navigation or hidden buttons.
MY ROLE
UI/UX Designer
THE CHALLENGE
Sexual assault is a huge problem on college campuses. Myself and my team of 3 other UX designers wanted to create an app that would help prevent sexual assault on college campuses.
THE SOLUTION
We created an alert system app that allows a user to check in on their friends, send updates on their safety, and send an alert for help if they are in a bad situation.
THE PROCESS
We began by interviewing users about sexual assault and hearing their opinions on how to prevent this from happening. Based on those interviews, we created two user personas for the app: the bystander who wants to help their friends but does not know how, and the student who wants an easy way to call on their friends for help.
Based on these personas, we created a simple wireframe for our app. We focused on three main capabilities: an alert system, a way to check in with friends, and a way to find a friend who needs help. After creating a paper prototype with these features, we tested it on 5 users and got their feedback after asking them to complete several tasks with the app.
We then modified our app and made changes that we implemented in our basic wireframes. We created an interactive prototype using Invision, which we tested on 5 more users. After reviewing our interview notes and insights, we developed high-fidelity wireframes, which we then gave to a team of iOS and web developers for implementation.
INSIGHT #1: Users will be drinking.
Over half of all instances of sexual assaults involve drugs or alcohol. This means that, likely, users of the app will be somewhat intoxicated. To combat this, we designed large, simple buttons and used the familiar colors of red/yellow/green to easily signify to the user what each button meant. If a user is in a bad situation, then no matter how drunk they are, they will intuitively press the red button, not the green one. We also recognized that this app would mostly be used at night and needed to be discreet, so we used a dark interface for the UI. This would avoid the app being bright and blinding, while at the same time allowing the user to discreetly call for help if necessary.
INSIGHT #2: People want to help but don’t know how.
Based on our user interviews, we found that people wanted to be active bystanders and help their friends and others, but they didn’t know when to intervene in a situation. You might be at a bar and see something that looks suspicious, but how do you know if you should act on it or not? That’s where the alert system comes in. If your friend alerts you that they need help, you can feel comfortable knowing your help is wanted and needed. The app also includes a feature that lets you notify your Facebook friends, friends of friends, or nearby users of the app. This gives bystanders a way to help others without feeling like they’re being intrusive.
INSIGHT #3: This happens on a casual night.
Nobody goes out expecting to be sexually assaulted, and thus, it’s hard to plan in advance for those situations. Therefore, we wanted this app to be something that people use every night they go out. Because of this, we focused on making the app more about keeping in touch with your friends. The map of your friends gives users an easy way to see where there friends are. This would be very useful if their friend was in a bad situation and needed help. However, this would also be useful if you lost your friend at a party or wanted to meet up with them. By making the app not only exclusive to dangerous situations, it will encourage regular behavior, which will ultimately cause more people to use the app. This means that more people would potentially be able to help someone in a bad situation.
RESULTS
The app is developed and includes a web component that will allow users to check in on their friends online. Hopefully, Signifi will help combat sexual assault and allow people to feel safe and comfortable at night.
