OMF International

OMF International is an inter-denominational and international fellowship serving in 14 East Asian nations. This project was initiated to redesign the interface design, user flow, and user experience of the U.S. website.

This project was completed during my employment at OMF International in collaboration with the Communications Team.

Process
  • Research
  • Personas
  • Architecture
  • Sketching
  • Wireframing
  • Digital Prototyping
  • Style & Branding
  • Testing
Tools
  • Adobe XD
  • Adobe Photoshop
  • Gloo Maps
  • Draw.io
  • WordPress
Role
  • UX
  • Design
  • Front-End Direction

Defining the Problem

Excessive content and extraneous options/CTAS created a difficult experience for our users to navigate within the site. Our users were having a difficult time connecting to the different departments within the organization and they were feeling “overwhelmed” with the amount of information presented on the site. The blog did not create an environment for social interaction and feedback amongst our users. Here are a few design issues we repeatedly encountered:

  • Outdated interface design
  • Too much text promoted clutter
  • When users accessed the top nav bar, there were too many options
  • Not proper use of white space
  • How can we make it easier for our users to access these four departments: prayer, give, volunteer, blog?
  • Not mobile responsive on certain parts of the site

Goal

To create a platform that allows users to focus on building relationships with the various OMF departments, connects users to the U.S. OMF staff, continues to promote awareness of East Asian culture and history, and stimulates conversations via our blog.

Solving For: OMF blog readers, staff, retirees, missionaries, donors

BEFORE

Personas

We sought to understand and empathize with our users as best as we could. Along with conducting one on one interviews, observations, and viewing analytic trends, we also created personas based on our ideal user types. Based on our research, we created personas ranging from users who were interested in serving opportunities, users who were giving opportunities, and users who were looking for blog information. The utilization of personas helped us guide our design ideas.

User Flows

We created user flow diagrams to evaluate the efficiency of the processes needed to achieve the user goals and how the user would reach them.

Site Maps

Our goal was to improve the hierarchy and navigational structure of the website to create a better streamline process for our users. We were able to reduce the amount of link options in the original site’s header navigational menu from 75 link options to only 13 link options. We instead restructured the footer menu to include some of the link options that originally contributed to the “clutter” in the original header navigation menu.

Here’s the original top navigation bar

Here’s the new top navigation bar

Sketches

We iterated low-fidelity sketch prototypes followed by computer designed wireframe prototypes; this allowed us to present the information on a real screen. We later discussed which design and branding language we would follow in conjunction with OMF International branding guidelines to maintain a cohesive design.

Prototypes

See Live Prototype: https://goo.gl/7nt9WJ

Colors & Material

Turquoise

#00B1B0

Gold

#F1CB00

Red

#EF3E42

Typography

Arvo

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Open Sans

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

User Testing & Feedback

We were able to showcase the project at the 2018 OMF U.S. National Conference in Denver, CO in front of over 250 people. The conference consisted of donors, staff members, family members, volunteers, and retirees. Ages ranged from people in their early 20’s to 80’s. We created a survey and asked in-person questions to collect feedback for our prototype. Here is some feedback that stood out to us.

Redesign Summary:

  • “Give” CTA is significantly more noticeable, which provides immediate access to our giving platform “PartnerHub”
  • Users felt the new site improved in readability or promoted less clutter – less but more precise information available
  • Users believed blog was easier to find information and connect on social media
  • Better structured navigation menus in the header and footer – easier navigation for our users
  • Consistent page layouts and guided CTAs helped connect user with specific departments more efficiently than before

See Live Site: https://omf.org/us2