Coastal University App

Helps first-year international students associate with the campus community

Summary

Coastal University is a native iOS app that helps first-year students associate with the campus community and gives them a virtual platform to create meaningful connections in a fully remote world during COVID-19 that has forced classes to be online this year.

ROLE

UX Research
UX Writing
UI Design

TIMELINE

4 Days

TEAM

Rejeanne De Jong
Aya Ataya
Trish Thibault

TECH & TOOLS

Figma, Invision, Google Docs

THE CHALLENGE

Help first-year students feel welcomed and part of a community in a 100% online education experience.

Problem Space

Coastal University is a design sprint hosted by BrainStation and EY Design Studio. Given the on-going COVID-19-related campus closure scenario, we were challenged to leverage any digital technologies available to reimagine a first-year student's educational experience completely.

Frame_6

Constraint

Clients
We were given 3 personas to focus on: international students, mature students, or students with disabilities.

Experience type
Mobile Experience

Accessibility
Our solution needed to be accessible to the widest audience; thus must be WCAG AA Compliant.

Brand Guidelines

UI-Guidelines

DAY 1

Research & Strategy

Understand International Students

After we received a project from our client, we began to do research about the problem space. Ultimately, we decided to focus on first-year international students because our team included 2 international students (including me) to best empathize with these types of users.

Frame-2-7

As we researched how the COVID-19 related campus closure could impact first-year international students, we learned that this once-a-century event had affected the university economically and social engagements that first-year's are looking forward to experiencing. A fully online experience is against the whole concept of studying abroad: Experience in an international environment.

Interview our real audience

After acknowledging that the main goal of international students when they go abroad is to experience a new environment. We put our focus on this topic: Integration (Integrating international students into campus culture).

We then validated our assumption by conducting a user interview on 3 international students, who were the most impacted by the campus closure and travel restriction. We used the insights from these interviews to gather users pain points, behaviours, and motivations into different themes:

Frame-8-1

Persona

23

We converged on the following "how might we" question to guide our solution after dot-voting on potential 21 ones:

"HMW provide social spaces that foster organic interactions so that international students can connect with the greater campus community?"

DAY 2

Brainstorming & Ideation

Inspiration Findings

After the day of understanding the users, we kicked off day 2 of Ideation by getting inspiration from different apps in different industries o help guide our design decisions.

Based on our research, we know that remote social activities would be successfully conducted through chatbots, video conferences and interactive maps. Therefore, it is critical to analyze how commonly used those technologies deliver information to (young) users.

IMG_6099
IMG_6113

INTERACTIVE MAP

An interactive map could help Mila visualize the spaces that traditionally exist as meeting places on campus.

ex: Snapchat, Pokemon Go.

IMG_6109
IMG_6112

AI CHATBOT

We discovered an AI bot might be beneficial in helping Mila make choices according to what would best fit her interests.

ex: Google Assistant, Amazon Alexa.

IMG_6106
IMG_6105-5

VIDEO CONFERENCE

The use of a video chat could best facilitate interaction between students since over 90% of communication is in fact non-verbal.

ex: Zoom, Google Meet

User Task Flow

After discussing the possible approaches to help Mila, we decided to choose a Core Epic, converted the main User Story into a primary task, and then mapped it out with a Task Flow diagram, illustrating how users would navigate the app to complete the task. 

Due to the time constraint, we are unable to think about the larger user flow. Instead, we tried to focus on a single, linear flow for a specific task. This helped us think through the design before the feature is developed.


User Story: As a new international student, I want to schedule a meet-up so that I can meet other students with similar interests.

Task Flow: Schedule an online activity.

Frame-2

Rapid Sketching

Each of us was assigned to do Crazy-8 rapid sketching for our potential solutions and each team member drew a complete concept sketch from their rough sketches. After that, we used the dot voting method to voted for the concepts that we thought would best solve the user’s problem.

Frame-5-2-1
Sprint2_ideation-1-1
Frame-4-2-1

Storyboarding

After we've done our sketching. We began to think about the way to visually predict and explore a user’s experience with our product. A storyboard would be a great tool for us to see how our potential solution could fit in Mila's journey. By illustrating the persona in a given circumstance, we were able to communicate clearly the story with our stakeholders.

Mila is at first disappointed when she realizes classes will be online, but then Coastal sends her an app that can keep her connected to campus life. And shout to Rejeanne, our team's talented artist for these drawings

29-1

DAY 3

Prototyping & Testing

Testing and changes

Once having the mid-fidelity wireframes on hand, we did usability testing to figure out what made users unable or struggle to complete the task. We had 3 participants for our testing session and here are some changes that we made to improve the efficiency of our product:

Frame-4-3
  • Issue #1:
    Calendar and Events looked similar and confused the users

  • Solution:
    Replaced Calendar with My Events
    Replaced Events with Chat.
Frame-6
  • Issue #2:
    Home Page: User Profile occupied unnecessarily a portion of the screen).

  • Solution:
    Remove the User Profile and moved the chat icon into the Bottom Nav.
Frame-7
  • Issue #3: 
    The chat is heavily-texted and not friendly to the users.

  • Solution:
    Chatbot: Make chat lighter and add more empathetic questions

Final Product

See the InVision Prototype here

DAY 4

Presentation

On Day 4, we presented our idea and solution to a team from EY Design Studio that included the Executive Creative Director, the Executive Strategy Director, and the Manager of Business Transformation. We had to distill all of our hard work into a succinct and compelling presentation that told the story of our users' needs and how we effectively worked to solve them in 3.5 days. We had 5 minutes to present our ideas remotely and it was one of the best experiences to be able to present our work to such an incredible team and hear their feedback.

Screen-Shot-2020-12-21-at-5.53.00-PM-1

REFLECTION

Key Learnings

  • Teamwork is the key to success:
    This project was completed during the pandemic and we had to collaborate remotely in a short amount of time. It's very important for every team member to be assigned a specific task that aligned with their strengths and communicate effectively with other members.

  • Feedbacks from users and stakeholders are invaluable:
    Again, we always need to get back to the users as every design decision must effectively solve the real user's problem. Moreover, we need to learn to work along with stakeholders (in this case, Jennifer Ley, the Business Transformation Manager at EY) to make sure our team is on the right path.

If we have more time

  • Our next step is to track students' engagement with the app in order to adjust and keep them consistently engaged throughout the year. We will remind those who are not as engaged that they can receive co-curricular credits.

  • As Mila’s first language is not English, our next steps a translation API and an event subtitling function to help her with the language barrier. Also, to entrench Mila’s sense of community, we would give her the ability to create her own events.
window.onscroll = function() {myFunction()}; function myFunction() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("progressBar").style.width = scrolled + "%"; }