Huiqin Gao | UX Designer
I design to make information more accessible.
Lighthouse@1x (1).png

Helping people build a fulfilling career

A trustworthy career building companion in your pocket.

Lighthouse

A trustworthy career building companion in your pocket

Lighthouse@2x 2217.jpg
 

Background

For: CareerFoundry UX Immersion Course

Challenge: Create an app that helps people find experts

Length: 200 hours

Skills: User interview & surveying, affinity mapping, POVs (personas, mental models, journey maps), card sorting, task analysis, mobile-first design, low/hi-fi prototyping, interaction flow map, mood boards, usability testing, A/B testing

Tools: Sketch, Balsamiq, OmniGraffle, InVision, Adobe Photoshop, Adobe Illustrator

My role: Lead designer

What is Lighthouse?

Your career doesn’t come with an instruction manual, but thanks to Lighthouse, it at least comes with a guide. 

Even highly educated professionals start their careers feeling unsure and insecure, lost in a maze of choices. They’re unsure whether to change jobs, how to grow their careers, and whether their current gig is a pitfall to avoid or a mountain to climb on the path to greatness.

Reflecting on the forgotten art of professional mentorship, I had an idea to help beginners in their careers by connecting them with experienced mentors in a modern way. Using people’s phones — the tools they’re already using – Lighthouse connects protégés and mentors in a network based on social good with the goal of furthering its users’ careers. 

 
 

Lighthouse—Concept Video

 
 

 

Process

Double Diamond Process

Double Diamond Process

I followed the Double Diamond process to come to my design solution, I solved the problem through four stages: discovery, define, design, and deliver.

 

 
 

Discover

Based on takeaways from my personal career journey, I decided to build a career guidance app. As a first step, I explored the problem space in career building solutions and created a problem statement for my project.

I hypothesized that my target users lacked proper support from their personal networks and needed a straightforward means of connecting with experienced industry professionals.  

 
 
Screenshot of CareerVillage  (source)

Screenshot of CareerVillage (source)

Screenshots of Shapr  (source)

Screenshots of Shapr (source)

 
 

Through competitive analysis of two existing solutions in the market (CareerVillage and Shapr), a product opportunity quickly emerged: an application supporting in-depth, online communication to help users form long-term relationships regardless of location.

I then conducted target user interviews to determine: (1) how they live and work, (2) how they define “career building”, (3) their career-building frustrations and desires, and (4) how they currently tackle career-building problems.  

I held remote interviews and surveys of target users because they were a flexible, cost-effect means of gathering information while mitigating regional biases.

 

I interviewed 11 target users from 8 countries, 3 continents

 

 
 

Define

Having validated my hypothesis and target users, I synthesized my findings into personas and journey maps based on three types of users: college students, junior professionals, and mentors.

Personas

 
jennifer (1) (1) (1).png
Daniel (Mentor)
Luca (College student)
 

Define

Journey Maps

Group.png
 

 
 

Design

Having empathized with and understood my target users, I then created a feasible solution to their frustrations. 

 
 
 

Low fidelity prototype

I started by applying my knowledge of information science to construct the information architecture (Appendix A), which I then evaluated with card sorting.

Considering my information architecture and personas, I created Lighthouse's task analysis (Appendix B)

Next, I created a low fidelity prototype (Appendix C) using pen and paper. With that visualization in front of me, I was able to let go of a lot of my initial ideas to focus on the ones that best fit my target users' needs. This is what emerged:

 

 

Design

Mid Fidelity Prototype

 
Chat - 01.1.png

Our users have tight schedules and put a value on information-dense, purposeful communication. With that in mind, I decided to implement a product with ways of sending diverse information efficiently. I put an emphasis on the quality of each thread as a way differentiate our product from other applications and social media. 

Communication is arranged through scheduling free blocks of time for each participant.

 
 

Because I recognized that different mentors can be valuable to certain mentees at various stages in their development, I designed a profile browser based on many dimensions of each mentors’ experience and contributions, domain of knowledge, and discipline. 

I believed that finding the right mentor was not a matter of finding the highest rated mentor, but rather the right mentor for right now.

Mentors - 04.png
 
 
Chat - 01.6.png

Finally, career guidance is more than just theory and advice; my research indicated that the most useful advice is actionable advice. In the spirit of that, I designed Lighthouse to facilitate specific assignments by mentors to mentees, such as career assessments and online courses.

 
 

After mocking up my main ideas, I added contextual information—meaningful copy and images—to my prototype and made it clickable (link), ready for usability testing.

(The app was previously named “Mavenoz”. I later changed it to “Lighthouse”.)

 
Mid fidelity prototype

Mid fidelity prototype

 
 

Design

Usability Test

After finishing the mid-fidelity prototype, I carried out usability testing with target users to evaluate: (1) learnability and efficiency with those interacting with Lighthouse for the first time, and (2) efficiency in completing basic tasks, such as signing in.  

Again with the goal of  mitigating regional biases, I conducted online interviews with individuals from Asia, Europe, and North America.

Insights from the usability testing revealed that:

 
usability test results2x (1) (1) (1) (1).png
 
 

Design

High Fidelity Prototype

Usability testing brought areas of friction to my attention. To prioritize the usability errors, I recorded all of my findings in a rainbow spreadsheet. 

I then made revisions to the prototype and updated it by adding visual elements, such as color palette and typefaces, making my high-fidelity prototype (Appendix E) ready for further iteration.

 
Apple TV@2x (1) (1) (1) (1) (1) (1).png
 
 

 
 

Deliver

To make collaboration easier for other designers and developers, I created the design specification of Lighthouse, including a definition of the color palette, font faces, text styles, widgets, iconology, and imagery (Appendix F).

I also built a website to show the design language system (Appendix G) so future teammates could access my work. The code template is adapted from HTML5Up.

 
 

 
 

Appendix

Appendix A: Information architecture

Appendix B: Task analysis

Appendix C: Low-fidelity prototype

Appendix D: Mid-fidelity prototype

Appendix E: High-fidelity prototype (open on InVision)

Appendix F: Design specification

Appendix G: Design language system website (external website)

Appendix H: Retrospective of Lighthouse project (open on Medium)

 
 

 

Credits