youth overlooking a sunrise


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.
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.
Sketch was the tool of choice throughout the redesign process. InVision brought the high fidelity mockups to life.


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.

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
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.”
new treatment page new medical page
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.

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
  • 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 that the client, users, and market were more understood, it was time to synthesize the data and define the problem.


original designs
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.

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
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.
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
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.


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
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


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.


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.


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.


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
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

  • 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.
  • 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.