Academic
Group Project
Fall 2023
UX/ UI Designer
Graphic Designer
12 weeks
Figma
Adobe InDesign
Adobe Illustrator
With the rise of electric vehicles, many oil and gas workers face job insecurity. In fall 2023, our class worked on a three-month project to develop a web app aimed at supporting these workers through career transitions.
Cocoon uses AI to analyze resumes and job data, providing personalized career paths, timelines, and recommended courses to help oil and gas employees smoothly transition into new industries.
Competitive analysis revealed market strengths and weaknesses by examining platforms like LinkedIn, Indeed, Coursera, Jobbank, and Canada.ca. Below is the analysis report.
This app is designed for working professionals, particularly in the oil and gas industry, looking to switch careers. It helps them identify the best career path based on their skills and suggests courses to bridge any gaps. Meet Drake Edwards, our user persona.
Cocoon embraced the Atomic Design methodology, deconstructing pages into fundamental "atoms`” for maximum flexibility. This design system ensured seamless updates to colors and provided a structured framework for efficient Figma wireframing and prototyping.
The color palette was intentionally selected to evoke trust and clarity. The bluish-green hue conveys freshness, cleanliness, and calm, while the modern sans-serif Roboto font enhances the product's friendly, approachable tone, reinforcing the brand identity.
Our logo design tells a compelling story, perfectly reflecting our core message: "Everyone deserves a second chance”. This tagline goes beyond words—it represents the fresh opportunities and transformed career paths we help create for individuals.
When designing the app, we kept our audience's needs at the forefront, ensuring a seamless and intuitive experience. The interface was intentionally crafted for simplicity and ease of use, with each design choice aimed at making the app feel welcoming and straightforward.
We conducted several rounds of usability testing to gather essential insights, using feedback to refine and enhance the experience continually. Additionally, we integrated visually engaging graphs and charts that communicate complex data in an easy-to-understand way, offering users a clear, accessible view of their progress and journey.
The Cocoon logo represents the main feature of this application that is transition. It is used as a metaphor for transformation and a potential platform for growth. The letters in the logo design is the visual representation of cocoon. The butterfly towards the end of the cocoon symbolises the concept of transformation. Also, the use of right font for the logo makes it clearly readable and completes the brand identity. Here's the jounrey of the logo.
While designing the business card and brochure, I focused on creating a simple, yet elegant and professional design that effectively conveys the product information in a clear and visually appealing way.
