GlobeMed

a redesign

User Experience User Research Front End Development

Overview

INTRODUCTION

GlobeMed is a nationwide student-run public health organization that has chapters all across the nation. Washington University’s GlobeMed chapter recognized the need for an improved website.

I led the visual redesign effort working with the executive team and am now currently developing the redesign with JAMStack principles in mind by myself.

PROBLEM

The past website was outdated with content and needed a visual redesign improvement.

Additionally, since it was hosted on SquareSpace, it ate into the chapter’s funds annually.

SOLUTION

An improved visual redesign with a focus on modern flat design. Currently developing using the JAMStack and hosting on less costly platforms.

ROLE

I am acting as the sole developer and designer coordinating with the GlobeMed executive team to ensure that the new website meets their needs.

PROCESS

Here's a general outline of my process.

Research

  • Exec Team Meetings

Synthesis

  • Problem Spaces
  • Core "How Might We"

Ideation

  • Guiding Principles

Design

  • Wireframes
  • Renderings
  • Color & Typography

Feedback

  • Stakeholder Feedback
  • Moving Forward

Research

EXEC TEAM MEETINGS

The primary responsibility of GlobeMed is to annually fundraise $20,000 for its partner organization in Uganda. Because of this, it relies heavily on its website to contextualize its mission and convince people to donate money.

The Exec Team approached me to build its website after recognizing it not only wasn’t doing a good job of getting donations, but was also outdated and costly.

The team gave specific expectations on the redesign. It should be modern, clear, easy to use, and garner donations.

I was given a flexible timeline, but was expected to have bi-monthly check-ins for progress.

Synthesis

PROBLEM SPACES

After hearing what the exec team wanted and auditing the website myself, I identified quite a few problem spaces.

Typography

One of the most prominent problems was the inconsistent typography in the website. Just on the home page, there were 5 different fonts being used.

Additionally, there wasn’t a clear system for font sizing in place. This led to a poor user experience because the type was so big that it made users have to excessively scroll.

Unclear Wayfinding

Another large problem area was the navigation/wayfinding. There are six different links on the navigation: “MDP,” “Our Story,” “Projects,” “Join GlobeMed,” “Blogs,” and “Donate.”

Many of these links such as “MDP” and “Blogs” were irrelevant as they were no longer initiatives that GlobeMed actively pursued. Others had unclear or unexpected redirects such as “Our Story” which redirected you to the home page, which isn’t immediately clear.

The order also didn’t make sense in terms of user flow. I was left wondering why “MDP” was before “Our Story.”

Excessive Visual Information

Overall there was too much visual information on the website pages and not enough whitespace.

CORE "HOW MIGHT WE"

How might we provide more clarity and compel users to engage through the GlobeMed website?

The main problem with the old website was the lack of clarity. There wasn't too little information, but too much and so it was really difficult to see what was important on a page.

Ideation

GUIDING PRINCIPLES

Reduce

I’m a big advocate of John Maeda’s teachings especially his “Laws of Simplicity”. In particular, I chose to exercise the first law “Reduce” as a guiding principle in this redesign.

“How simple can we make it?” instead of “How complex can it be?”

Reuse

Another guiding principle was reusing components and layouts to ensure a sense of familarity and comfort with users.

INFORMATION ARCHITECTURE

Using the two guiding principles, I simplified the architecture of the site so it was much clearer. By the end, I only had five links instead of the previous six links in the navigation bar.

Moreover, these were ordered to provide most context for users.

It's important to note here that Donate externally linked to a fundraising page at a third-party site, so I did not have to design that page.

Design

WIREFRAMES

Home Wireframe

About Wireframe

Projects Wireframe

Individual Project Wireframe

Join Wireframe

RENDERINGS

Home Rendering

About Rendering

Projects Rendering

Individual Projects Rendering

Join Rendering

Color & Typography

The previous design had five fonts, for this redesign I chose to stick with using Lato as my sole base font.

I chose Lato because of its modern look and ease of use. It's the 3rd most used font from Google Fonts, so I knew that I could use it when I developed the website out.

I chose a simple color palette and opted for a healthy amount of whitespace in my layout as well. This was to make sure that there weren't any competing visual information.

#8A1A21

#FFFFFF

#000000

Feedback