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.
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.
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.
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.
- 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.
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
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.
- 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.