CCRL Instruments Website Redesign
A website used by the College of Science and Mathematics (CoSM) Core Research Lab department at Georgia Southern University. The website allows Georgia Southern faculty and trained students to schedule and reserve dates/times to use scientific instruments (like Confocal Microscopes) owned by the department. The project was completed and “shipped” on the actual website.
UX/UI Designer
Role:
Individual
Team:
Dec 2023 - Jan 2024
Timeline:
Figma and Google Sites
Tools:
The Problem
The website had issues with its layout, which made it more difficult to find certain information for users. Buttons used on the site were designed in a way that didn’t make it clear that they were actually buttons.
The site’s overall design also hadn't been updated to comply with recent changes to Georgia Southern's brand design, which made it unclear if this website was an official Georgia Southern website.
Impact Summary
The original design of the website had an average time on task of 2 minutes and 25 seconds due to the layout and button issues.
After the redesign, the time on task was cut down significantly to between 15 to 30 seconds at an average time of 20 seconds.
Note: Any black boxes used in images or mockups are there to protect names and emails used on the site.
Tip: Click on images for a full-screen view.
Project Overview
•
This project was for the Georgia Southern University’s College of Science and Mathematics (CoSM) Core Research Lab Instruments website. I volunteered my services to redesign the website after hearing issues about the website from the client and the website’s users. I offered to create mockups of the redesign.
As part of getting approval for the redesign, I also offered to implement the designs using Google Sites (where the website was originally hosted) because the client didn’t have someone else to implement them. The completed redesign has been implemented and “shipped” on the actual website.
Understanding the Issue
•
Why a redesign was needed
Meeting with the client, I learned that they gained ownership of the website after the previous owner/creator of the website left the university, and while the client did change a few things to help the issues, they wanted a more significant redesign due to there being several issues with the website’s design.
What exactly were the pain points?
While speaking to the client and hearing the issues from various users (faculty and students) who use the website, I learned their pain points and researched ways to solve the issues.
The Buttons
1
First-time users, including myself, often don’t realize that the buttons used on the site are actually buttons as they look more like banners due to their shape, style, and positions on the screens.
The client tried to help the issue by including text in the website’s introduction telling users what the buttons looked like, and that they were in fact buttons, but it wasn’t the most ideal solution.
Organization
2
Information that users needed wasn’t presented clearly and often was presented in different areas on the site when the information could be presented together in one area.
There were also a few inconsistencies where some elements weren’t labeled properly along with links going to the wrong pages. This added to the users' confusion and made it difficult and slow for users to find what they needed outside of the website’s homepage.
Efficiency & Speed
3
The list of every instrument located at both campuses and the list of the status of each instrument was located in two separate areas on the homepage. The status list only used the instrument’s CoSM Core Research Lab (CCRL) number to identify each instrument to display whether they were functioning or not.
Users often didn’t have the instruments CCRL number memorized, which meant that users couldn't quickly see the status of the instruments on the homepage. Instead, they would have to go to the actual instrument’s page to find the CCRL number making this process more time-consuming.
Adding to this issue, there was no quick way to go to an instrument’s page from the homepage since the list of instruments didn’t include links to each instrument’s page to schedule an appointment or find the CCRL number.
Additional design requests
The client also provided the terminology they wanted to use and provided PDF manuals and specifications to be used on some of the individual instrument pages.
I also wanted to redesign the site using Georgia Southern’s branding style since the original design didn’t. I researched information on the university’s design by finding its web colors and font styles and looking at its main website to see how elements were designed and organized. I did this because I wanted new users to know that this is an official Georgia Southern website since it was a little hard to know with the original website’s design.
Pain points examples from the old design
To understand exactly what I mean, I’ve marked the pain points on some of the pages from the website’s original design.
The following are the original website’s designs:
Gathering some data
To understand if my redesign made any impact, I wanted to gather some data from the original website to be able to compare it with the redesign.
I decided to perform a usability test to understand how users used the site and test the time on task to see how long it took them to schedule an appointment with an instrument since the pain points focused on organization, efficiency and speed.
The usability testing and its findings
I tested a total of 5 users with 3 of them being users that hadn't used the website before. I wanted to make sure I tested more users who hadn’t used the website because the website’s users are students and faculty, which means the website will consistently have new users as new students and faculty join the university.
Users were asked to find the status of a random instrument and then schedule an appointment to use it. Users were timed on how fast they were able to perform each task.
The Results
Based on the results, I found that users took longer to find the status of an instrument. This was due to the unclear labeling and hierarchy of the status of the instruments.
While observing the users interacting with the product, I noticed that two of the three new users didn’t use any of the buttons on the website to get to an instrument’s page to schedule an appointment. Instead, they used the drop-down menus on the website’s header to complete the task. I asked them why, and they said they didn’t realize the buttons were buttons.
The Redesign:
•
The brand guidelines
Before starting, I researched the university’s fonts and colors so I could make sure this redesign would align with their brand guidelines.
Based on what I found, I ended up going with their ‘“Body text Black,” White, Off-White and Navy for the colors, and Proxima Nova and Helvetica as the fonts.
Creating mockups focused on the pain points
Homepage:
Statesboro Campus Page
An Instrument’s Page
(All Instrument Pages Look Similar):
Navigating around implementation issues
I finished all the designs and the high-fidelity prototype and had them approved by the client. When first offering my services to the client, I also offered to implement the changes into the site since this was a volunteer project, and they didn't have anyone else to implement them.
As I started to implement everything, I discovered that Google Sites wasn’t as feature-complete as I thought it would be. As a result of this, I had to make minor changes to the designs because Google Sites deals with embedded code and element placement, spacing and sizing differently than other more customizable website-building sites.
The final comparisons
To overcome these issues, I redesigned the original mockups (which were also approved by the client). This redesign was very minor mainly dealing with the position and size of certain elements.
I added buttons to each instrument’s row on the table that take you to the instrument’s page instead of having to click the row to make it clearer to users. I also improved the language used in certain parts of the site to be more clear.
Here is the final comparison of every iteration for each page of the project:
A final usability test
Once all the final designs were complete, I performed another usability test to see how participants performed on the redesign to compare with the original design.
Participants were given the same test where they were asked to find the status of a random instrument (a different instrument than what they were given for the last test) and then schedule an appointment to use it. I tested the same 5 participants but also got 2 new participants to test to see how users who were unfamiliar with the whole user flow performed on the redesign.
The Results
Based on the results, I found that users performed a lot better with the redesign. The returning participants were asked why they felt they performed better. They all unanimously agreed that it was mainly due to the button redesigns and the new table that presented all the information clearly.
Takeaways & Refections
•
Impact
I tested the original site’s design during my research phase and found that the time on task was at an average of 2 minutes and 25 seconds (higher for new users). During the testing of the final implementation, it was found that the time on task was cut down to between 15 to 30 seconds at an average of 20 seconds.
The reason was that the table on the homepage now presents all the information the user needs as well as offers a button for users to quickly click to go to an instrument’s page to schedule an appointment. Along with this, the button redesign and improved hierarchy helped users distinguish what certain elements are and do as well as help improve the readability of the website.
What I learned
Since I offered my services to the client, I had to take on more roles than a UX designer typically would by actually having to implement the designs into the website. It was an interesting and challenging process and refreshed my software engineering background.
The setbacks also taught me to rethink my philosophy of creating designs that are innovative yet practical due to difficulties coding the designs. I also need to keep in mind that designs should also be practical for the content management system they are being made for, like for Google Sites in this case.
Thank You!
See More
