Collab[X]
An early-stage startup that connects aspiring tech professionals to create and ship a product
Collab[X] (now called Co.LabCo.Lab) is an education tech community that’s in the early-stage startup phase. I joined the organization for 4 weeks to create V 1.0 of the website and delivered a high-fidelity prototype in a product team. The organization was called “Collab[X]” at that time as the founders were still deciding on a name. After 4 weeks, I handed over the prototype to the PM and the founder where they gave it to the developer to make on Webflow.
Process
We worked in 4 Design Sprints to create the home page, "For Companies", and “Apply Now” page. The Design Sprint method aligned with our goals as it allowed us to create deliverables in a strict timeline.
Here’s how we organized our sprint to reach our project goal:
Week 1: Research
Week 2: Ideating
Week 3: Design & Iteration
Week 4: Test and Ship
Team
UI/UX Designer: Lori Chai
Product Manager: Helen Huang
Web Developer: Rafael Loredo
Tools
Adobe XD, Google Drive, Microsoft Teams, Webflow
Timeline
Sept 2020 | 4 weeks | Remote
How might we create a digital presence from scratch for Collab[X] so that users will be sold in joining the organization?The main objectives for Collab[X] was to:
• Formalize the brand (vision, marketing, and logo)
• Have a website to direct people to as a resource during recruitment stages
• Create a digital presence
We started off the sprint by doing research using a competitive analysis. We looked into bootcamp websites, and online tech communities. The purpose of the competitive analysis was:
• To identify website patterns and learn from successful education industries
• How these organizations created content for beginner tech professionals as an audience
• Call-to-action buttons were repeated and strategically placed in landing pages
• Emphasis on the organization’s background story and its competitive advantage
• Testimonials with real photos from past students help in connecting with the users
• Top companies’ logos were displayed to show who they’ve partnered with or their students getting jobs from these companies
I needed to understand what were users' motivation in joining Collab[X] so I conducted 1-on-1 interviews on Collab[X]'s current members. Knowing the current members' motivations helped me to create Collab[X]'s content strategy. I identified 4 themes that were common reasons for joining Collab[X].
"I wanted to meet people and collaborate with other tech disciplines in creating a product, which I'd never done before."
"I wanted to gain practical experience as I graduated from a bootcamp and was looking to work on projects in an agile setting."
"I was looking for networking opportunities and thought this community could connect me to interesting companies."
"I wanted to learn about product management so I could move up in my career."
With the PM and the founders, we grouped together to brainstorm ideas on what we would like the website to look like based on user research and the startup’s goals. The founders were included in the first phase of the ideation process because we were creating the brand from scratch and they were key decision makers in the business, and thus, we could make faster decisions when brainstorming the solution.
Run the program every month or two.
Recruit new members for every cohort to build the community. Recruitment will be through social media and referrals.
The users are new tech professionals
We are looking for members that are underrepresented, bootcamp grads, or career changers that want to work in tech.
Mimic a real working environment
Product managers will research an idea and work with a designer and developer in bringing the idea into a digital product.
Work with companies and non-profits
The incentive for them is to reach diverse candidates in non traditional hiring methods.
Run the program every month or two.
Recruit new members for every cohort to build the community. Recruitment will be through social media and referrals.
The users are new tech professionals
We are looking for members that are underrepresented, bootcamp grads, or career changers that want to work in tech.
Mimic a real working environment
Product managers will research an idea and work with a designer and developer in bringing the idea into a digital product.
Work with companies and non-profits
The incentive for them is to reach diverse candidates in non traditional hiring methods.
After discussing with the founder and the PM on Collab[X]’s business goals, I created a proposed sitemap to understand how to present the content and information on the website. The following pages that were considered valuable for the business:
• Projects - presenting past projects would show the value that participants would get when joining Collab[X].
• Blog - this page would be to highlight students' successes, or their profile and provide tips from tech professionals in big companies.
• For Companies - Collab[X]'s goal is to partner with top companies and having a page that with benefits in partnering with them
We needed to prioritize the web pages that we were going to build in the sprint due to the time constraint. We chose the Home, For Companies and Apply Now pages based on the company’s and user’s goal. A basic wireframe of the 3 pages was created as a group to give a guideline of the layout and information architecture.
I created a user journey map based on my user interviews to help the product team in understanding the pain points that a user might encounter and how we would address them on Collab[X]'s website. I used the opportunities from the journey map to account for the content strategy of the website.
Melanie is the persona in this journey map and her goal is to get accepted into the Collab[X]'s program. Let's take a look at her journey.
The call-to-action for the users is to get them to apply for both a participant and wanting to partner with Collab[X] as an organization.
Participant's task flow
Recruiter's (company representative) task flow
The design week was focused on establishing Collab[X]’s visual presence based on the research and the founders’ business goals to translate these needs into a website wireframe. I worked on the low to hi fidelity wireframes while the developer prepared to translate my designs into Webflow. 3 versions, 2 iterations later, Collab[X] was born.
We wanted the general style to represent Collab[X]'s vibrant and fun community. Colours and illustrations were chosen to create a welcoming atmosphere.
The last week of the design sprint was conducting user testing and handing over my final designs to the web developer.
I did user testing with 5 users that were junior tech professionals asking them the following questions:
1. After going through the homepage, what were your first impressions?
2. Can you tell me what Collab[X] is about?
3. Would you like to participate in Collab[X]’s next cohort?
4. What is going through your mind as you look through each page?
Visuals were fun but needed improvement
Users praised the colour palette however, they spent more time reading the hero banners' paragraphs. Heading fonts should have been heavier to show the difference between a title and a paragraph.
Felt a strong community presence
Users felt welcomed and encouraged to apply as they stated that there was good enough information to understand Collab[X]’s vision and value to gain interest in applying.
Benefits for companies and non-profit weren't clear
Many users were confused in the different benefits for partnering with Collab[X] as a non profit or a company. We needed to do more research in understanding both organizations' needs.
Need to emphasize the 3 tech disciplines
A few users commented to improve the storytelling for the 3 roles: Product Manager, UX Designer, and Developer. Identifying the benefits for each role when joining Collab[X] would show the learning value.
Visuals were fun but needed improvement
Users praised the colour palette however, they spent more time reading the hero banners' paragraphs. Heading fonts should have been heavier to show the difference between a title and a paragraph.
Felt a strong community presence
Users felt welcomed and encouraged to apply as they stated that there was good enough information to understand Collab[X]’s vision and value to gain interest in applying.
Benefits for companies and non-profit weren't clear
Many users were confused in the different benefits for partnering with Collab[X] as a non profit or a company. We needed to do more research in understanding both organizations' needs.
Need to emphasize the 3 tech disciplines
A few users commented to improve the storytelling for the 3 roles: Product Manager, UX Designer, and Developer. Identifying the benefits for each role when joining Collab[X] would show the learning value.
The final version on Webflow was shipped on demo day to Collab[X]’s community of 50 people and industry leaders. The community praised the visuals and capturing the lively personality of the brand. After demo day, I concluded this project by handing over the high-fidelity prototype to the product manager.
Since Collab[X] was not launched to the public during the sprint, The results I would have liked to see was the number of members increased by 10% for the next cohort . However, I was still able to create value for the founders by giving Collab[X[ a visual identity.
The constraint was that the founders wanted to implement the wireframes into Webflow as they wanted to add changes to the website easily without having to code. Since this was a new tool for myself and the developer, we decided to create the wireframes in a design tool like Adobe XD and the developer would implement the design on Webflow.
• Collaborating with different tech disciplines (product managers, developers, stakeholders)
• Understanding the technical restraints of Webflow and keeping this in mind in my design process
• Adapting to project changes in an agile environment
If you want to collaborate or talk about design, please feel free to reach out to me :)
%402x.png)
%402x.png)
%402x.png)
