Omid Website Redesign

Responsive website redesign for a nonprofit organization

Omid hero section.png

About the Project

Founded in 2010, Omid Institute is a nonprofit mental health organization based in Irvine, CA. They provide affordable mental healthcare as well as social support services to strengthen their diverse community in Orange County. I instantly clicked with them because their mission aligns with my passion for making people's lives better. I worked closely with Omid to redesign their brand and website to enhance its user experience.

CLIENT

Omid Multicultural Institute for Development, Irvine, California

ROLE & DURATION

UX, UI, Brand & Strategy | 2020 - In Progress 

Understanding the Problem

The Omid website had many usability issues that inhibited users from having a great experience. A bounce rate of 70 percent indicated that the website was not clear and functional.

Also, the visuals felt outdated and needed a fresh look for brand identity improvement.

Throughout this project, I made sure my design process was as user-centered as possible. Here is a very high-level overview of my design process.

ROLE & DURATION

Taking a step back;  Defining Goals

To learn more about Omid's mission, values, and goals, I conducted several meetings with the stakeholders to ensure my design was aligned with their goals.

Here are the insights derived from these meetings:

Omid's stakeholders want to improve their online presence to focus more on the younger generation. However, Omid's current website is not clear about their target audience and their value proposition. Omid should have a clear and self-explanatory website. 

Omid is a trustworthy mental healthcare center based on my discussion with one of their patients. However, I realized that the patients who find Omid by online search do not perceive them as trustworthy and do not book an appointment. Omid needs to build a trustworthy and professional online presence.

Omid's staff are dedicated to helping people to improve their lives. The ultimate goal of the website is for users to book an appointment with Omid and to get help. 

Since Omid is a nonprofit organization, the stakeholders intend to use the website to attract donors. 

Learning more about the needs and pain points of Omid's website's users

 

To find major the major issues of Omid's current website, I ran a usability test with 9 participants with similar demographics as Omid's target audience. I chose this method to discover where users struggled the most and why. I created the user's tasks based on the goals identified in the previous step.​

All the participants had a very hard time finding information and navigating through the current website.

 

The participants found the current Omid's website unreliable. 

After conducting the usability testing, I interviewed the participants to find out the reasons behind their behaviors. The usability tests and user interviews helped me gain qualitative and quantitative insights about users' expectations, behaviors, needs, frustrations, and motivations.

I categorized users insights into three groups:

I need to learn about Omid and their services quickly 

I need straightforward navigation

I need to make sure that Omid is a reputable establishment

Users' insights about Omid current website gathered from usability testings and interviews

How were other similar organizations' websites different? 

To find out Omid's website areas of improvement, I evaluated similar nonprofit organizations' websites and determined their strengths and weaknesses. 

After analyzing several similar websites, I noticed that they all had simple navigation and straightforward information presentation. Therefore, I decided to redesign the website’s information architecture.

 

I also found out that similar organizations' websites' biggest weakness was lack of visual hierarchy and poor user interface. Good visuals would help Omid website to stand.

Competitive Analysis to identify best practices and opportunity areas

LET'S DIG IN

Essential features and content that were missing

I kept a running list of requirements, thoughts, and ideas as my project progressed. By conducting interviews, I realized that a lack of clear contact information on the Omid website was the main reason that users didn't perceive the brand as trustworthy.

Another missing feature was that users were not able to book an appointment or register for a class via the website. Instead, users had to request an appointment via email. This process eas time-consuming according to users. 

  

I also identified that Omid did not have a mailing list. Lack of email marketing service was taking a lot of staff time. They had to send even "welcome emails" one by one.

Identifying the primary users' needs

Using data collected, I put together a set of 2 illustrated personas to represent the users’ needs, goals, and frustrations. Sam, the first persona, represents a user looking for help. The second persona represents a donor.

Because of the time constraint, I focused more on Sam, representing the key target audience.

The key target audience persona

Mapping users' journey 

Using our personas, I put together flow maps to design the path that users would go through to perform common tasks. These charts worked as guidance for the development of the website pages and features. Here is a sample:

A sample of user flow created for the homepage

Exploration and Iteration

After gathering all the necessary data, I started creating the information architecture and low-fidelity wireframes for primary use cases. After getting stakeholder validation on the wireframes, I began to conduct usability tests with the low-fidelity mockups. Once I had confidence in the design, I began creating high-fidelity mockups.

A sample of an annotated Omid's homepage wireframes

A sample of an annotated Omid's homepage wireframes

A clear and

self-explanatory website

A hero section with a brief explanation about Omid was added to the homepage. This section helps users to learn about Omid's value proposition quickly.

Also, by recategorizing the information using open card sorting I designed straightforward navigation.

A trustworthy and professional online presence

Contact info was added to both header and footer of the website. Including contact info as well as improving the website visuals significantly, helped the Omid website to look more professional and trustworthy.

Efficient for accomplishing users' goals

By considering visual hierarchy, clear call-to-action buttons for requesting an appointment were added to the landing page. I also included a section for making a donation on the homepage to attract doners.

Omid new homepage 

Omid new services page 

About page and a sample of form for requesting an appointment

A new identity

I designed a new brand identity considering Omid's core values of optimism, soothing, and approachability. Also, the Om sign and a tree were inspirations provided by the stakeholders for designing Omid's new logo. 

 

I love building design systems that grow with clients. I created reusable components for Omid to make future scaling simple. 

THE RESULT

TYPOGRAPHY

Poppins

AaBbCcDdEeFfEeGgHhIiJjKkLlMmNnOo
PpQqRrSsTtUuVvWwXxYyZz

0123456789
!@#$%^&*/)

PRIMARY COLORS

Open Sans

AaBbCcDdEeFfEeGgHhIiJjKkLlMmNnOo
PpQqRrSsTtUuVvWwXxYyZz

0123456789
!@#$%^&*/)

SECONDARY COLORS

Logo

The logo and the icon’s exclusion zone is equal to half the height of the icon (marked as × in the diagram).

COMPONENTS

A new responsive website for Omid

Outcome:

people like it

I hold this project as an example of a user-centered design process. I kept checking the design with users and stakeholders in all stages of the project. I have had very positive feedback from the users with whom I tested the new Omid website. The following quotes are from three different people who tested both the old and the new Omid website:

SO much better! I cannot believe I am looking at the same organization's website!

I love the interface! It looks so professional. I would book an appointment with them for sure.

This website is easier to understand and follow.

Next steps

I have not had the opportunity to implement this design yet. Currently, I am working on designing the remaining pages. There is still some confusion about the services categorization. Stakeholders are reconsidering their business plan and want to change some of the offered services. I will conduct a second round of card sorting when all the services are finalized. 

I am keeping an eye on the ultimate goal of reducing confusion for the Omid website. Also, I make sure that Omid maintains consistency in their branding and has a professional online presence. I can’t wait to share the final design once it is launched.