hubble_horizontal_white-1

Helping university students find their ideal career paths by shadowing industry professionals.

WHAT

Hubble is a mobile application that helps students explore different careers by connecting them with industry professionals and allowing the students to shadow them for a day.

TIME

8 weeks

ROLE

User Research (Interviews, Competitive Analysis/Market Research), Wireframing, Prototyping, User Testing, Branding, UI Design

TOOLS

Sketch, inVision, Adobe Illustrator, Principle

 

PROBLEM

University life is hard when you have no clue what career path to pursue.

Did you know that:

44% of students don't know what they are going to do after graduating

75% of students change majors at least once before they graduate.

I had this problem, my friends had this problem, my friend's friends had it too. I thought I have got to do something about this.

 

“How might we help university students acquire career advice from industry professionals to help them find their career paths?”

GOALS

 I had 2 goals that I wanted to accomplish:

1. To ease the anxious feelings of university students when reaching out to industry professionals.

2. To allow students to explore different career options related to their field of study. 

SOLUTION

Meet Hubble.

An app that allows you to explore different professionals from various backgrounds and schedule shadowing sessions. Instead of having to spend hours researching different careers or getting ghosted on LinkedIn, Hubble makes it simple and accessible while giving you confidence that you will find the perfect career path. 

Mockup_diagonal_white3
RESEARCH

To figure out whose pain points I will be solving I did 5 interviews, 3 with university students and 2 with recent graduates.

From my interviews, I found out that the problem here lies within the student community. It's for all the students out there who are struggling to find a career path. Those who can't seem to figure out how to put their passions into something to create a livelihood. From all the data I got from my interviews, I then created a persona to encapsulate all their pain points.

Say Hello to Isabella, your fellow lost, confused university student.

Capstone-Main-Persona

Persona of Isabella

Isabella struggles to find information about what she can use her degree for. She thought she wanted to be a teacher but then realized, it might not be for her. Now in the middle of her degree, she is even more lost as to what to do with her life. She then tries to consult industry professionals for help but then finds out that there are so many steps to this process and experiences a ton of frustrations. 

Here is her journey:

Experience Map

Experience map for Isabella's informational interview journey

Isabella gave me a ton of insight on where the pain points in her journey were to get the information she needed. She just wanted to talk to someone, or even better yet, shadow them through their workday, just to see what it is like. 

SKETCHING

From the task flow diagram, I started to ideate the features of the app to help Isabella find the perfect person to shadow.

I wanted to create features that directly tackle Isabella's biggest pain points so I made the following:

PAIN POINT #1: Isabella has no idea where to find people who are willing to spend some time talking to her and giving her advice on different career paths.
SOLUTION: An explore page (this is where they land) that lists a bunch of professionals where Isabella can explore the various careers people are in and reach out to so she can shadow them throughout their workday.

PAIN POINT #2: Isabella has no idea what to do with her current degree.
SOLUTION: Smart recommendation of people in her explore page based on her inputted likes, interests, and background on her profile.

PAIN POINT#3: Isabella is anxious to reach out due to the fear of getting rejected or ghosted.
SOLUTION: A system where Isabella sends a shadow/connection request and the professional messages her first once they accept the request. This allows Isabella to feel that the professional wants to help her since they message her first and are engaged in the conversation.

new doc 2019-07-14 23.20.32_1

the first sketches I made when ideating features that I used for paper prototyping

new doc 2019-08-28 14.00.56_1

second round of sketches after 1 round of paper prototype user testing

USER TESTING

To check if my designs were even intuitive at all, I did 3 rounds of usability testing, 1 with the paper prototypes, and 2 with mid-fidelity wireframes each with 5 participants.

the tasks the participants were asked to perform were:

  • Explore the careers that are related to your field.
  • Send a request for a shadowing appointment.
  • Schedule your appointment with your chosen professional.
      
ITERATION 1
Explore 3
Messaging 2
Suggested
ProfProfile
ITERATION 2

The design decisions I made here are:

  • text orientation to make it easier for users to read,
  • changed the icon of messaging to symbolize something related to messaging = the communication tower.
  • Added skills that matched with the professional to make it easier for the user to know why they were suggested. 
Explore 3
Messaging 2
Suggested
ProfProfile


I found a bunch of issues and found lots of places to improve. Iterated on the designs around 4 times to get it to be as intuitive as possible. I was getting close to getting something for Isabella to use. 

DESIGN SYSTEM AND BRANDING

For the look and feel of hubble, I wanted to go for something fun and playful so that Isabella will not feel intimidated when using the app. I also went with a space theme to capture the "exploring different careers" aspect of the application.

Logo & Wordmark Sketches
Wordmark
Logo
FINAL DESIGN AND FEATURES

After testing and getting feedback, these are the final designs and features.

EXPLORE PAGE

Isabella can now explore professionals that matched her skills, interests and goals in a friendly and encouraging environment.

Here, she can easily find professionals who are willing to help her out and this empowers her to start exploring new career paths.

hubble-explore
hubble-profile
PROFILE PAGE

She can quickly see an overview of the professional’s background to decide whether it's a good match.

Isabella can also "Request to Message" from this page which would send a notification to the Professional that someone wants to shadow them.

SENDING A REQUEST

She can request to connect with her chosen industry professional with just a click of a button. She doesn't have to dreadfully reach out to them to only be ~ghosted~ by the other end.

hubble-request
hubble-messaging
MESSAGING

Once the professional accepts the invitation, they will send a message to Isabella and Isabella will get notified that she has a new message and that her request has been accepted.

In this app, professional messages Isabella first and she can directly message back showing that they are as eager to meet her as she is to meet them.

CHALLENGES AND WHERE TO IMPROVE

throughout this journey, there were many things that I could have considered but did not have the time and resources to. Since I only had access to the student POV to the problem space, I would like to research more about the industry professional's POV in order to make a Hubble version for the professional's side. Due to the fact that I was unable to interview professionals, there is a possibility that there would be no one interested in the professional side of things so that's definitely something where I could have improved on or could be my next steps.

WHAT I LEARNED

I am very proud of what I was able to accomplish in just 8 weeks. Though I had difficulties, I learned so much. Here are my top highlights:

REMEMBER WHO THIS IS FOR.
Always go back to your "why's" and your "for who's."

DATA DRIVES FEATURES.
Integrate the user's pain points in all your design decisions.

EMBRACE AMBIGUITY.
Face your problems head-on and don't run away from them in times of difficulty or ambiguity.

ENJOY THE JOURNEY. ✌︎

Thanks for getting this far, I know it was a lot. But hey, here's more things to read...

PROS RebatesProject type

PROS ConnectProject type

Jupyter3DProject type

keepfreshCase Study

Back to top Arrow