Project 2

Project Overview

NERDS is a small non-profit that was created to support students in STEM related fields in schools where students were found to be continuously behind in their grade level. Since NERDS is supported by a very small team, and volunteer students that continuously come and go, they were experiencing challenges maintaining their website and understanding the purpose behind design decisions. They found themselves with multiple half-baked websites with confusing logic making it impossible to add and remove content from the website. As part of a collaboration between NERDS and Cincinnati College, the team launched the innatitive of creating a well-designed and easily maintainable website.

My Contributions

As a hackathon volunteer, I lead the UX re-design effort for the NERDS website. I collaborated with the leads of the NERDS team to gather information about their desired site map and the information they wanted to convey. A week before the hackathon commenced, I developed web page designs using Figma. I designed pages such as the home page, about us, get involved, account portal, and others. I showcased my work in a video in time for the engineering handoff during the hackathon week.

The website re-design project kicked off with a meeting between the UX designer (myself), a lead software developer, and the non-profit founder. The background of the non-profit was shared and the struggles of having a consistent website was described. As I listened, I determined the users of the product and divided them into three main categories. I also jotted down the pain points of the users.

Define

Users

Nerds Team Members

These are long term users of the website. Since the team is small, they have limited time to dedicate to updating the content of the website.

Volunteer Developers

Most of the volunteer developers come from a partnership with Cincinnati College, where students spend one semester in classes and another semester in co-op. This means that volunteer retention rate is low and the flow of new volunteers is high.

Students

The students are the ones accessing the finished product of the website, They are young and are looking for an engaging and easy to use experience. They also have a lot of questions, a lot of which they tend to direct to the small board member of NERDS, which is overwhelming given their limited people resources.

Pain Points

NERD team members struggle to add or remove content from the website.
Many students direct common questions to the NERD team when instead they should look to the website to answer these common questions.
Volunteer developers that are coming and going each semester don't have any guidelines to stick to when developing for the website.
The previous color palette for the NERDS website was black and blue, which are not fun colors for an audience that is mostly young students.

Research

User feedback from previous websites

There was not a lot of feedback from users for the previous websites. Due to the outdated nature of the website, the NERDS team steers away from directing students to the website. Instead everyone texts the coach of the program. The only feedback gathered was that the website it not representative of the current state of the program, the donation page doesn't look reliable, and the contact session leads to a lot of spam mail.

Priorities of website pages to design

Top Priority Pages: Home, Programs, Donation, Volunteer
Low Priority Pages: Get Involved

Features to include

Home Page: video playing in the background and a spot for "Feature Friday" to highlight gratitude for partners or volunteers each week
Programs: there are three sub programs within NERDS, including an overview differentiating these programs will help clear up any confusion
Contact forms collecting student information
Embedded Google form for the registration page
Responsive designs for web and mobile

Ideate

My role was to create designs for each page or templates for pages with similar structures. I also recommended creating a theme library for NERDS web page designs to tackle the issue of new volunteers flowing in and out. The desired content as well as the site map was already prepared by the NERDS team members.

Prototype

I scrolled through the NERDS Instagram feed for inspiration when developing the look and feel of the new website.
I gathered the most up to date marketing material from the google drive.
I began creating a theme library in Figma which included a color palette with semantic names and font types and sizes.
After designing a few pages, I paused to explain and show the designs to the founder of NERDs and the lead software developer to ensure it matched their expectations
Incorporating feedback, I wrapped up the remaining page wireframes. I annotated the pages with component interactions and page flows. I also created a components library that included buttons and icons along with states such a rest, hover, and clicked. I consolidated the information into a video to handoff to the engineers for the upcoming hackathon week.