This was a fast-paced project that was due in 6 weeks from scratch. Our team had 4 people in it which was split between two researchers and two in visual design. I volunteered to lead the visual design for this project. In the 6 weeks we were able to complete contextual interviews, a content inventory, first click testing, useability testing, and went from Low-Fi to a Hi-Fi prototype.
Student Serve
Group Project
Role: Lead Visual Designer
Tools Used: Figma, Adobe Photoshop, Optimal Workshop, Teams
Timeline: 6 weeks
Channels: Web
Click here to see HI-FI Prototype
The Problem
When deciding on an idea our team had some self-reflection moments. As students we had some anxiety with wondering if we have enough experience in our field to go out into the world and become solid UX practitioners. This line of thinking evolved into becoming our central focus for this project.
Is there a way to help college graduates gain practical skills and help serve a purpose in the community?
Goals
The goal would be to connect students with the community based on skill matching. The student or recent graduate would work to help a volunteer host while gaining practical experience along the way.
Match users with volunteer opportunities based on the skills they are looking for.
Skills can be hard skills like C++ coding and soft skills like interpersonal communication.
Allow users to sort and filter through options to find specific results based on time, location, and availability
Allow users to see detailed information about the volunteer operation before committing to it.
Competitive Analysis
Next a competitive analysis was conducted to see if any similar websites exist that might be occupying the same function Student Serve is trying to accomplish. There were three matches for volunteering sites, all with their own specific functions. While some of these competitors had similar roles many did not offer the exact same benefits of what our project would accomplish. Many had time delays of when you could apply or lengthy application processes. We wanted to create a platform where the user could directly apply for opportunities and communicate their skills needs without delay.
Contextual Interviews
This process was started with 7 interviews which were conducted online via Zoom. A script was written out and used by all the team members to have consistent answers and to make result analysis easier. Participants were also given a consent form beforehand to inform them about the study and what is required. The interviews were recorded and transcribed. All the data was transferred to an excel sheet and Figjam for thematic analysis.
Based on the 7 interviews the following themes and insights were discovered:
All 7 participants said that their biggest challenge was finding a reliable source for volunteer opportunities.
Most found volunteer operations through word of mouth or email chains.
5 of 7 participants stated that most negative volunteer experiences came from unorganized events (lack of specifics such as time, dates, location, etc.)
6 of 7 participants wanted the ability for find volunteer opportunities that were tailored to their needs, schedules, and skill sets.
6 of 7 participants wanted reviews as way to determine if the volunteer host was a good fit for them.
2 participants suggested testimonials instead of reviews to drive more honest feedback (this would be included in the design)
Card Sorting
An open card sort was conducted among the team to get a rough idea of the site architecture. We made a tentative site map as well on Figjam. Afterwards, a hybrid card sort was conducted with 10 users on Optimal Workshop. The findings from this round were used to finalize our site map to what is shown below. This was then used to make our wireframes.
Early Design
Based on the interview data, the Student Serve platform needed to be a web-based solution with detailed information readily available at first glance. The Low-Fi wireframes were constructed using a horizontal scrolling card design and drop-down navigation system. The decision was made to use a card system to provide all the organized details upfront while giving the volunteer host the ability to represent their cause in the best possible way. The function of horizontal scrolling was intended to give the user a vast array of options right from the homepage that they could scroll through at their leisure.
Another feature mentioned in the initial interviews was the ability to filter volunteer opportunities based on distance, time, date, and skills. As such, the next priority was to build a filter system that users could use to narrow down their options to best suit their needs. Initially, this low-fi design had drop-down and tag-based sorting which used the same types of cards as the homepage. In later iterations, the team decided to break with consistency and make the filter system into a list sorting format. This change would later appear in the Mid-Fi designs.
First Click Testing
In First Click Testing, 5 screens were tested with 11 users using Optimal Workshop. Each screen asked the user to click an item according to the task. All the clicks generated a heat map which showed where the participants clicked the most. Overall, the successful match rate of 84% was seen across all tasks. On closer examination we discovered that some participants used a touch screen to perform the test. Ordinarily this would be fine but in this case it caused some of the users to fail the task because they tapped outside the narrow success field. The test wasn’t calibrated to account for touch inputs so the taps would some time miss the success field by a very small margin.
Mid-Fi Prototype
After the first click testing was completed, we began work on a mid-fi design and prototype for our usability testing. Results of the first click testing showed us that our general architecture and was is the right place and users were able to find and navigate through the various task scenarios. One of the most noticeable changes in the Mid-Fi was the change from a card view to a list view in the filter search page. This break in consistency was chosen to make it easier for the user to sort through various volunteer options faster thereby helping with scannability.
Home Page
Usability Testing
Usability tests were conducted using 8 volunteers from the DePaul University Research Pool and people who wanted to participate from the local area. This testing was done on the Mid-Fi Prototype only so the users could focus on the features of the app and not get distracted by its appearance. Testing focused on four key tasks:
Have the user attempt to sign up for an account
Have user navigate the site and find a volunteer event and sign up for it
Have the user find a specific volunteer event using the filters and sign up for that event.
The complete testing protocol can be found here with all the tasks, happy paths, and conditions for success.
Here is the link to the Mid-Fi Prototype that was used for testing. (Disable your Figma UI so you can use the nav bar)
Testing Results
All users passed each task and the findings were useful. Many issues were superficial which were corrected with minor adjustments to the UI.
Adjust the Site Nav bar to show the user where they are at on the site.
Remove the horizontal scrolling. Users were confused on whether to click on the nav arrows or drag the scroll.
Make the sign-up button more noticeable (On Mid-Fi the button was in greyscale but was planned to be colorized for the Hi-Fi).
Some testers said there were too many cards on the homepage and that should be broken up a bit between sections.
Brand Guide
I created the style guide to unify all the visual components of the Hi-Fi prototype. The group wanted to go with a color pallet that was close to the original logo that I created. I wanted to use Dodger Blue as an homage to our university as that’s our school color. We wanted the typography to be inviting and make the users want to read more but also be legible.
A slight break was made on this thinking for Pacifico, which was used to capture attention more so than to be used in capturing information. Card formatting was adjusted to make the images much larger than earlier prototypes. We wanted to use imagery to help the user gravitate to volunteer opportunities.
Hi-Fi Prototype
Here we have the Hi-Fi prototype with the brand guide and testing feedback changes implemented.
Click here to see the HI-FI Prototype
Our Journey Through Iteration
This project was a complex one with many moving parts to it. It really helped having 2 solid researchers and 2 solid visual designers for this project because we were able to divide a conquer. The break neck speed of this project with added learning lectures and side projects required by the course, made this a challenging assignment to tackle. In the end we all were very proud of the outcome and felt the project solved the problem (we also got a grade of 100).
No project is perfect and if we had more time I would:
Made a splash page that explained the purpose of Student Serve better
Made the volunteer host pages so you could see how that process works
Create the informational pages to showcase more on the ideas of the project
Run some Hi-Fi usability testing (we planned this but ran out of time)