Project Overview
My Contribution
UX Designer - I was the sole UX designer on my team but my developer teammates were involved in the research phase as well.
Duration
Team of 4 for 13 weeks
-
Ryan Li - Developer
-
Tung Truong - Developer
-
Ben (Tuan Anh) Vu - Developer
Methods
Competitive Review, Interviewing, Validation Experiments, User Persona, User Stories, Crazy 8's Priorities, Usability Testing, Wireframing, Hi-fi Prototyping, Agile Development
Tools
Adobe XD, Sketch, InVision, Adobe Illustrator, JIRA, Github
Project Link
Overview
-
Problem & Objective
-
Value Proposition Canvas
-
Interview Target Mapping
-
Customer Profile
Research
-
Competitive Review
-
Assumptions Map
-
Problems Interviews
-
Validation Experiments
-
Updated Assumptions Map
-
Jobs Map
-
User Personas
Design
-
User Stories
-
Crazy 8's Priorities
-
Lo-fi Wireframes
-
Lo-fi Prototype
-
Solution Interviews
-
Lo-fi Prototype V2
-
Style Guide
-
Logo Design
-
Hi-fi Prototype
Evaluation
-
Usability Interviews
-
Project Poster
-
Reflection
-
Next Steps
The Problem & Solution
How can we streamline the search for events and organizations on-campus while tailoring to the students' schedule?
Home Page that advertises important events and student organizations
Events page that allows users to search for events and filter event types →
Users can choose a colored schedule block, which indicates that there are events at that time.
Yellow indicates overlap between the user’s school schedule and the events in that block.
Green indicates no schedule conflict.
Organizations page with search and filter for organization types
Event & Organization Information Page
User Profile: Profile, Calendar, My Events, My Organizations
But where did we start?...
Problem: Students at Boston University have difficulty finding clubs and/or events on the campus.
Product Goal: We want to create a product that addresses the issue of finding a community at BU by improving search for events, clubs, and opportunities, as well as tailoring it to students’ schedules.
Value Proposition: Our product will help Boston University students who want to find a community by facilitating and streamlining the search for events on campus and factoring both schedules and keywords, unlike large social media platforms like Facebook and current BU resources such as BU Engage.
Value Proposition Canvas
Assumptions Map
After coming up with our value proposition canvas, we also came up with our customer profiles and segments, which includes “freshmen and sophomores,” “BU students with free time,” and “club leaders and event organizers.” We also created our interview target map to identify where we could find potential interviewees. The assumptions map consists of our assumptions of our target audience, as well as how we will attempt to validate our assumptions through our validation experiments.
Problem Interviews
To initialize our primary research, we started by interviewing our target users. Specifically, we interviewed freshmen, sophomores, and juniors. We were able to interview 5 of our target users based on our schedule.
Finding #1: Many freshmen and sophomores are not aware of official BU platforms like BU Engage or BU Calendar and do not use them even if they are aware of them.
Finding #2: BU students rely heavily on SPLASH (annual student organizations fair), social media (Facebook groups), email newsletter, and word of mouth to receive information on events.
Finding #3: Most of our interviewees went through a tedious process to find a suitable club.
Based on our findings, the following design implications can be made, we realized that the one common core need of our target users is indeed a streamlined search for events on-campus, so that those who did not initially sign up for the club can view the events in a transparent way as well.
The following are design implications and features that could potentially be included in our product:
-
Allow users to contact clubs before attending events
-
Filters that narrow down search in terms of interests and time
-
A schedule function that can add events to their schedule and see which events the users can attend based on their schedule
Validation Experiments
To begin our validation experiments, we used Reddit and Facebook to gauge the amount of interest in our product to determine if this project idea indeed has a market. We first determined our validation threshold:
“We are moving forward with this project if we receive validation on the hypothesis that BU students cannot efficiently find on campus clubs or activities with the current resources available from Freshmen and sophomores interview subjects and 40% from a population of at least 100 people from our validation experiments.”
The result was that our validation threshold was exceeded, so we can move on with this project.
On Reddit, we used a discussion thread to identify keywords and advice: SPLASH and social media were mentioned the most based on what users used, and there was a clear indication of desire for a better platform.
On Facebook, we ran an ad as well as Facebook polls in various BU Facebook groups to gauge interest in the product. The ad had received approximately 1/4th of validation threshold within 24 hours of creation. Meanwhile, the Facebook polls also exceeded our expectations.
.png)
Considering the scale of the project, due to the limited timeline of the project, we will focus on only the student side of searching for events rather than the event organizers’ of creating and advertising the events. As the validation experiments show, there is a significant amount of interest towards our product for this customer segment.
User Personas
Next, we created 3 user personas that represent our target users based on our primary and secondary research. After creating our user personas, we then created a series of user stories.
Crazy 8's Prioritization
As the user stories were clarified, we all had a good idea of what features and functions the product will entail. Thus, we started our brainstorming session for our design sprint through a method called “crazy 8’s prioritization.” It is a fast sketching exercise where each of us were given 1 min to sketch an idea with a total of 8 minutes. This means that with the four of us, we would have 32 ideas in the span of 8 minutes. The following picture shows the result.
After the ideas were sketched, we discussed what was on there as a group and voted for ideas that we wanted to prioritize. Green stickers represent total agreement, yellow stickers represent moderate agreement, and purple stickers represent low priority. Note that we ran out of green stickers, so any stickers that were split in half represent 1 vote of green sticker as well.
_HEIC.png)
After this session, we went ahead to create a sketch of low-fidelity wireframes as a group, where we agreed upon the features and basic interface of our final product. From here on, I worked alone as the UX designer, and the developers started to think about how they will develop the product with back-end and front-end considerations.
Low-Fidelity Prototype
Before I could create a high-fidelity prototype, I wanted to create a low-fidelity prototype and receive feedback. Based on the initial wireframes that I drew on paper with my developer teammates, I created a low-fidelity prototype on Adobe XD.
In order to test it, we recruited 5 target users to participate in our usability testing sessions. We went through a series of solution interviews where we asked the users to use the prototype and think-aloud as they do so. Through the feedback sessions, we discovered that the participants really liked the schedule function for which users can easily see which events they can go to based on their schedule. Based on their feedback, I adjusted the prototype accordingly and created the second version of the low-fidelity prototype, which I used as a basis for my final prototype.
Style Guide
I started by creating the logo for our product. Since our product stands out amongst our competitors because of our scheduling feature, where users can search for events based on their schedule and see whether events conflict with their schedule, I wanted to incorporate this aspect into the logo design. Thus, I made it seem like an “E” which stands for “experience” and “events” and made it seem like schedule blocks or a time table.
I used green as the primary color for our product because green represents stability and growth. As this product is for college student events, I wanted to make sure that there is an energetic and lively aspect to it, but also professionalism. I did not use Boston University’s color palette because we were told that it is okay to not use it and come up with our own color palette. This is also in consideration of the fact that if this product would ever be used amongst other universities, using BU’s colors would not be a good choice from a branding perspective. Thus, I chose to keep it open and came up with my own color palettes. To create the color palette, I used complimentary colors (warm red and green) as well as an accent color (warm black).
For typography, I chose to use Rubik, which is a sans serif font. I chose a sans serif font because I wanted a modern typeface with a clean and sleek feeling to it; it also goes well with a website interface. For the UI elements, I based it on Google Material Design.
High-Fidelity Prototype
Minimum Viable Product (MVP)
Finally, the MVP was created by the developers after I handed them the high-fidelity prototype. Though, they had to start building the product when I only had given a low-fidelity prototype to them due to the constraints of the timeline. Thus, I also helped with coding the front-end in the end by editing the CSS.
If There Were No Constraints...
Because the fellowship program allows 1 UX designer and any number of developers on the team, the developers helped ideate and do research for the product at the beginning phase as well. They started coding after the research phase was completed. Thus, the deadlines were tough and the developers had limited time for many parts of developing the MVP.
Due to time constraints, we were only able to interview 5 people for both our problem interview and solution interview. While we conducted validation experiments to ensure that our project has a market, we could have spent more time on UX research by conducting a survey or creating an affinity diagram for our interview.
For the design phase, I only had 3 weeks to complete everything according to the deadlines and schedules of the program; I also wanted to get it done as soon as possible so the developers could start coding my designs accordingly earlier. Thus, I handed in the final high-fidelity prototype to the developers a few days earlier than the deadline set by the program, knowing how stressful coding in a short time frame can be. If I had more time, I would have added in more animation and interactions in the hi-fi prototype. I would also have improved design for accessibility and developed a responsive website prototype by adding in a mobile screen size version of the website.
Here are a list of features we would implement if we were to continue with this project:
-
Tracking achievements: As users attend events and become members of more organizations, they will be able to accumulate different achievements for their personal satisfaction.
-
Allowing users to add their own events.
-
If users do not have a Google Calendar, they will just need to screenshot their BU schedule, and we will make a calendar for you.
-
Admin side of the website where they will be allowed to manage and edit their own club.
What I Learned
It was fun working with a group of developers and I am glad that we were all involved in the research phase of the project. I appreciate how my developer teammates gave me suggestions when I was making the initial wireframes on paper during the design sprint. I also want to thank my design mentor, Margot Menestrot, for giving me lots of advice. The program was certainly a simulation of a start-up environment so I thought it was an interesting experience.