BLOOM in Action

Watch the full walkthrough of the app

Project Overview

WHAT IS BLOOM?

The Bloom App is a communication platform that allows first-years to match with senior students at their college based on similar interests. Once students are matched through a survey, they will be able to send each other personalized messages and can keep up to date with important events on a calendar like birthdays, big exams days, and graduation.

MY ROLE

I, along with two other students, developed the Bloom mobile app as a part of a semester-long project in my Human-Computer Interactions course. I was responsible for conducting user interviews and usability testing using the platform UserTesting.com. I also created wireframes and a high-fidelity interactive prototype using Proto.io Balsamiq, and InVision based on our usability testing results and interview analysis.

Problem Statement

Our team realized that as a result of the pandemic many first-year students would be starting college remotely and may find it especially hard to transition into the year. Due to the need for social distancing and with many events being held online, first-year students feel a loss of connection to their peers and community. Meeting people now through online classes and/or through large social media platforms has not been able to replace in-person interaction. College students, particularly first-years, are seeking a way to make authentic and long-lasting one-on-one connections that can become friendships/mentorships.

User Interviews

We conducted 3 phone interviews with first-year students at Wellesley who are studying remotely and on-campus to better understand their pain points entering a new school year during the pandemic. Through these interviews, our team was able to understand the students’ feelings, experiences, and coping mechanisms.

Personas

“I've really enjoyed taking classes and connecting with my peers so far this semester but with everything being remote, I feel like I might not be able to form really close-knit relationships, which is something I was really excited about coming into college.”

CHALLENGES

1. First-years want to make the most of their college experience by meeting new people and that becomes difficult because there are limited ways to connect.

2. Prefers a more intimate type communication that Zoom won't provide. There are a whole other set of challenges communicating virtually that students will have to adjust to.

“My sister is an alum at the college and always spoke about the amazing mentorship that she received. I really hope that I'll have that same opportunity even though a lot of the student body is remote this semester.”

CHALLENGES

1. Finding ways to reach out to seniors. Older students on campus have more experience to share with younger students and with a lot of them being remote for the year there isn’t a clear pathway to build those connections.

2. Navigating relationships and communication is hard to do especially when you are placed into a new environment.

“Orientation definitely gave me some confidence to reach out to people, but I'm frustrated at times by the nature of Zoom as it is hard to make small talk.”

CHALLENGES

1. Building the confidence to interact online on unknown platforms. Students need to adjust to using new technology on top of all of the other changes with going to school remotely.

2. Making online conversations feel normal and real when you feel so isolated and disconnected.

Usability Testing

Our team developed an interactive wireframe using Balsamiq for usability testing. We conducted 3 rounds of usability testing with random participants ages 18-24 sourced through the Usertesting.com platform. Each participant completed three main tasks on the app, imagining that they were a user setting up a profile, adding an event to the calendar, and sending a message. Each session was screen-recorded so we could hear their thought process, questions, and pain points as they navigated through the prototype. We also had the participants complete a post-task questionnaire to elaborate on their initial thoughts.

Usability Testing Findings

PROFILE TASK

Participants suggested making the screen after the completion of the matching survey more specific. We adjusted the screen to include information about when users should expect an update about their mentor match.

CALENDAR TASK

While participants appreciated the options that were provided (in terms of types of events that could be selected), we made sure that the selection that we offer was as thorough as we could make it without overwhelming the user. We added popular events for students to the selection like birthdays, graduation, and exams days.

MESSAGING TASK

Participants suggested incorporating a way to alert users that messages have been sent successfully. We added the text “Delivered” under messages sent by the user on the dashboard page.

Brainstorm & Sketch

We created low fidelity wireframes using a concept board to sketch out our ideas and brainstorm features and layout options. We were inspired by the Wellesley College tradition, "Flower Sunday," during which first years are matched with a senior student mentor.

SURVEY & CALENDAR

The survey feature was incorporated to allow users the freedom to personalize their experience on the app. We thought that similar to popular dating apps, we'd like to add a questionnaire that would be used to accurately match users based on academic and social interests. The calendar was another feature we wanted to incorporate into the Bloom app so that users could keep track of important events (including birthdays, social events, etc.)

DRAFT MESSAGE & DASHBOARD

Because Bloom is primarily a communication app, we explored the messaging feature early on in the brainstorming process. A concept that we decided to build on later in the design process was the message template. Users would in theory be able to customize their messages and also choose from several templates with pre-designed themes. We also sketched out some ideas for a dashboard, brainstorming what returning users would see upon signing into the app. One idea we brainstormed was allowing users to move to the main pages through navigation buttons arranged in a flower design. This functional element would incorporate the Bloom branding.

Task Analysis

We mapped out a user flow that could potentially be faced by someone who is revisiting our app

Wireframing

We designed two versions of wireframes first using a concept board to develop our sketches and then using the Balsamiq software to iterate on our designs. Below are some of the main features that were later incorporated into our final prototype.

MESSAGING

Our team decided to build out the idea of the message template that we brainstormed from the beginning of the design process. To draft a message you start by selecting a themed template or choose a blank template. The medium-fidelity wireframe includes a more extensive list of template options that users can scroll through.

CALENDAR

The calendar page includes a swipe feature to browse through the months of the year. The medium-fidelity wireframe is more built out to include a color signifier to distinguish between days that have passed in the calendar and current/upcoming days in the month. We also designed the calendar to highlight dates where events were added.

PROFILE

New users are automatically prompted to create a profile by filling out the survey which asks questions like name, class, year, and major. After filling out the survey, users are brought to their completed profile, where they can choose to edit the information they entered or they can begin the matching process. The V1 wireframe includes both the profile creation process and match process together, but we decided it was better to separate those to reduce the cognitive load and space out tasks to provide a more seamless experience.

HOME SCREEN & NAVIGATION

We designed the home screen to act as a dashboard of sorts. The home page would house all recent activity including messages sent, calendar notifications, and app updates. Notifications would be color coordinated to represent the different types. The difference between the V1 and V2 wireframe is that as we iterated on the design. For the navigation bar, we decided to incorporate the profile page into the bar instead of placing it separately above where the control panel lies. We figured it would be more intuitive for users to access the profile page where they would expect to see other task-related pages.

Product Vision

Visual Design

LOGO

For the BLOOM logo, we picked a bold rounded font that goes well with our flower logo/icon and stands out when in proximity to other text on the page (in Trebuchet).

GENERAL TEXT

For the general font that is used throughout the app, we chose Trebuchet (bold). Trebuchet is the font we use for assignments and class activities, and we decided to incorporate it because it is clean, readable, and has a modern feel.

ACCENT COLORS

We used both pink and navy blue to go with the floral/spring motif and to promote a feeling of relaxation and tranquility. These colors were used in our logo and used as signifiers throughout the interface. Cyan is used for signifiers and buttons throughout the interface to catch the user's attention.

BACKGROUND & TEXT COLORS

We paired the soft pink and navy blue with an off-white background to keep our layout looking fresh without creating too much visual noise. The text is a dark gray to compliment the off-white background.

Prototype

We created a high-fidelity prototype using the proto.io software and then added our app pages into InVision, where we added the interaction features.

ONBOARDING AND MATCHING

We updated the screens to incorporate visual signifiers to guide users through the survey with confidence. There are required input fields that have asterisks next to their title. Additionally, as users fill out the survey, blue check marks appear next to input fields that have been filled out successfully.

MESSAGING

Our final design includes screens for drafting messages with ability to customize with colors, text, and media. The dashboard shows recent activity including messages that have been sent and received.

CALENDAR

We updated the calendar task to allow users to send messages attached to certain events. Users can also add multiple events to selected dates by tapping the “Add Another Event” button. These two shortcuts allow for users to complete tasks in the calendar section more efficiently.

Interactive Prototype

Takeaways

This project was my very first introduction to the world of UX and I was able to gain lots of fundamental knowledge.s. Working with my amazing team made this a memorable experience that set me on the course to continue pursuing a career in UX design.

What I Learned

• Consistency is crucial to providing a seamless experience for users

→ While the team was excited to start building our prototype, we needed to remember to sync up with each other often during the design process to make sure consistency was maintained throughout the interface.

• Feedback from the usability testing was one of the most valuable elements that we incorporated into developing our design, but it also came with challenges

→ Collecting feedback from an outside perspective was crucial to putting together the final iteration of the prototype. The process of putting together the test was challenging. We had to realize that the users were unfamiliar with the prototype software we were using and for that reason we needed to add another layer of detail to our instructions to make sure the participants weren’t lost during our test.

• Confirmation dialog is important to incorporate in order to reduce users’ non-intuitive actions

→ Although this project was a rapid prototype, I wish we had put more time into designing alert dialog and acknowledgement components throughout the interface. As I conducted usability testing, I learned about the importance of informing the user about important actions and tasks, especially if they can’t be undone or reversed. If we had worked on incorporating that earlier in the design process, I think we could have designed a more accessible interface.