Alyson Dietz
Alyson Dietz | Designer
Learn-Mockup-Hero-Img.jpg

LEARN | UX, Web Design

User Experience and Website Design for nonprofit education agency

Website mockup for LEARN.jpg

LEARN

UX, Web Design

LEARN is a non profit agency committed to providing educational resources to students in need. Through donations and grant funding, the agency runs a variety of programs aimed at preparing students for higher education.


Client brief

"We are looking to develop a more streamlined website that quickly delivers our message and encourages people to read further about our work. We have met and discussed with our board our focus and intent for a new web presence to tell our story. Our board has identified four areas that we would like our new website to exude. They are 1) Clear Message Delivery 2) Easy Navigation 3) Concise and useful information and 4) Keeps you coming back as a resource."


Project details

Duration: 2 months

Team: Alyson Dietz, Mallory Jamison

Individual contributions: UX Design, research, custom CSS of WordPress theme


Process

Comparative Analysis, User Survey, Content Audit, Content Strategy & Information Architecture, WordPress Site development


Discovery: Competitive Analysis

Competitors were researched to understand areas for improvement within LEARN's current site. I selected similar programs as well as specific sites called out by the client that they particularly liked the design of.

The analysis indicated the current design of the LEARN site was following similar patterns as competitors, but it needed an organizational overhaul. The original site did not have a clear informational hierarchy and the content strategy was lacking.


What do users think?

I designed a survey targeting users familiar with LEARN services or other similar programs. I tested my questions with potential participants before publishing the survey. The survey was distributed through social media channels and LEARN's communication network.

The survey findings indicated users were interested in the service but needed more clear information about how the programs work. They were not able to identify clear steps to move forward with the program. Important details like funding sources, location constraints, and resource allocation were not easy to locate on the site.


The path forward

Based on the information gathered through competitive analysis, user surveys, and discussions with the client, we chose to focus our efforts on simplifying the visual design and clarifying the site content. This would address the problems expressed by users, namely, that the site felt chaotic and didn’t provide all the necessary information.


Design

The client already had a WordPress based website and wanted to stick with this platform. I found a new design template that would provide simplicity while also allowing me to build out pages with more content. I selected a theme with a design that the client was happy with and was able to inject custom HTML and CSS to further customize the theme.

The primary focus of the redesign was to create a more structured site based on the content strategy work while updating the UI to be more visually compelling. I updated the logo with colors that would stand out better against a dark background and sourced relevant, impactful imagery for the home page. Furthermore, I established a clear typographic hierarchy throughout the site and removed distracting logos and colors.

In the end, I was able to deliver a scalable site to the client that would allow them to manage and update the site while keeping with the improved UI and structure we provided.

Home page before (left) and after (right)

Core values before (left) and after (right): featuring updated copy for clarity and a cleaner layout


Reflections

There were two main challenges with this project:

1. Logistics: I didn't have as much access to current users as I would have liked. This forced me to lean on other tools, such as online survey and competitive analysis, to put myself in the mind of users.

2. WordPress confines: There are pros and cons to working with WordPress. On the pro side, it's great that the client is comfortable with the platform and can now continue to update and manage their site. The con is that this platform can be limiting if you don't have a developer on your team, which I did not. There were some challenges in figuring out how to best customize the theme to work for my client while improving the overall user experience, especially working within the confines of WordPress.

Working through challenges like these can be difficult, but they also force me to be more creative and dig deep to use the resources I have available. I appreciate the opportunity to work through a problem and come up with a solution that my client is happy with.