BCM Website Redesign

The challenge of updating an outdated site in order to increase visits by college students for the coming Fall Semester.

 

Meet our Student, Mia

 

Mia Jones

User Persona

Mia is a Freshman at Virginia Tech where she is studying to become a Dietician. When she's not in class or studying, Mia spends her time trying out different campus organizations to meet new people. Mia is also passionate about her beliefs and is curious to know more about the campus ministry, BCM. Mia needs a quick and reliable way to find out if their beliefs are in-line with her own, what the culture is like, and ways to get involved.

-------------------

Target audience - busy college students curious about Christianity who wish to build friendships during their college experience. 


These students need something that's simple and quick to navigate and provides highlights for events and ways to join that makes finding an organization easy.

Female Student
 

Goals:

  • Find their beliefs and what their culture is like

  • Quickly find ways to get involved

  • Find out more about upcoming events to attend

  • Wants to make long-lasting friendships with people who share the same beliefs

Frustrations:

  • Busy class schedule and homework

  • New to college and unfamiliar with the area

  • Worried about finding good friendships

 

Problem Statement

Mia Jones needs a way to quickly and easily find out more about the campus organization, BCM, because she's interested in finding a group to join that shares similar beliefs where she can form long-lasting friendships in college.

 
jose-alejandro-cuffia-799485-unsplash.jp

Ideation Phase

 

Sketching out all possibilities

After we realized the needs for the students and the website's current state, we decided just to scrap everything we currently had and to start from scratch. This way we were given free-range in terms of design and functionality.

We knew the site needed to be modern (including a clean design with sleek and easy to read fonts), simple and easy to navigate, and most importantly provide the right information that students will go to the site for.


The previous design was an outdated Wordpress theme from the early 2000's. We needed this to match what other sites looked like at the current time of 2015. Our hope was that by doing so, students wouldn't be deterred or turned away by a site that was "boring" and "ugly".

We made comparisons with other campus ministry sites, such as CRU, and took those similarities and differences to create our new look. If other students are looking at other ministry sites, then our site needs to match if not exceed those user expectations when comparing sites.

 

Code It Out

After months of sketching and mockup designs, we finally came up with this end solution.

 
homepage.PNG
about_us.PNG
633.PNG
groups.PNG
events_all.PNG
 

Home page

This is your first introduction to the BCM. Here, we applied a clean and modern design to the page and added simple and easy to understand navigation along with links to the social media connections.
The main photo is a part of a carousel of slides that share more information about what is going on in the BCM. It's an easy way to feel connected and intrigued to learn more.

 
small_groups.PNG

Small Groups

Small Groups are one of the major aspects of joining the BCM community and getting involved. We decided to go with a creative way of highlighting these to stand out more from the rest of page by creating these colorful bubbles.

 
modle_popup.PNG

Find Out More

Once you click on a Small Group, we added this modal popup block to introduce you to the current members and leaders along with when/where they meet.

 
events_expanded.PNG

Accordion Event Calendar

We implemented an accordion folding style calendar to display upcoming events at BCM. Once you click on an event, it unfolds to show more information about that event. It allows the site to contain all the necessary information, but only to display it when the user wants to view it.

 

How Do I Get There?

We decided to add to the site the simple graphic they use on all of their print media to easily display their location. Every student on campus should know Washington St. and if you follow all the dorms down that street, you'll be able to easily make sense of this map. Adding this to our About Us page allows students to easily access the BCM building location.

 

Going Mobile

One thing the previous site lacked was a mobile-friendly design. You would pull up the BCM's site on your smartphone and see the entire webpage as you would see it on a desktop screen. Eek!

With the ever increasingly mobile world, we took on the challenge of creating a mobile-responsive site.

 

Mobile Approach

The main landing on a desktop gets shrunk down to a mobile phone screen where everything is simplified.

When students are on their phones searching the web, it's because they are on the move or need to gather information quick.

So we removed the carousel and made the podcasts, about us, and events more easily obtainable.

We also made some other features more easily obtainable and navigable.

The Menu Navigation Bar gets converted into a dropdown menu to make selection easier with finger tapping.

The text on each page is made more legible and easier to read on smaller screens.

 
IMG_3576.png
IMG_3577.png
IMG_3578.png
IMG_3579.png
IMG_3581.png
IMG_3580.png
IMG_3586.png
IMG_3585.png
IMG_3583.png
IMG_3584.png
 

Let's Look at the Metrics

Yearly overview

 

Google Analytics

In summary, you can see a healthy usage of the site throughout the year.

Almost a 55:45 ratio for Desktop vs. Mobile Device usage.

The most popular visit times during the week are between Monday - Wednesday as students are looking up Large & Small Group events and information for Tuesday, Wednesday, & Thursday evenings.

We're getting a ratio of 3:1 ratio of returning vs new visitors. This is good for getting people introduced to the BCM, but what's making them not return to the site? Further investigations will need to be studied upon.

The most directed ways someone reaches the site are either Organically, Direct, or Social Media.
Most sites are to see information about small groups, about the BCM, and for leadership members only pages.

mobile-usage.png
time-of-day.png
new-visitors.png
page-visits.png
yearly-review.png
top-channels.png
 

Let's Wrap it Up

Whether in the middle of class or in a hurry, the newly mobile-friendly site can help you find out more about BCM in a matter of a couple of minutes!

With the newly redesigned site, students like Mia can now easily find out more about when and where she can attend events and how she can make lasting friendships with people who have similar interests.

bcm.jpg
 
  • LinkedIn
  • Instagram

©2020 by Haley Bengtson