Cocoon
# UX/UI Designer# Graphic Designer
Monitor
logologologo

"Everyone deserves a second chance"


Ideation

During the fall of 2023, our class embraced a three-month project where we developed a web app, with the goal of applying Artificial Intelligence to support communities in need. As the global shift towards electric vehicles accelerates, job security for employees in the oil and gas industry faces heightened uncertainty. The concept of Cocoon emerged as a solution for Oil & Gas industry employees to make the transition of career path easy. This web app uses AI to identify existing skills from the resume and open job data to generate a potential education and career pathway along with a timeline and courses to assist in your new career.


Research

Doing competitive Analysis helped us understand the products available in the market and their strengths and weaknesses. We studied websites like LinkedIn, Indeed, Coursera, Jobbank, and Canada.ca. Here is the report of the analysis.

cocoon

Target
Audience

For this app, the primary target audience was someone who is currently working, especially in the oil and gas industry, and wants to switch career paths. They want to find out which career path best suits their current skills and what extra courses need to be done in order to get a new job. Here's the user persona of Drake Edwards.

ff

Demo Video


Style-
guide

Atomic Design System

Cocoon followed the Atomic design principles, breaking down all pages into the smallest components known as "atoms”. The design system enabled flexible changes in colors and a structured approach to facilitate Figma wireframing and prototyping.

The color palette was chosen carefully to transfer the message of trust and clarity in thoughts. The use of bluish-green color indicates cleanliness, freshness, and calmness in the product. The sans-serif font Roboto is versatile and has a modern appearance. It indicates friendliness and strengthens the brand identity.

ffff

Structure

We have narrated the same concept through logo design. Our tagline "Everyone deserves a second chance”, also plays an important role in branding referring to a new improved career path.

We kept our target audience in mind while designing the looks and feel of the app keeping the interface simple. We conducted several usability tests to get valuable feedback that helped us improve the application. We used graphs and charts to provide simple visual information.

cocooncocooncocooncocoon
cocooncocooncocooncocoon

Logo
Design

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.

ffff

Marketing
Collateral

While, designing the bussiness card and brochure, I kept the design simple yet elegant and professional, that allows to comprehensively and beautifully convey the information about the product to audience.

cocooncocoon
cocoon