Allegra
UX designer

Glamourgals.org

Project: Freelance
ROLE: Lead UX Designer
DURATION: 14 weeks

Image alt tag

Background

The client came to me to ask to redesign their website. They had been an established nonprofit but were in need of cleaning up the website and conducting research to uncover business needs. I worked with a copyeditor and the founder to accomplish the work.

The challenge

1. Website confuses users with an overload of information and graphics
2. Difficult for users to find information about donations, chapters and volunteering

The goal

1. Identify the user's objective 
2. Design a consistent, polished, and balanced homepage, through typography, color and visual hierarchy
3. Shape the communication and voice

User research

At this phase of my project, I wanted to run an unmoderated remote usability test with new users. Our particular hypothesis was that the mission statement was unclear to users. We wanted to validate that by testing particular questions and observing user behavior patterns.

Research Goals:

  1. Are they visiting the website on desktop or mobile?

  2. Do they have a clear understanding of the Glamour Gals mission?

  3. Are they more inclined to donate, subscribe or volunteer?

  4. Finalize a mission statement

I conducted a user survey that surveyed 9 people, ages 18-69. I had limited access to reaching out to people so I interviewed my close peers. I sent out an email inquiry asking for five minutes of their time. My questions were a combination of multiple-choice and open-ended. I worked with the copyeditor to create three potential mission statements. My goal behind surveying potential users was to uncover transparent, unbiased information about the website.

User Questions:

  1. When I ask you to go to the website, what device are you using?

  2. After reading this mission statement, can you describe to us your interpretation of the organization?

  3. Can you tell us what ages Glamour Gals is looking for? 

  4. What was the first thing you clicked on the homepage?

  5. Are you more inclined to a) Donate b) Subscribe c) start a chapter/volunteer 

Quotes:

"Giving free manicures to old people in nursing homes"


"A nonprofit that provides makeovers for elderly people"


"Teenagers go to senior living facilities to do makeup/manicures for senior women in order to foster intergenerational friendships."

Research findings

After conducting user testing, I was able to identify the pain points from the homepage. It was clear that users weren't inclined to volunteer or start a chapter. This result created a separate challenge that we were unaware of prior to starting the project. Therefore, we had to make it a goal to create a design for users to find information about volunteering and starting a chapter.

Competitive analysis

While working with the copyeditor, we conducted a competitive analysis to understand the strengths and weaknesses of nonprofit websites. We identified that the homepage should follow as a storyline; touching on the five W's, who, what, where, when, and why. We also found from browsing nonprofit websites that it was important to include a section on the homepage that gave at least three statistics.

The how might we...

How might we get users to start a chapter and volunteer from reading the homepage?

How might we increase the number of donations from the website?

Solving the problem

Before heading to sketches, I worked alongside the copyeditor to re-write the homepage story. Our learnings from the research indicated that we needed a clean and clear five-part story that answered the important W's- Who, What, Where, When, and Why.

Top navigation bar 2

Top banner: Who is GG 2

The “why” or “problem GG’s solving” banner 3

The “what”: what GG does 3

The how: the impact banner 3

Create a chapter banner 4

Current events/what is GG up to now? 4

“Testimonials”: a rotating panel of seniors & volunteers 4

Final CTA: a call to donate 5

Contact form 5


Wireframes

I usually start the design process with low-fidelity wireframes. This is the way I iterate through many design options quickly.

The main purpose of low fidelity was to brainstorm layout ideas with the design features. I sketched various versions before deciding on a final sketch to design. I chose this sketch because it incorporated all research findings that were crucial to helping users understand the mission of the nonprofit.

Leveling up

I presented my low fidelity designs to the client and made sure to carefully articulate the designs and the motivations behind them. After answering questions about layout and design, I was greenlit to design high-fidelity wireframes.

 Glamourgals

UI design

It was important to recognize accessibility. In the original designs, the brand colors were not in an accessibility range. We decided if we want to gain more users, we should alter the color palette of the brand style guide.

 Glamourgals

Final iteration

Since we were on a timeframe of about 8 weeks, we had to move along quickly. Once I tested out all usability mistakes with the copywriter, I started designing the final screens in Squarespace.

Takeaways

​1. It's important to always have clear communication with the client.
2. Goals can change throughout the duration of the project from a result of user testing
3. Navigation button placement is crucial to a user's journey 
4. Copy can always be shortened!