Back

Americares Web Presence

Delivery

  • Document Functional Specifications & Technical Product Requirements
  • Provide Global Theme Designs for Pages and Block Modules
  • Content Migration

Roles

  • Lead, UX Design Systems
  • Assist, Brand Guidelines
  • Assist, UAT for Engineering

Products

  • Americares.org
  • AmericaresFreeClinics.org
  • AmericaresIndia.org
  • Other Various Americares Properties

Design Brief

On September 12, 2016, Americares unveiled a new logo and visual identity that’s reflective of its growth and transformation to a global organization and a key player in the global health field. The rebranding came at a time when Americares, best known for its emergency relief work and medical aid deliveries, was expanding its programming to include more health services in under-resourced countries. Our tiny team three paired up with a branding agency to realize and take the design to market and provide a whole new experience – taking point in leading several front-end needs.

The Approach

Our team was given 5 months to replatform several sites from Convio CMS, rebuild and rearchitect the theme to an Episerver CMS, and incorporate in-progress rebranding design elements into the overall design. This required a lot of rapid iterations and quick turnarounds internally, my team was on point to synthesize this convergence of three different product streams: (a) being a voice in the ongoing rebranding of the organization, (b) refining the site for updated business requirements, and (c) translating into wireframes for the front-end engineering team to produce as block modules. This required thinking about quick sprint-based solutions that emphasized scalability, customization, content distribution and flexibility as we iterated and incorporated continuously developing upstream productions.

A key focus of the new digital platform was to build brand awareness and engagement via the incorporation of engagement opportunities. In addition to increasing brand awareness, the content itself was being reviewed to strengthen the relationship between Americares and its donors, employees, volunteers, etc.

In order to give the development team enough lead time, we rapidly conducted the interview process, journey mapping, and persona building. This involved a divide-and-conquer strategy for the team-- which included a few internal volunteers at this point-- to conduct. In all, we gathered enough insights from our board (internal stakeholders) and a few donor volunteers within the span of a eight business days. We creating detailed journey maps to visualize user interactions and pain points, and developed user personas to empathize those specific user needs and behaviors.

Concurrently, we were finalizing our platform of choice (Episerver) and sought strategic recommendations for integrating digital platforms with the goal of either migrating them under one umbrella or providing appropriate navigation to them from the primary site. The core design applied to all sub-sites or sister sites of Americares.

Phase two deliverables included our team to translate business needs into modular wireframes, with enough time to create multiple rounds of revision.

We designed low fidelity mockups of key features for our Desktop, Tablet and Mobile interface breakpoints including in depth notes on planned activities for each feature. We found that most of our previous site needs were still needed but years later our users valued additional interactivity and information scent that is (1) proactively utilized and (2) personalized to the situational context.

Our team needed to adjust our core content modules to effectively promote scrolling-heavy behavior changes and that also motivated participants to reach in depth content mcuh quicker. From background research, we discovered accordians, jump links, and breaking up into smaller pages were successful in promoting behavior change and named them as standards to include in our Wireframe solutions.

Design for Prototyping

As the team lead for the design process, I began to get branding guidelines from our Agency partner which proved a pivotal phase in the product development lifecycle. I decided on being bold with the palette with the creative exploration as I pulled apart and revised elements to experiment with form and function. With enough feedback, I iterated rapidly and applied elements to visual wireframes for the team and ideated across the board as needed (and noticed). In all, the Americares-centric creative concepts and design theories converged to shape a unique user experience.

We won't get into the herculean effort our team undertook to get all the content translated from one proprietary platform into the next! :)

To give the developers enough lead time, we focused on completing/approving our core modules before expanding out into more complex territory. The erves as a tangible manifestation of design theory, allowing designers to explore ideas, test interactions, and refine user interfaces before final implementation.

The Outcome: Building Empathy, Building a Global Brand

The website rebranding and replatforming enhanced our online visibility by several KPI measures and key site metrics, marking a transformative leap forward for our organization. By strategically realigning our digital presence with our rebrand, our core values and global mission, the updated website presence served as a dynamic reflection fostering a sense of empathy and connection with our diverse audience.

Through thoughtful user experience enhancements and visually compelling storytelling by our content and multimedia teams, the website now engages visitors on a deeper level, actively bolstering our credibility and relevence.

The rebranding efforts online and offline have led to a noticeable increase in website traffic, longer session durations, and a higher conversion rate.

In 2019, we replatformed again to a Wordpress environment which better suited our needs.

Always Available for freelancing

  • Location:

    Naugatuck, Connecticut

  • Email:

    moconnelldesign@gmail.com

  • Downloads: