Front End Coding

The general goal of the website is to increase “buzz” about CRAB by providing awareness of their expertise in oncology clinical trials and to develop collaborative opportunities. More specifically, they want to use the website to gain clients/new business, inform about CRAB, seek donations, and (eventually) provide a resource where people can learn about cancer by providing links to public health information and publications

The Problem

  • The old CMS system to manage contents
  • The current website style is outdated
  • Too many contents for users to read
  • Lack of consistency in different pages
  • Not responsive

The Solution

  • Use bootstrap to rebuild the site
  • Create 4 directions for clients to pick
  • Use sliders or carousels to organize contents
  • Use the same system for user to nav between pages
  • Layout that is easy for client to edit or add contents

Design Direction

Created four design directions with lots of variation in styles and content management. I was trying to give my client more options of nav systems and solutions to display contents without letting users feel overwhelmed.

Mobile Styles

Pick Of The Style

As a result, my client eventually prefers direction D the most. I am also glad to see that they want to adopt some elements from other directions. It's very time and effort effective for me to change the base theme and combine the things they like to recreate a new style which meets their needs.

Color Choice

Since is an unprofitable organization, it's important to deliver a healthy and positive appearance to the users while it's also the main goal for the choice of color palette.

Palette A







Palette B







Font Choice

Title Font - Gotham Bold

Text Font - Open Sans Regular

Proof Of Concept