Collaborators: Melanie Cho (Design), Jonathan Chun (Content)

Background

Awe & Reverence (A&R) is a Christian software company committed to building God-glorifying applications. A&R is bringing modern technology into an ancient faith. We are building individual applications to focus on specific aspects of Christian worship. These applications will be a product that people need, but don’t realize that they need it yet. We strive to build for the lowest common denominator for these Christian applications.

The Problem

After carefully looking over the website, the following concluded on why this website needed to be redesigned:

The Solution

We redesigned Awe & Reverence’s (A&R) website to provide individuals with more meaningful information about the company, what we’re building and why you might want to join us. This would help establish trust and confidence in using the other sources that A&R is building.

A&R Founder Interview

• clean and minimal design concepts

• new application submission form

• provide ways to hire translators around the world

Competitive Analysis

How do other Christian websites/apps share the same vision in their own unique way?

• Company stories being told

• Accessibility for all sources and tools being offered

• Opportunities for users to join/connect/get involved

1. YouVersion

   • simple and straightforward with what the vision is

   • product is introduced on navigation bar, middle of the home page and footnote

     • no clear indication of CTA’s on the home page as clickable, easily mistaken as just titles

   • opportunities to get involved is on the navigation bar, middle of the home page and footnote

2. FaithTech

   • provides more in-depth information along with a video

   • no specific product being introduced other than joining the community

   • opportunity to join the movement is introduced on the navigation bar and middle of the home page

     • footnote provides other ways to stay connected in FaithTech

Wireframes

We started this phase by sketching with a pencil and paper to jot down all the ideas for this clean and minimal website. We wanted a clear structure of this website before working on the visual and content portions.

Design v1

We started to sketch out the first home page concept with the structure in mind. Then we decided to work on additional home page concepts that will help the team options on the website design.

Usability Testing

During my usability testing, I asked my participants to point out which design was their favorite and why. Some feedback from my participants were:

• “we’d prefer to go with a design/layout that works well as a mobile-responsive design”

• “I like the 4th one, personally, because pictures will keep me scrolling more than words.”

• “I do like the banner design of #1-3 in that they take less screen real estate compared to #4”

• “I like the fact that in #2 “who we are” section precedes “from our blog” and also the navigation bar is offset to the right at the top”

Design v2

After reviewing the feedback, we applied it to the next set of sketches. We designed two concepts for each page and did another usability testing before starting on our High Fidelity Design.

Ideal Flow

We also had an ideal flow to show the participants what we were envisioning for our website. The participants were given two versions of the ideal flow. The first version was just a black and white flow. The second version included some images and content to showcase the visual of a “finished” look for A&R’s website.

Usability Testing

During this usability testing, the participants were given a more finished looked design than before. Some feedback from the participants were:

• contact page “tends to be really spammy”

• “quick blurb for each on the about page, but standalone pages for each [vision, team and apprenticeship] to expand”

Using the feedback from the participants, we started to adjust and revise the designs for each page. Adding some of the revised and new written content provided by another team member.

High Fidelity Design

Home

The Home page needed a design that was welcoming but informative of who we are and what we are offering. We wanted to give the users multiple ways to access other pages. Aside from the navigation bar, the users are given CTA’s for each section that will lead them to the other pages.

About

The About page provides not only the Vision of Awe & Reverence (A&R) but who is part of this team. We are hoping to build trust with our users by being transparent and sharing information.

Blog

The Blog page was overwhelming because the content preview was the entire post or almost all of it. We wanted to simplify the content by giving enough context to spark an interest in each post. By having a simpler preview, the user has a choice of whether they want to read the entire post or not.

Apprenticeship

The Apprenticeship page was an important opportunity we wanted to highlight for our users. Since we were uncertain about the Contacts page, it was our best interest to replace that page with the Apprenticeship page. It was important to incorporate a different contact method because of the previous feedback about being spammed from the fill out a form. By giving an email address that people can send their message of interest in this apprenticeship, we are hoping to minimize the spam mail.

Takeaways

Awe & Reverence website redesign was challenging because we had to be flexible and understanding when waiting for feedback from the team. But we learned from the research and others on how to successfully redesign A&R’s website. Some future steps for Awe & Reverence’s website:

1. Revising some of the website content

2. Gaining the interest of aspiring software engineers to join our apprenticeship

3. Translating all the design work onto the website