SUMMARY
I worked on a project in which the challenge was to redesign a public-facing website for a humanitarian aid technology service. The company is somewhat complex and unique in how it works, so users were often confused what the company did when coming to the existing site. My task was to do user research to formalize an information hierarchy, create wireframes, and rebrand the company with visual designs to balance the concepts of connectedness, innovation, and simplicity. My solution was a bold redesign that better explains what the client does, invites visitors to explore the site, and provides a modern, forward-thinking feel.
YEAR
2022
PURPOSE
Professional
TOOLS
Figma
STYLE GUIDE AND DESIGN SYSTEM
I chose a sans serif typeface for the majority of the text, Helvetica Neue, with a more inviting serif typeface, Big Caslon, for headings, to balance the clean, utilitarian, technology-focused side of the company, with the fact that it is powered by, and bases itself on two-way communication between people. The color palette holds an even hierarchy of 7 saturated colors to represent the many countries, contexts, and crises that the client assists with, as well as to provide an engaging variety of visual cues for the visitor. Beyond this, black and white are primarily used, and a greenish-gray occasionally acts as a buffer. The site is designed to be simple, so it relies on these colors as a main factor in separating sections of content. The site also features 2px thick black lines as a repeating element above lines of text, between sections, and in the animated landing page. The black lines on their own mimic lines of text, which reflects the importance of 1-on-1 messaging between people in crisis and agents who can assist them to the functioning of the company. The desktop site runs on a 24 column system, details of which can be viewed by selecting the frame, and pressing the eyeball button on the right side menu of the screen to turn on grid visibility. There are 24 columns, which are each 24px wide, with a 32px gutter between each of them. They are centered to the screen. There is also a grid system which helps place elements in even proportions and distances from each other. The grid system uses an 8px base, which means elements are generally scaled to be either 8, 16, 24, 32, 40, etc etc pixels apart from each other.
INFORMATION HIERARCHY AND PAGE STRUCTURE
The first step in this project was to conduct interviews with various stakeholders and users of the website in order to get a well-rounded perspective of what the company does and the story it tells about its history, capabilities, and goals. From this, I created a design thinking template to use with a stakeholder on the client side. We used sticky notes to record every point made in interviews regarding dream aspects in the website, important points to make, etc. We moved the sticky notes around and reorganized them into sections in order to come up with a functional information hierarchy that would help new visitors to the site understand the company.
​
From this hierarchy, I recommended that we use fewer site pages that were long and scrollable, and had internal anchors on each section of content. This would encourage new visitors to effortlessly continue scrolling and to read more about the company, but also allow visitors looking for specific content to find it in the dropdown of the navigation an be automatically scrolled down to the desired section. These long pages also allowed the navigation bar to remain airy and uncluttered, with few pages, and clear, connected sections within each of them.
LANDING PAGE AND HOME PAGE
To encourage one of the keywords of "innovation," we decided on an animated landing page to quickly attract the attention of the site visitor and include modern, forward-thinking dynamism. This animation combines the color palette, which represents the scalable, customizable solutions the company provides in many different country contexts. It also includes the logo and tagline, as well as the repeated elements of the black lines to represent the messaging aspect of the company's services.
​
The home page acts as a summary for the remainder of the site, and provides a snippet of the content of each section on the other pages. After the landing animation, the visitor sees impactful statistics as they scroll, which dissolve into a colored image texture on hover. After this and a short summary paragraph, each snippet is highlighted by a colored area, and has a button that links the visitor to the corresponding page and anchor section. After each snippet is a footer which they can also use to access any section of the site.
MAIN PAGES
The navigation section "Who We Are" gives specific information including the history of the company, the new country programs they have developed as they've grown, a scrollable narrative map I designed using Mapbox, impact stories and press articles, evidence in the form of statistics and a white paper, as well as a statement on the companies goals for the future.
​
Then navigation section "How We Work" is a more high-level blueprint for how the company functions, and pulls the visitor through the steps that are needed for the company to create new country programs. This section includes information on how a program launches, how content is created, and a glimpse at the ways a program might look or be discovered. It also includes content on the people who make the company work, the technology that powers it, and the partners that work with it to make their work possible and better.
​
The last navigation section "FAQ" serves as a quick way for visitors to get clarity on questions they have about the company, or be quickly linked to an existing section on the site that will provide more context for their question.
