What went well, what didn’t, and how I’m going to improve
Lighthouse is a cross-platform application that provides long-term solution to career building.
“What should I do with my life?” Many people ask this question in their early stages of the career. I had, too. In the recent past, I switched several jobs to find my calling — UX design. My experience kept me thinking, how could peole get through this stage less painfully? It motivates me to take this challenge and designed Lighthouse.
I followed a double-diamond process to design my solution:
- User research
- Competitive analysis
- User personas
- Journey maps
- Mental model
- User stories
- Information architecture
- Task analysis
- Low/Mid/High fidelity prototype
- Usability testing
- A/B test
- Visual design
- Design language system
- Clickable prototype
- Video presentation
The entire project took me 1200 hours spread from October 2017 through April 2018. Meanwhile I’ve been studying with CareerFoundry’s Certified UX Designer course and preparing for my TOEFL test (and I got 111 out of 120 in my test in March!✌️💪)
Check out my polished portfolio on Behance:
I finished the project under the guidance of my wonderful mentors Arun Nagargoje and Tiffany Teng. They provide valuable feedback to every one of my exports and milestones, help me make design decisions, and generously recommend sources to level up my design skills.
The icons and illustrations in Lighthouse are from UI8.net.
What went well?
1. Information architecture
Clear and highly organized information architecture after several iterations.
Skills: Information architecture, task analysis, card sorting.
Process: I defined several high-level user tasks at first, and designed an initial information architecture. After that, I conducted card sorting, and used the result to curate the original information architecture. The adjustment continues when I design low-fidelity and mid-fidelity prototypes.
2. User research
Thorough user research before getting down to design.
Skills: User interview, affinity mapping, personas, journey maps, mental models.
Process: Before getting down to user interviews, I had some initial chats with friends from China, Unite States, Germany and the Netherlands. Also, I posted a couple of questions on Quora and studied people’s answers. Then I structured my interview script, and conducted remote interviews with target audience from 10 countries, 3 continents. After analyzing interview results with techniques including affinity mapping, I compiled my findings and created deliverables as user personas, journey maps and a diagram of mental model.
Deeply empathizing with target audience by close relate my personal experience with the project.
Process: When deciding on a specific domain to direct the project, I chose career building because I have fresh first-hand experience on this theme. I left an Alibaba job, a PhD program and finally found my calling—UX design. There are many other people who’re just like me and work very hard to find their career path. This inspires me, and I decide to design Lighthouse to help them.
4. Innovative features
Creatively designed multiple features to help users to solve their problems.
Skills: User interface design, wireframing, prototyping, MVP, lean UX.
Process: My goal is to create a long-term support for people’s career building, and I researched on their frustrations and needs, then I designed Lighthouse’s features to provide solution. The innovative features include enable multiple conversations, career assessments, career tips Q&A and achievement badges.
Using the metaphor of lighthouse and sailing to give users a better idea and joyful experience.
Skills: Mood board, story telling, color palette.
Process: In the beginning, I named Lighthouse “Mavenoz”, pronouncing like “maven knows”. Then when discovering the color palette of the product, I asked myself a question: “What kind of experience do I want to create for users?” The answer is assuring, guiding, supporting. The lighthouse and sailing metaphor comes to my mind.
What didn’t go well?
1. Usability tests
All usability tests are conducted remotely, thus lost some helpful insights.
Skills: Usability testing.
Process: After designed mid-fidelity prototype, I wrote several user scenario stories and used them to guide the usability test process. Yet all of my tests are conducted online because it’s the only way I can test people from Europe and America at the same time, so some of the helpful insights are lost due to technical problems.
Solution: Develop my usability testing skills to explore more of people’s feedback; conduct in-person usability tests with local people to complement my project.
2. Interview recordings
I spent too much time transcripting my interview recordings.
Skill: User interview
Process: I did all the work in interview myself—talking with the participant, taking notes, and transcribing recordings to text. As a result, the work took me a lot of time.
Solution: Later in my process I realized, there’s no need to transcribe all the recordings; instead, I could just job down a few key points during the interview, and write down my retrospective right after it, and they’re sufficient for the project to move on.
3. Mid-fidelity prototype
I took care of too many details in the mid-fidelity prototype, and wasted a lot of time.
Skill: Wireframing, rapid prototyping, design sprint
Process: I started with paper sketch, then made them digital using Balsamiq, and then using Sketch app to make grey-scale prototype. While working with Sketch, I made about 80 screens, which took me a huge amount of time, because I was taking care of many visual details as well, which turned out unnecessary at that stage.
Solution: Leave visual design behind mid-fidelity stage, and focus on problems and solutions in the mid-fidelity stage.
4. Sketch Symbols
Sketch symbols can save huge time when making changes; unfortunately I didn’t make full use of it with my prototype. As a result, I always spend hours changing the same visual pattern on all screens.
Skills: High-fidelity prototype, UI design.
Process: There were a lot of reusable patterns, and previously I just copy-and-paste them from screen to screen. The result is, when I needed to make a minor change to the color or stroke weight or text size, I had to work on every screen.
Solution: From the beginning of high-fidelity prototyping, make every reusable patter a Sketch symbol.
5. Icons and illustrations
The icons and illustrations in Lighthouse aren’t original, therefore their styles (minor aspects such as corner radius, stroke weight) do not fully convey Lighthouse’s message.
Skills: Graphic design, illustration.
Process: I download icon sets from UI8.net so that the icons belong to the same style.
Solution: Pick up icon design skills and design icon sets of my own.
What could be improved?
1. UI design
The color palette needs some improving, and I could add some animations to user interaction.
Skills: UI design.
Process: I created a mood board as a guideline of Lighthouse’s visual style. Since the message I want to convey is a supportive, guiding and assuring experience, and taking the sailing metaphor into consideration, I decided the colors for Lighthouse are navy blue, light blue and red (color of a lighthouse’s strip).
2. Secondary features
In the first sprint, I highlighted the core features of Lighthouse (find a mentor, chat). Next, I can complete the secondary features to bring more value to users. Secondary features include “my career” and “career tips”.
Skill: Information architecture, wireframing, prototyping.
Process: I will follow another round of design thinking (discover, define, design, deliver) and use a human-centered approach to design the secondary features.
3. Design language system
I build a website to illustrate the design styles of Lighthouse. After releasing, I made many changes to the prototype, so the design language system website needs update as well.
Skill: Visual design
Process: I will update the colors and visual elements in the design language system, and add more detailed descriptions to them.
4. User scenario stories
User scenario stories are applied in usability testing and presentation. Currently I have two solid scenarios (job seeker and junior professional), to improve I need design more scenarios to help audience relate to Lighthouse.
Process: I will write user stories based on real scenarios.
5. Video presentation
I made a 2 min video presentation telling the story of a representative user Jennifer and show how Lighthouse helps. However the introduction to Lighthouse’s feature is quick and brief, and I can explain that in more detail later.
Skill: Storytelling, movie making
Process: I will polish my video script, adapt the new user scenarios, and ask a few of my friends to act in the video. And I will create an updated video presentation.