The Summary
2019
Client: The Macula Foundation
Focus: Brand Identity + UX Design + Web Development
For over 40 years, the Macula Foundation has committed to a mission of preventing and restoring vision loss by raising awareness and furthering knowledge in the macular disease field. Since its founding, the organization has successfully raised and distributed over 50 million dollars towards this purpose.
With the understanding that strong branding and digital presence were the next steps to expanding their successes, The Macula Foundation approached our team for a new logo and website design.
Our main goal was to translate the organization’s story, history and mission into a distinctive logo and impactful website. The Macula Foundation’s existing logo consisted of the full name on a single line, which looked unwieldy because of its long length. The existing website was also difficult for general audiences to navigate because of its overly-academic content and lack of visuals.
Since The Macula Foundation needed their message to reach everyone, not simply academics or physicians, our team’s task was to design and build a new and compelling brand identity and website for a broader audience.
No items found.
No items found.
No items found.
Powerful, memorable branding
Our logo for Macula Foundation was designed to be simple yet distinguished; reflective of the organization’s overall style. For the overall color palette, we chose blue and white — blue especially for its relation to healing and life, which ties into The Macula Foundation’s mission.
The logo pairs the organization’s name with a distinctive core mark. The lettering is in sans-serif font, chosen for easiest readability as well as for its clean simplicity. The core mark is fashioned out of pinpoints that form to shape an eye; pinpoints which reflect the feel of tactile writing for those with vision loss.
The pinpoints in the eye gradually transform from dark blue to sky blue as it reaches the “pupil”, which itself is represented by a large circle or ray of white. This transition represents the expression of sight, as well as the hope of vision restoration, which is key to The Macula Foundation’s purpose.
Impactful storytelling and design
We knew that The Macula Foundation's story was a special one because of its early start as an innovator in the macular disease field — we wanted for audiences to recognize this from the minute they landed on the website. We designed a special landing page that would guide audiences through The Macula Foundation’s story and key messages. Upon scrolling down the page, visuals and fading transition effects combine for a cinematic and engaging experience.
Additionally, we built a unique Timeline page that showcased the organization’s major contributions to the macular disease field. As with the landing page, this page is designed to immerse audiences. To deliver The Macula Foundation’s story most effectively, the website has a clean and elegant aesthetic. The color palette, which is monochromatic with bronzes and the occasional sky blue, is modern, yet distinguished and classic.
Intuitive and responsive website, with compelling call-to-actions
The Macula Foundation is carrying out an important mission by raising awareness and actively fighting macular disease through the facilitation of training and research. For our client’s message to reach their widest possible audience, responsivity was built into the new website. Compelling call-to-actions to contribute and help with The Macula Foundation’s mission are also woven throughout the website. These appear on key pages, and usually pair a macular disease statistic with a call-to-action button that guide audiences to the Donate pages. The Donate pages offer a few different ways for audiences to contribute, including online — an important addition given that the organization previously only received contributions through mail and in-person.
The Solution
Crafting a logo that communicates brand and values
We sat down with The Macula Foundation team to explore their story. Understanding their organization’s background and values was crucial to developing a design for their logo. We learned that their organization was one of the very first to be established in the field, a fact that made their history particularly unique; and was especially devoted to the pursuit of furthering knowledge towards fighting macular disease.
Our team created a color palette and mood board inspired by The Macula Foundation’s story. From there, we designed a few core concepts. After close review and discussion, we finally chose an option that most powerfully communicated the organization’s identity.
Building an effective site map and design
Building an effective site map and design As part of our discovery phase, we also gathered insights about The Macula Foundation’s key audiences, so we could understand how best to effectively shape their new website and messaging strategy.
This helped us identify that the organization needed to reach physicians and experts in the field, as well as regular audiences who were interested in contributing to raise awareness and facilitate research.
We used these discoveries to build a site map structured to speak to both audiences. This guided the wireframes, that were then transformed into visual designs reviewed closely with The Macula Foundation team. Finally, the selected designs were turned into an impactful website with intuitive language and navigational flows for audiences.
The Process
The Result
With its easy-to-navigate, responsive experience and impactful branding, the new website much more effectively helps The Macula Foundation to reach their audiences and continue working towards their meaningful mission of preventing and restoring vision loss for those with macular disease.
- Dec 2017: Star Award in CSS Winner
- Feb 2018: Featured on Adobe XD
- April 2018: Gold Award in Muse Creative Award
Team
Design Leads: Sean K.
Tech Leads: Rob R.
Project Management: Danielle R.
Design: Sean K.
Development: Rob R.
You may also like this