Oraculi

Website Redesign for a Science Fair Mentoring Site
Role:
UX Design, UI Design; Collaboration with Another UX Designer
Platform:
Website
Tools:
Figma, Google Sheets, and SquareSpace

The Problem

Oraculi is a registered non-profit that partners kids grades 3-12 in Rochester, Minnesota with mentors to help them with their science fair projects; Oraculi also helps kids pay for project expenses to make science fairs more accessible to all kids in Rochester. Oraculi was founded around 3 years ago, but recently expanded their online presence by creating their first online website. They asked for our help with their website since they were not seeing enough engagement across the platform and they wanted to achieve an increase in mentor sign ups, student sign ups, and donations on the website.

Before: A Screenshot of the Original Website
After: The First Part of the Final Website
The cute molecule mascot Ozzie saying "In a hurry? Here is the Final Prototype of this project"See Prototype

The Process: 3 Weeks of Design Sprints

We adopted a design-sprint approach to break up our project into more manageable weekly based tasks while incorporating some form of user data each of the 3 weeks to help us back up our findings and design decisions with real user data.

The Process We Used to Audit and then Redesign the Oraculi Website

The Solution

We created a redesigned website with the following changes to increase user engagement with the website:

Constraints:

The Proto-Personas

There were 3 distinct personas that we had to keep in mind as we were redesigning Oraculi's current website. Due to a lack of existing user research and the low response rate on our user surveys (we got 3 responses from over 200 emails) we sent out at the beginning of the project, these personas were not fully fleshed out. Despite this setback, we were still able to use the information we gathered from our stakeholder interviews to make 3 generic personas for our project. Each of these general personas still gave us a starting point as to the needs of each user group.

The Students
The Mentors
The Donors/ Community Members
  • Kids primarily in grades 6-12
  • Kids grades 3-6 in the Boys and Girls Club
  • Need mentors to help them with their science fair project
  • Professionals in the sciences
  • Typically younger professionals
  • Need to be able to register as a mentor and access teaching resources
  • Parents, Guardians, and Donors
  • Wide variety of ages
  • Want to help kids develop an interest in learning and in science

Site Map of the Original Site vs. the Redesigned Site

In order to get a better idea of how the current Oraculi website was organized and how we might streamline the information architecture of the site (if needed) I made a site map of the original Oraculi website. This site map helped me see that there were a lot of opportunities for the design to be simplified.

Improvements made to the site map/ overall IA:
  1. Moved all the main content directly onto the website rather than having the user click links within a word document
  2. Removed repetitive links that appeared multiple time on the same page
  3. Moved resources to more relevant pages
  4. Improved information architecture by combining pages and simplifying navigation categories
A Site Map of the Original Oraculi Website Including Google Forms, Documents, and Powerpoints
A Site Map of the Redesigned Oraculi Website Including Google Forms, Documents, and Powerpoints

Usability Heuristic Analysis and Analysis of Trust Factors

In order to see what the website was already doing well and opportunities for improvement I analyzed the original Oraculi website based on the Nielsen Norman Group’s Usability Heuristics for User Interface Design and the trust factors in Persuasion, Emotion, and Trust (PET) Design. The usability heuristics gave me ideas of what we could add to the site to increase usability and the trust factors gave me ideas how we could design the site in a way that instills trust. Both showed similar results to the usability test of the original Oraculi usability test we conducted after these analyses (shown below).

Usability Tests of the Original Site

We conducted 5 usability tests to get an idea of how users were using the current site and how they felt about the design of it.

The Tasks:

  1. Understand the Website’s Mission
  2. Find Information about the GATEway Science Fair
  3. Sign Up as a Mentor
  4. Find Answers to the FAQs (this was added before testing by the stakeholder)
  5. Find Oraculi’s Contact Information
  6. Provide Feedback on the Website Overall

The Results

After taking notes on all my usability tests, I logged the issues from my tests to determine the most common and pressing usability problems between the participants. Among the most pressing issues was inconsistent use of colors on the text and buttons (which led to overall confusion when performing website tasks) and doubts about the credibility of the website overall among all 3 participants.

Creating a Mascot for More Visual Engagement

Although our stakeholders did not directly ask for a character mascot, because they wanted to engage kids in a greater way I thought adding a cute character would help the Oraculi site feel more personal. Additionally I thought it would help with their social media presence (which they originally had asked for help with as well even though that was not part of the website redesign an thus outside of the current project scope). All of our stakeholders ended up loving the idea and I made several variations of the character which allowed them to vote on the one they liked the most and offer suggestions before I came up with a final design for Ozzie.

Some of the Iterations Made for Voting on the Design of the Mascot Ozzie
Since the stakeholders liked 3.1, 3.10, and 3.12 the most the final design for Ozzie became:

Our Final Redesigned Pages

Using what we learned from our secondary and primary research my teammate and I began to rework some of the original Oraculi pages to improve some of the usability issues that we found during our research. After receiving feedback from both our mentors we iterated on our designs before moving on to usability tests with our high fidelity prototype.

After we preformed usability tests with 5 users we iterated on our prototype again to come up with the final design for the scope of this project.

The Home Page

The Original Page:

The Main Usability Issues:
  1. All 3 of my users wanted to change the colors and the sizing of the text (internal inconsistency was leading to a confusing mental model of the site)
  2. All 3 of my participants did not notice that the form at the top of the home page was for the GATEway Science Fair (2 users mentioned that the color was causing them to miss things and/ or causing them confusion)
  3. 2 of my users mentioned that they thought there was too much text and that they did not want to read it

Our Final Design Iteration

Our Changes:
  1. Simplified colors and text to better match the user's mental model
  2. Incorporate more images to add more visual interest, break up some of the text, and bring delight
  3. Added a footer with legal information and Oraculi's socials to instill more user trust in the website

The (Get Involved) Students Page

The Original Page

The Main Usability Issues:
  1. No clear CTA (the “Sign up for a mentor today” is not clickable although there are underlined sign-ups for middle schoolers and high schoolers at the bottom of the page which can be clicked)
  2. Colors, text, and spacing are inconsistent between pages and on the same page
  3. There are lots of words on the page

Our Final Design Iteration

Our Changes:
  1. Added Sign up buttons for clear CTAs
  2. Incorporated pictures and a fun character to break up some of the text, add visual interest, and bring delight
  3. Made the page more scannable by adding bold text and more consistent headlines
  4. Simplified navigation and links by putting them in more relevant areas and making them more discoverable

The Donations Page

The Original Page

The Main Usability Issues:
  1. Button colors are inconsistent: which leads to an inconsistent mental model for the users
  2. Although there is a clear CTA to donate: Is there enough information for someone to want to actually donate?

Our Final Design Iteration

Our Changes:
  1. Added a clear CTA button that was consistent with the rest of the site design
  2. Provided people more information so that they would trust Oraculi more and feel more compelled to actually donate to Oraculi
  3. Added visual interest by adding the Oraculi mascot Ozzie to the page

Comparing Usability Issues of the Redesign to the Original Website

Main Usability Issues Comparison (Original vs. Final Redesign)

1. Questioned the Legitimacy of the Website or Program

2. Wanted the Colors to have More Consistent Meanings to Match Their Mental Model

3. Confused About the Difference Between the 2 Science Fairs (GATEway, Rochester STEM Fair)

Overall the usability testing on the redesigned pages yielded less usability issues than those of the original Oraculi site. Most issues were solved and/or improved by the new website design for Oraculi. Most of the issues we uncovered in this round of testing related to consistency and they were easily fixed after the testing was complete. The main issue that remained a problem after the usability test was users being unable to tell the difference between the GATEway Science Fair and the Rochester STEM Fair.

Oraculi, a cute molecule character, whizzing by and saying "Let's take a closer look at the final prototype"See Prototype

Outcomes and Results

Our original goal going into this project was to give Oraculi a redesigned website that would lead to an increase in mentor sign-ups, student sign-ups, and an increase in donations. Through secondary research and primary user research we uncovered that the current design of the website was causing the users to not trust the site and to struggle when navigating the site and/or to struggle when finding the information they needed in a timely manner. Thus, most of our redesign was finding a way to help users navigate and find the information they needed in a more logical way and to increase trust between the users and Oraculi.​

Although it will take a bit of time to see if our redesign helps with additional sign-ups and donations for the real Oraculi site, through our testing we saw 100% increase in trust and happiness related to the design improvements (particularly related to color) between the two tests. Additionally the simplifying of the information architecture made the relevant pages significantly easier to find for the participants. Thus, with increased trust and improved visibility it is highly likely the new design will result in more sign-ups and donations (though this will likely depend upon how much marketing is done in person and online by Oraculi).

My Learnings:

Ozzie, a cute molecule character, saying "Thanks for reading"