My Role

The Team

Lead UX Designer

Duration

March-May 2022

1 Project Manager, 1 UX Designer

Figma; Wix

Tools Used

Overview

Empathize

Background Research
User Interviews
Competitive Analysis

Ideate

Feature Prioritization
User Flows
Site Mapping

Create

Low-fi Wireframes
Defining UI
Prototyping
Building

Verify

User Testing
Iterating
Hand-off

My Role

The Team

Lead UX Designer

Duration

March-May 2022

1 Project Manager, 1 UX Designer

Figma; Wix

Tools Used

Overview

Empathize

Background Research
User Interviews
Competitive Analysis

Ideate

Feature Prioritization
User Flows
Site Mapping

Create

Low-fi Wireframes
Defining UI
Prototyping
Building

Verify

User Testing
Iterating
Hand-off

HomeWorks Trenton is a non-profit operating a free, after-school residential program for marginalized high school girls. The organization provides academic and social-emotional enrichment activities to supplement public schooling, with the objective of building the next generation of community leaders. You can learn more about HomeWorks and its mission here: https://www.homeworkstrenton.org/

As a 2021-22 fellow for HomeWorks, I created and taught a dance program from scratch, led marketing campaigns for Giving Tuesday and the holiday season, and used my design skills to redesign and build a new website.

Empathize

It was important to approach designing the website from the perspective of providing a tool for all members of the HomeWorks community: the families, scholars, staff, volunteers, and donors. Each group has its own goals to accomplish using the website.

Challenge

HomeWorks’ old website lacked a clear hierarchy of information, provided inconsistent messaging, and didn't direct users to actions they could take.

Defining Our Goals

I first conducted an audit of the old website alongside the executive director and operations manager. I also performed a competitive analysis of other nonprofit and small-business websites.

By writing down the patterns I found on successful sites, then comparing them to the HomeWorks site, I was able to define goals for the new website.

Ideate

1. Clarity Over Quantity

The old website provides an overwhelming amount of information about HomeWorks on the homepage. While this helped explain the concept of the organization, it didn't provide any direction to the user.
‍
Goal: The new website should provide a quick overview of what HomeWorks does, then direct users to the actions they can take, like "donate," "learn more," or "volunteer."

2. Order Is Everything

Users of the old site were often confused about where to find tasks due to ambiguous or misleading labels. To learn how to get involved with HomeWorks, they would end up emailing the Executive Director with requests rather than signing up, applying, or donating through the website.

Goal: The website's content should be sorted into clear categories and use labels to direct users to the appropriate pages.

3. Uniformity Creates Identity

The old website lacked consistent messaging in its text, images, and colors, contributing to a sense that HomeWorks is disorganized and unprofessional.

Goal: The new website should follow clear branding guidelines with color and font and communicate a single, holistic message.

Key Takeaways

1. Clarity Over Quantity

2. Order Is Everything

3. Uniformity Creates Identity

Key Takeaways

Turning Sketches Into Designs

I next began designing the home page, which would be the starting point for all user journeys. In the research I conducted, I found that the home page needed to accomplish four things:

Direct users to the most important action that we want them to take (donate)
Offer a succinct overview of the organization and invite them to learn more
Provide users with different ways to get involved
Highlight recent news stories about the organization

Create

Once we settled on a home page design that we liked, I repeated the process of goal-setting and sketching with each of the other pages. I eventually ended up creating over 15 different pages from scratch, in addition to the edits I made to existing pages.

Here are a couple screenshots of the final versions of different pages (campaign, team, and activities). I designed and built over 15 different pages from scratch.

User Testing

Though I didn't have time to conduct as much formal user testing as I would have liked, I would constantly show new pages and features to my team members to see what could be improved.

Some of the main changes I made were:

1. Creating an Activities page that segments the different elements of HomeWorks' program and shines a light on its activities.

My first draft of the activities page described a "day in the life" of a scholar and provided some testimonials, but left out important activities and elements of the program. The new page segments activities into "residential," "academic," "leadership," and "community" in order to holistically cover what being a scholar at HomeWorks is like and connect back to HomeWorks' pillars.

2. Creating a Careers page that allows you to apply directly through the HomeWorks website.

Originally, I left job postings at the bottom of the team page. Clicking on a posting would take you to another page, where you could download a flyer of the job description and apply through the job portal. The new page I created lists all the available jobs under "apply" and allows applicants to view the job description directly on the website before applying.

verify

Final Designs

In addition to reorganizing and mapping out the site's information, I prioritized interactivity and dynamism to create a website that was engaging for every user.

With the pages complete, I optimized the designs for desktop, tablet, and mobile in order for the website to be responsive to different device sizes.

What I Learned

Designing HomeWorks' website was my first major project, and it involved a lot of adaptation and learning on the fly. I picked up technical skills working in Wix and cemented my expertise in Figma. I learned about the process of goal-setting and evaluation by thinking through the needs of the users. But I believe the most valuable lessons I learned had to do with being a member of a small team, and understanding how to effectively communicate and rely on my teammates.

As the only designer working on the website, it was important for me to vocalize when I experienced roadblocks or felt like I needed help. Only by honestly reflecting on my abilities and the amount of work I faced was I able to successfully manage this project and create a finished product that I was proud of.

If I were to redo the project, I would set up interviews with different users of the site (donors, scholars, staff) before starting any design work in order to clarify their needs, as well as when I had my first prototype so that I could evaluate according to how they used the site. As it was, I primarily set goals and tested the site with staff members, so I may have missed potential problems that other users would run into. I believe it's important to consult all of the different types of users in order to fully understand what your product needs to accomplish.