United Way New Mexico

image
image

When I jumped into The Creative Group, my first assignment was to work with Upleaf in the redesign of the homepage for United Way New Mexico. I was in charge of diagramming the architecture for the first phase of deliverables. After that, we’d move into wireframes to finalize with the UI design.

An update

This project was pretty much the design of a one-page site. The client was concerned that the New Mexico branch was falling behind in time compared to the rest of the other United Way websites. The company had recently updated their style guides, and everybody was adopting the full-width hero image approach. So, to keep it consistent, my first steps were:

1. Get the United Way style guides

2. Research the most relevant branches and the branding they were applying

3. Read about one-page conversion rates and the best layouts to achieve that

After having that, we had a meeting with the stakeholders to understand better their product. And what was the goal behind the decision of a redesign?

Dealing with constraints

I worked with a lot of creative freedom in this project. The only downside was the time. I had 8 hours to run through this whole process.

The challenge was how to maximize the time without having to design components that would take hours to customize. For good or bad, the new design trends of one-page websites are very similar. So I didn’t need to work on a particular grid, I just used the 12-column approach, and horizontal blocks of information to indicate the different sections.

Many of the information expressed was very technical or expressed concepts (“Give,” “Advocate,” “Volunteer”). The hardest part of dealing with this is that every single person has a different perception of what these concepts mean. And this equals too many hours discussing what’s the best pictogram, illustration or icon that can suit the best.

Due to time constraints, it came very handily to me to have a library of images already built.

I have to say there was no customization in these icons. It was more about finding the right one and suggesting it.

A team of many

I had to rely on other people’s research to get insights about the user experience. My biggest sources for this project were marketing/testing websites such as Unbounce and Leadpages blogs. They have a huge research team, plus this wasn’t the right time to try to reinvent the wheel.

The project finalized for me right after delivering the designs.

Design a landing page

In less than 8 hours

Description

One page responsive website layout.

My role

Architecture, Interface

The story

When I jumped into The Creative Group, my first assignment was to work with Upleaf in the redesign of the homepage for United Way New Mexico. I was in charge of diagramming the architecture for the first phase of deliverables. After that, we’d move into wireframes to finalize with the UI design.

An update

This project was pretty much the design of a one-page site. The client was concerned that the New Mexico branch was falling behind in time compared to the rest of the other United Way websites. The company had recently updated their style guides, and everybody was adopting the full-width hero image approach. So, to keep it consistent, my first steps were:

1. Get the United Way style guides

2. Research the most relevant branches and the branding they were applying

3. Read about one-page conversion rates and the best layouts to achieve that

After having that, we had a meeting with the stakeholders to understand better their product. And what was the goal behind the decision of a redesign?

Dealing with constraints

I worked with a lot of creative freedom in this project. The only downside was the time. I had 8 hours to run through this whole process.

The challenge was how to maximize the time without having to design components that would take hours to customize. For good or bad, the new design trends of one-page websites are very similar. So I didn’t need to work on a particular grid, I just used the 12-column approach, and horizontal blocks of information to indicate the different sections.

Many of the information expressed was very technical or expressed concepts (“Give,” “Advocate,” “Volunteer”). The hardest part of dealing with this is that every single person has a different perception of what these concepts mean. And this equals too many hours discussing what’s the best pictogram, illustration or icon that can suit the best.

Due to time constraints, it came very handily to me to have a library of images already built. I have to say there was no customization in these icons. It was more about finding the right one and suggesting it.

A team of many

I had to rely on other people’s research to get insights about the user experience. My biggest sources for this project were marketing/testing websites such as Unbounce and Leadpages blogs. They have a huge research team, plus this wasn’t the right time to try to reinvent the wheel.

The project finalized for me right after delivering the designs.

The Project

Task:

  • Generate a design for a website, based on wireframes provided.
  • Format: PSD

Materials provided:

  • Online strategy guide (useful just for background purposes)
  • Site map
  • Approved wireframe
  • Client logo
  • Branding guidelines
  • Images

As for the visuals:

  • They like the design and feel of this website: https://charliegrant.org
  • For the sponsor logos toward the footer you can use the logos in this footer: http://www.centerfornonprofitexcellence.org
  • For the photos (main hero area, photos for news items under "Updates", photos for "Success Stories") you can use any of the attached photos. We will adjust the titles of the news items and success stories to match the photos you choose.
  • For the graphics (icons for Give/Advocate/Volunteer) please use icons you feel work with the design and idea. You probably have some good sources. We often use https://icomoon.io
  • For the 4 main graphics under "Every day we make positive change in central New Mexico" if you can do some basic infographics drawing on the messages included in the wireframe under each, that would be great This page does a nice job of helping some stats come alive, with several different takes on graphics: http://www.charitywater.org/whywater/

Tools:

  • Adobe Photoshop
  • Adobe Illustrator
  • 960 Grid
  • Font Awesome Icons

Steps:

  • Compile all the assets
  • Read the style guides
  • Get font files > Varela Round
  • Website styleguides file (.ai)
  • Define components (sizes and hierarchy, headings)
  • Create psd with grids
  • Apply copy and create layers
  • Illustrations
  • Icons

Iteration 2

  • Overall. Expand images and navigation bar to full width (assume a 2000px sheet) - similar to https://charliegrant.org
  • Font. Make headings larger, thinner. (maybe try a different font, something rounder, closer to Avenir or Julius Sans One?) Google Fonts, like you used before is a great approach for us too. Varela Round
  • Hero Area. Use a photo of people for the main hero area instead of the skyline (try the attached photo) and make the "Get Involved" button smaller and maybe a different color
  • Donate. Make the "Donate" in the navigation bar an orange button so it really stands out
  • "Every Day" Images. Let's give this area grayscale tones, shrink the icons, let the number stand out. Be consistent with the thousands separator. Don't duplicate the number in the text below.
  • Special Programs. For the "Special Programs" block we like the background and can create a nice parallax effect with that. Make it taller. BUT we think the program buttons should be a solid, translucent color so we don't have photo on top of photo. Play with text-size and background block size to achieve an appealing, balanced layout. If icons make sense, add some that are relevant. Up to you, once you make the other changes.
  • Make a Difference Where You Live - please decrease the size of the icons and increase the size of the call to action. The first one should be "Give" and maybe you can use a gift icon instead. Advocate should use another icon too, I would recommend a blow horn or something to that effect. Volunteer should probably have people in it.
  • Footer. Instead of the solid grey background for the footer, could you use the photo from the top hero area of the city skyline? I really like what this United Way chapter did in the footer: https://unitedwaydallas.org as it gives it a nice local feel.