SOS Website Resign
Hello! We are Kyle & Thea and we were tasked with creating a system that tackles a current issue or popular topic. We chose the COVID-19 outbreak and the struggles surrounding social distancing as our main point of focus.
We designed an app called Surviving our Separation which dives into the positive and negative aspects of social distancing due to stay-at-home orders across the world. The app, when used to its fullest potential, can relay current news, provide a variety of therapeutic mediums, and supplies a plethora of games, workouts, and activities to engage the mind and body.
01. Understanding the Audience
Context
Team
Roles
COVID-19
Pandemic
Thea Coelho
Kyle Sproul
UX Design
UX Research
Visual Design
Problem Statement
Due to the COVID 19 pandemic people have been forced to isolate, leaving them lonely and with a lot of free time. Their loneliness is caused by a lack of community, physical activity, social distancing and excessive time spent indoors.
Hypothesis
We believe that our app SOS (Surviving our Separation) will enhance pandemic users' home lives by providing accurate news and activities to do at home. This app will support those suffering by utilizing an empathic tone of the copy, an array of puzzles and workout options, and in particular, positive news articles and medically verified statistics informing them about the COVID19 pandemic.
Personas
Site
We prioritized our user’s main pain points based on our in-field interviews and feedback from our peers. We selected the top two most pressing concerns and assigned them to each persona that fit the narrative.
02. Outlining the Experience
-
Struggles to understand what all the immigration terms mean
-
Wants to volunteer and be an advocate for ODIS due to their affordability
-
Needs advice on the type of jobs he is allowed to do as an F1 Student
-
Not sure what the requirements are to stay “in status”
-
The previous company violated his trust due to an insecure process of collecting documentation
-
Afraid to lose his personal documents or have them forged
Scenarios of Use
In the process of prototyping, we sketched each scenario of use as a basis for our user flows. We then mapped out each persona and the specific pain points they experienced when going through their specific user flow.
We prioritized our user’s main pain points based on our research and interviews. We selected the top two most pressing concerns and assigned them to each persona that fit the narrative.
02. Outlining the Experience
-
Struggles to understand what all the immigration terms mean
-
Wants to volunteer and be an advocate for ODIS due to their affordability
-
Needs advice on the type of jobs he is allowed to do as an F1 Student
-
Not sure what the requirements are to stay “in status”
-
The previous company violated his trust due to an insecure process of collecting documentation
-
Afraid to lose his personal documents or have them forged
Scenarios of Use
In the process of prototyping, we sketched each scenario of use as a basis for our user flows. We then mapped out each persona and the specific pain points they experienced when going through their specific user flow.
Homepage
Support Our Mission
Form
Volunteer
We prioritized our user’s main pain points based on our in-field interviews and feedback from our peers. We selected the top two most pressing concerns and assigned them to each persona that fit the narrative.
-
Struggles to understand what all the immigration terms mean
-
Wants to volunteer and be an advocate for ODIS due to their affordability
-
Needs advice on the type of jobs he is allowed to do as an F1 Student
-
Not sure what the requirements are to stay “in status”
02. Outlining the Experience
Scenarios of Use
In the process of prototyping, we sketched each scenario of use as a basis for our user flows. We then mapped out each persona and the specific pain points they experienced when going through their specific user flow.
Homepage
Support Our Mission
-
Worried that he will lose muscle mass and his health may decline due to social distancing
-
Struggling to find an outlet to work out with other people.
-
Limited amount of free online help for easing stress and anxiety
-
Has constantly had to scour for news about COVID and pandemic updates
-
Struggling to make nutritionally balanced meals
-
Trying not to get wrapped up in the politics of the pandemic and only read the news that routed in science
Scenarios of Use
In the process of prototyping, we sketched each scenario of use as a basis for our user flows. We then mapped out each persona and the specific pain points they experienced when going through their specific user flow.
Homepage
Support Our Mission
Form
Volunteer
Homepage
Am I Eligible?
Take a Survey
Create An Account
Intake Form
Welcome
Homepage
Why Trust ODIS?
Contact Us
Audience
Painpoints
Our intended audience is everyone affected by COVID-19 stay-at-home orders but our long-term goals include a broader audience. Anyone in need of combating the negative aspects of social distancing or loneliness, in general, will find our product useful. We believe that services that connect people to helpful resources and a larger community will be invaluable long after the pandemic has subsided. Loneliness is an epidemic in our country and can affect anyone regardless of age, status, or gender.
Purpose
Our purpose is to spread information, activities, and positivity in the midst of the self-isolation brought about by the COVID-19 pandemic. We aim to relieve the stress brought about by social distancing and stay-at-home orders and provide meaningful activities and resources through an intuitive interface that’s easy to navigate.
Research and Discovery
Due to this project being a redesign, we sought to validate our original ideas and seek new ones. Through new market research, several analyses, and a deep dive into our original designs, we wanted to make sure SOS still had its place in a post-quarantine world.
02. Outlining the Experience
SWOT Analysis
Comparative Analysis
We wanted to take a step back from our process and look to see what other companies were doing. We then went ahead and made a table listing out the categories on the lop left that we felt would be necessary for our redesign. We compared our vision for SOS to the categories below as a framework. This is so we had a clear idea of how to move forward with our redesign in terms of function.
A/B Analysis
Before stepping into how our new app needed to look and function, we re-ran some of our initial user tests on the previous design, making notes and comments on aspects that needed to be improved on. Through this, we discovered several key aspects and features we wanted to focus on moving forward.
Inspiration
After looking at websites that are similar to SOS, we wanted to go further and get inspired by websites that had a clear and well defined design system. We looked specifically for good layering techniques, vibrant illustrations, their understanding of color theory and how these websites incorporated them. We did this to ensure our website is unique and stands apart from our competing covid apps.
Style Guide
We developed our design system based on our inspiration and competitor analysis. We went with our specific color palette because it is versatile and each color combination works well together. We tried a couple of options for our typography such as Rubik and Fira Sans but ended up going with Inter because of its simplicity and straight edges.
We found that using this typeface also made it easier to read our copy. For our illustrations, we wanted to try something new and with heavily defined outlines but with a mostly monochromatic look. We chose illustrations that could be intricate but easy to comprehend the visual message. We designed our color palette based on our illustrations which are predominantly shades of purple, then added a blue as an accent.
Color Palette, Icons & Typography
Logo Redesign
The SOS (Surviving Our Separation) logo features a heart with a home on the inside. Because of the growing trend of people working and doing more activities at home, we felt the logo was still fitting in a post-quarantine world.
Icons & Illustrations
03. Creating the System
Sketching
Taking our previous design in mind, we did several iterations of quick sketching to conceptualize new layouts and ways to display information to our users in a more inviting and exciting way. Going through our sketches with potential users, we ran very brief A/B testing with guidance on a low-fidelity version compared to our previous designs' high fidelity. The sketches results were far more favorable.
Mid Fidelity Wireframes
Transitioning our rough sketches into wireframes in Figma, we looked hard at things like components, atomic design, spacing, layout, and more. Running through several iterations of each screen, we landed upon the final layouts that we felt suited our user base best.
Final Wireframes
Our final SOS app design presents a colorful, inviting, and user-friendly app that sees major improvements over our original design and experience. Introducing colorful cards, more navigation elements within our information architecture, and vibrant icons, we polished our original design in a modern way.
User Journey
Our final SOS app design presents a colorful, inviting, and user-friendly app that sees major improvements over our original design and experience. Introducing colorful cards, more navigation elements within our information architecture, and vibrant icons, we polished our original design in a modern way.
Homepage
Support Our Mission
Form
Volunteer
Welcome
Intake Form
Create An Account
Take a Survey
Am I Eligible?
Homepage
Homepage
Why Trust ODIS?
Contact Us
