CONCUSSION ALLIANCE

youth overlooking a sunrise

OVERVIEW

SCOPE
This was a three person team project. Our client was Malayka Gormally, who is the co-founder of “Concussion Alliance”. We had three weeks to conduct interviews, gather data, create wireframes and high fidelity mockups and deliver a presentation.
MY ROLE
I was the visual designer for this project. This means that I did research on accessibility, studied color theory, created a style guide based on the original website as well as the new design, and redesigned portions of the new website based on user tested wireframes and client needs.
TOOLS
Sketch was the tool of choice throughout the redesign process. InVision brought the high fidelity mockups to life.

DISCOVER

CLIENT
Malayka and Conor Gormally, a mother-son team, co-founded Concussion Alliance as a grassroots organization providing concussion information from the perspective of concussion patients and families.
CLIENT’S NEEDS

After meeting with our client we were able to pinpoint some goals for the redesign:

  • Redesign landing page
  • Improve accessibility and organization of information
  • Improve branding/ visual design to transition to a "news forward" site
  • Redesign treatment overview page
  • Improve layout and organization of treatment information
USERS
A survey was sent out by our researcher to different concussion sites and social media platforms to better understand user needs. Here is the feedback we received:
“The main page feels dark like it should be on a depression site.”
“The images are small and hard to see.”
“I find it difficult to read long articles.”
“I want to know more about treatment for people with long term symptoms.”
“I want a simple layout.”
INITIAL DESIGN
new treatment page new medical page
ACCESSIBILITY
Accessibility is an important aspect to keep in mind when designing a website for any user but especially important to keep in mind when your users include people like Hailey, our persona, who deal with concussion symptoms including blurred vision, headaches, difficulty concentrating and so forth on a daily basis and can only consume small amounts of content at a time.
MARKET ANALYSIS

I turned to other websites that have similar mission statements

and goals as Concussion Alliance to determine:
  • What colors were being used?
  • What were the themes in the typography?
  • How were photos used to convey their message?
market research
OBSERVATIONS
  • The more effective home pages take a “less is more” approach. Fewer modules make it easier to find information.
  • Typography- Oswald font was used for News sites. H1 ranged from 18- 22 px. H2 ranged from 16- 26px. Body text ranged from 14- 20px. Headers are bolded and body is regular or light.
  • Color- Light color palettes are used and include blues and Greens
NOW WHAT?
Now that the client, users, and market were more understood, it was time to synthesize the data and define the problem.

DEFINE

RESEARCH
original designs
PROBLEM
The Concussion Alliance website isn’t meeting users’ goals of easily discovering concussion treatments and locating practitioners, which is causing user frustration and a high bounce rate.
PERSONA

HAILEY: 25 y/o

“I don’t know where to get help.”

User Goals

  • Learn about post concussion treatments
  • Find concussion specialists
  • Learn to care for herself after a concussion

User Pain Points

  • Unable to find resources
  • Overwhelmed by walls of text
  • Can’t find concussion specialists
  • Having no person to call for help
young woman looking at the camera
SOLUTION
By creating an intuitive navigation system and practitioner search feature, young adult concussion patients can find essential information about treatments and where to receive them.
MORE ON COLOR
A color test was sent out to determine what colors best conveyed the message of hope, trust and sophistication, words that had been used to describe the mission of Concussion Alliance. graphs of various color palettes user research results. a palette of blues won with a tally of 68% over the existing palette of reds and another palette with more purple
NOW WHAT?
The above color test results were a huge deciding factor in determinimg the new color scheme. The numbers were especially helpful when it came to defending my design decisions with the client. Now it was time to use the data gathered to develop a solution based on user needs.

DEVELOP

WIREFRAMES
The team got together and did a design studio where we quickly sketched solutions for the landing page and the new practitioners feature we had discussed with the client. Or interaction designer then used these desings to create her wireframes which she tested multiple times with users. The end result was an easy to navigate home page with a clear path to the treatment and practitioner features.
original designs
NEW STYLE GUIDE
Based on data such as the color test, the client's needs, and user feedback, a new style guide started to take shape.
new blue-based style guide

COLOR

The lighter blue and teal colors were pulled from the color palette test user results because they conveyed a sense of calm, hope, and healing. These were also colors that I saw being used often in other healthcare websites.

CONTRAST

Users needed more contrast on the site in order to improve readability. For this reason, dark blue and black text were used in the redesign.

TYPOGRAPHY

The first typography chosen was Oswald, a font found in a number of news websites. Upon further research, I learned that this was a very readable font. Open Sans was also used because it is often paired with Oswald, and is a good choice for readability.

The text size used (18-45pt) fell in the “Large or Ex Large” category when researching accessibility.

DELIVER

REDESIGN
The redesign was created based on the persona, Hailey’s need for a cleaner layout and accessibilty. This design also took into account the client’s mission, the tested wireframes, color theory, and readability.
original designs
MORE ON DESIGN
The “Treatments” and “Medical Care” pages demonstrates how visuals were introduced to help users navigate the text. Furthermore, a generous use of white space allows for a decrease in cognitive load. In addition, there are subtle uses of the color palette throughout the imagess to demonstrate continuity.
new treatment page new medical page

Final Color Prototype

LESSONS LEARNED
  • Study the visuals from your client’s website and other like websites to get a feel for what is appropriate in the field.
  • The client’s opinion is not king. Always test concepts with the users.
  • Define a timeline and set expectations with the team and with the client.
NEXT STEPS
  • Hand off designs to developer with clear instructions.
  • Redesign the website for mobile.
  • Create a robust news/blog page for material transition to Civil (a client favorite news website).
  • Highlight more personal stories to connect users to the site and mission.