LAUNCHIT

Product & Visual Design · 2020

Overview

LaunchIt is a web app developed by a student startup. It's an idea incubator for college students to share their creative ideas and form teams for extracurricular projects.

My Contributions

  • Headed and shipped the redesign of LaunchIt to improve its usability. Led the design of 5 new features to meet user needs.
  • Worked with the PM and Tech lead to generate product strategies and roadmaps.

Duration

13 Months

My Role

Product Design Lead

Team

2 Product Designers
1 Product Manager
11 Software Engineers

Tools

Adobe XD
Principle
Adobe Illustrator


Final Output

Easily onboard

Since users tend to skip long and tedious tutorials, we created a quick and fun onboarding experience with animated illustrations that help them take a glimpse of our core features.


ui

Final Output

Explore and join various projects

Students explore all kinds of projects posted by their peers and faculty. Under each post, they can easily access information about the project and apply to a position that interests them with a few clicks.


Final Output

Manage your projects at one place

With this all-in-one platform, project leaders can manage applicants and know their competence well. They can edit applicants' statuses and quickly access their GitHub, LinkedIn, portfolios, and resumes.


Project context

Redesign LaunchIt

When I joined the team as the product design lead, they had completed the first release. My job was to redesign the whole product and implement new features to improve user experience.

Original Design

Original Design


problem statement

What's the challenge?

How might we redesign LaunchIt to streamline college students’ experience of forming multi-disciplinary teams for extracurricular projects?

user interviews

Learn about our target users

We interviewed 6 college students, asking about their decision-making process when seeking projects to join or recruiting people for their projects. We also asked them to explore LaunchIt and provide feedback so we could start with minor UI changes for the engineers to implement.

interview findings

usability tests

Sythesize findings and prioritize tasks

We conducted the usability tests with 6 users and acquired many valuable findings. With a solid base of usability tests, we became confident to create more significant changes in our design.

affinity diagram

We could make many changes based on the findings, but we didn't have enough capacity to implement them all. We prioritized tasks using the effort vs. impact matrix and applied a spreadsheet to keep track of the progress of design and development teams.

effort vs impact matrix and process tracking

usability tests

Turn insights into decisions

👀 Finding 1:

The first-time users couldn't understand what LuanchIt was for immediately.

💡 Solution:

The PM suggested adding documentation to introduce all functions of LaunchIt, but I believed that users wouldn't have the patience to read through it. Therefore, I designed a concise and eye-catching introduction to the key features and a short step-by-step tutorial.


onboarding ui tutorial ui


👀 Finding 2:

Navigation was hard when tabs were scattered on vertical and horizontal navigation bars.

💡 Solution:

We combined them into one navigation bar, explored 5 variations of information hierarchies, and tested them with users to find out which one was the most intuitive. Users’ mental models were very different from mine since many favored the version that I didn’t think would work at first.


iterated on navigation


👀 Finding 3:

Users were reluctant to fill in their profiles during the onboarding, while complete profiles were crucial for them to connect.

💡 Solution:

When signing up, users are only required to fill out basic information and can either complete their profiles or skip this part. If they choose to skip, the system will later encourage them to complete profiles when applying for positions. The profile page also shows the level of completion to increase their motivation.


user profile


👀 Finding 4:

Users couldn't find all information they cared about on the post, such as time commitment and required skills. The post had large chunks of paragraphs that were difficult to scan and a plain visual design.

💡 Solution:

We restructured the post, dividing the content into more digestible pieces. With a clear structure, project seekers could easily find all information that mattered to them. We guided post creators to list the details step by step. In addition, they can add project logos and images to introduce their projects and teams, making the post more visually attractive.


findings


👀 Finding 5:

The recruitment process used to be complicated. Project leaders needed to switch between tools, such as Google Forms, Emails, and Excel.

💡 Solution:

We designed a new page for project leaders to manage applicants all in one place. They could easily view applicants' information, modify their status, and contact them.


findings

information architecture

track structural changes with information architecture

I created an information architecture and kept it updated. We had three major iterations as we redesigned the navigation and added new functions.


information architecture

style guide

Ensure consistency with a detailed style guide

I created a very detailed style guide to ensure style consistency throughout all pages and for maintenance. It specifies the use of colors in different conditions and includes components that are used frequently .

style guide

takeaway

collaboration in a cross-functional team

My main takeaway from this project is the strategy of efficiently collaborating with computer engineers during product development. I used to deliver my design to front-end developers until I completed a cycle of user interviews, usability tests, and prototypes. In this way, the team did not use time wisely, as developers needed to wait for my design. In contrast, at LaunchIt, we streamlined the process through frequent and concise communication between designers and developers. As the design lead, I worked with the PM to prioritize tasks for feature implementation.