Liam Speranza's profile

ideas42 - UX/UI Design

ideas42 - UX/UI Web Design
Role: UX/UI Designer

Project Overview
ideas42 is a non-profit consulting firm that uses the power of behavioral science to improve tens of millions of lives around the world and solve today's most complex social problems.

For several years, ideas42.org had not been fully redesigned. Various pages throughout the site had been updated, such as project pages and team updates, but overall the entire site was needed a visual update, dead-end user flows, and a lack of clarity surrounding their projects. In mid 2018, the decision was made to start investigating a redesign and re-architecture of the site. Given my experience with digital communications, web design, and user research, I was chosen to lead this redesign effort, collaborating with not only graphic designers and developers, but also the communications and leadership teams.

Visual Brand Update
After the website update in 2015 and the web agency refreshed the visual appearance—adding in the fonts and developing the color palette that is currently utilized. Because effort/time was spent on that front, it was then adopted for the growing publications and communications that started in design with the non-profit’s graphic designer. With the release of ideas42’s Impact Report, I utilized an updated shift in the brand’s color palette and reflected via the new website design.

Previous Color Palette:
Muted, complex shades. Conveys seriousness and conservativeness. Gray has too much focus as a primary color. Light blue doesn’t reproduce well. Doesn’t convey who ideas42 is in the current age.
Yellow is accent, but hue fits strangely with palette—more skin-toned. Red is also an accent, but communicates danger and doesn’t fit with palette or ideas42 values.

Modified Color Palette:
Updated, vibrant and contemporary shades. Addition of medium green to bridge the bright green and dark blue to provide a cohesive set. Drops gray to secondary. This is fresh, current, and modern—reflecting who ideas42 is now.
Yellow is accent that fits with palette. Red is dropped and replaced with orange for vibrancy and energy. Gray becomes a supporting accent when needed to ground other colors.
Information Architecture/Site Map
Existing Site Evaluation:
When beginning the project, my first priority was determining which pages from the existing site would be kept, which could be migrated or combined into new pages, and which should be retired. To do this, I first created a site map diagram of the existing site to catalogue all existing pages as well as illustrate the lack of user flow within the site.

Original Site Map:
After conducting interviews with stakeholders, team members, and clients, I used card-sorting methods to identified user-flow issues, such as inconsistency within the site architecture.

Final Proposal:
Several solutions were brought to stakeholders, including C-level management, for discussion and evaluation against ideas42’s desired market positioning to determine the final proposal.
In the end, the final sitemap wherein the user can browse ideas42’s services from a high-level view and was determined to be the most in line with ideas42’s philosophy of making behavioral science ubiquitous. The main goal was to ensure that users could view all of the organization’s services, while also separating their portfolio work by goal areas.​​​​​​​
Tools: Adobe InDesign

Creating Main Pages
Once the visual design language was established, I began working on wireframes for the first three pages we intended to release: the homepage, the projects landing page, and individual project pages. Once approved, I developed the UI and functionalities for the site with a team of developers and other designers to ensure the user flow matched the user’s visual experience. Throughout the process of designing these pages, I worked closely with the Director of Communications to iterate on messaging and copy, and to ensure quality. In addition to written content, I developed photography assets for the pages, and ensured they were responsive, compressed, and retina-ready for web.

Tools: Sketch, Invision​​​​​​​
ideas42 - UX/UI Design
Published:

ideas42 - UX/UI Design

UX/UI web design for non-profit consulting firm

Published: