what 🤔

Product design of Hubble, which is an application that provides first-hand career advice through shadowing advice based on skill matching.

time 🕐

8 weeks

role 🎨

user research, wireframing, prototyping, testing, branding, UI design, market research

tools 🛠

Pen & Paper, Sticky notes, Sketch, inVision, Adobe Illustrator

for 📱

iOS, iPhone X & XR



I was a User Experience design candidate for BrainStation’s summer 2019 term that started on June 16 and ended on September 6. This case study is about my design process of hubble, the capstone project I worked on throughout the whole course.


Tl:dr The problem that I chose to tackle was to try and ease the anxious feelings students have towards acquiring career advice from industry professionals. 

I found that students have difficulty picking their career paths in their university years. According to a study by Liz Freedman,

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 ventured to come up with an easy and affordable solution that can help university students find the right career path sooner than later.


The question to be answered, then, is, 


“ How might we help anxious university students acquire career advice from industry professionals to encourage career exploration?”


my high-level goals for this project were:

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

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

competitive landscape

competitive landscape

LinkedIn vs Shapr


The primary competitors I looked at were Shapr and LinkedIn because these apps were the most related and most popular networking services at the time. 

My process for hubble was anything but linear. Throughout my process, I would always go back to the research phase since I wanted to make sure that each design decision that I was making was backed up by research and was addressing a pain point.

Design Process

this is how my process for hubble looked like. Lots of back and forths from the research, sketch and design stages and also lots of testing.

empathize & research

To start tackling the problem, I wanted to understand the pain points and frustrations of university students. To do this, I interviewed 5 people, 3 university students and 2 fresh graduates.

From the data I got from interviews, I created Isabella, a university student in her latter years of study.


Pain points

pain points of Isabella


I then wanted to understand the emotional journey Isabella would go through when asking an industry professional for a coffee chat. I created an experience map for her journey.

Experience Map

experience map I made for Isabella's informational interview journey

I found that most students are the most nervous when they have to contact their chosen industry professionals. 

After this, it was time to ideate on a solution to these pain points. I started by creating user stories for the features my application should have. I then created a task-flow diagram for epic: “Finding someone to shadow.”


new doc 2019-07-18 16.37.59_1

task flow diagram of the epic "finding someone to shadow"


From the task flow diagram, I started to ideate the features of the app that would be included in the task flow.

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


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:

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


round 1

Explore 3
Messaging 2

round 1 findings:

  • 80% of participants were able to complete task 1 with no problem.
  • 100% of participants were able to complete tasks 2 & 3 with no problem.

round 2

Explore 3
Messaging 2

round 2 findings:

  • 100% of participants completed all tasks with no problem.
  • Participants found the text too be too small.
  • 50% of participants were confused by the header hierarchy.

From user testing, I found that paper prototyping was the easiest and quickest way to test different versions of the same feature.


The finished app below allows Isabella to:

1) Explore professionals that matched with her skills, interests and goals

2) Quickly see an overview of the professional’s background

3) Request to connect with her chosen professional

4) Professional messages Isabella first and she can directly message back



1) explore professionals


2) see professional's overview


3) request to connect


4) message the professional

branding and feel

For the look and feel of hubble, I wanted to go for something fun and playful so that students 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

marketing to potential users

After finishing the final hi-fi prototype for the app, I started to think about how to market the product to potential users. To do this, I created a marketing website for both the desktop and mobile for people to browse and entice them to use hubble.

Click here to see desktop marketing website

Click here to see mobile marketing website


Marketing website mockup

next steps

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.

closing thoughts

This project was the biggest UX project I had to date, and I am very proud of what I was able to accomplish. Though I had difficulties in certain parts of the journey, I realized how important each step in the process is and that skipping even the simplest things like sketching will result in more difficulties along the way. 

The biggest takeaways I got from doing this project were the following:

  • Always go back to your "why's" and your "for who's"
  • Integrate the user's pain points in all your design decisions
  • Face your problems head-on and don't run away from them in times of difficulty of fear (aka never skip a step in the process)
  • Stay motivated and enjoy the journey because, in the end, we are trying to make the world a better place through technological intervention

see my other works!

keepfreshCase Study

pastel bankDesign Sprint

emerging media labux experience

air canadaRedesign

hubblePersonal Project