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.
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.
An improved visual redesign with a focus on modern flat design. Currently developing using the JAMStack and hosting on less costly platforms.
I am acting as the sole developer and designer coordinating with the GlobeMed executive team to ensure that the new website meets their needs.
Here's a general outline of my process.
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.
After hearing what the exec team wanted and auditing the website myself, I identified quite a few problem spaces.
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.
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.
Excessive Visual Information
Overall there was too much visual information on the website pages and not enough whitespace.
CORE "HOW MIGHT WE"
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.
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?”
Another guiding principle was reusing components and layouts to ensure a sense of familarity and comfort with users.
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.
Individual Project Wireframe
Individual Projects 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.
I've been trying to keep as transparent about the design and development with the GlobeMed team as much as possible.
Things that have changed and improved as a result include:
Font - Helvetica Neue to Lato
Navbar Background Color
I'm currently developing the website using a static site generator, Hugo. Since future maintanability is key I've also been learning how to use Contentful to hand off the website to non-technical individuals later on.
I've also been keeping SMACSS in mind for architecting my CSS for maintainability.
I hope to finish developing and deploying this website within the next month or so and will be posting updates here.
Feel free to ask me any questions about the project and thanks for taking the time to read this!