.png)
Bluebird is a tech sales Bootcamp established in 2021 by Journey Education, the same company that started Concordia Bootcamps in Montreal. Within 10 weeks of nurturing education, they can prepare you for your next career.
Bluebird is a tech sales Bootcamp established in 2021 by Journey Education, the same company that started Concordia Bootcamps in Montreal. Within 10 weeks of nurturing education, they can prepare you for your next career.
They needed a brand identity to introduce Bluebird and a website to connect with their students.
An online representation of who they are and how they can benefit their audience.
We designed a website that is not only user-friendly but also visually appealing and easy to navigate with custom illustrations for a visual explanation.
We designed a website that is not only user-friendly but also visually appealing and easy to navigate with costume illustrations for a visual explanation.
.png){kind=icon}
.png){kind=icon}
.png){kind=icon}
.png){kind=icon}
.png){kind=icon}
Launching a new brand and product required us to show first-time users that this Bootcamp is credible and legitimate.
We accomplished the goal by designing a refined logo, easy-to-read set of fonts, subtle colour palette, strong messaging, simple navigation and strategically placed empty space to show their identity and brand tone.
Logo:
A bird inspired our client for their logo, so we created the logo shape from the actual bluebird.
Bluebird represents good luck, hope and joy. It is also a term used in tech sales, and it means an unexpected or a very profitable sale in business.
.png)
.svg)
Typography:
We chose this font combination to demonstrate the strong messaging of Bluebird’s website.
The fonts are friendly and easy to read. They also match the brand tone which is minimal, modern, humanist and neutral style.
.svg)
Colour palette:
We got inspired by the actual bluebird colours for our colour palette. It also signifies the beach colours and indicates a calming and trustworthy experience.
We started with research that led us to understand the user mental model, develop a strategy, address goals, and set milestones for the project. The research also helped us develop goal-oriented user flows. We created an easy-to-navigate information architecture based on the user flows. After understanding the structure, we sketched the wireframes to envision the future of the website.
User flow:
We created a simple user flow so users with different levels of tech literacy can have an effortless experience.
We focused on what they wanted and how they could achieve their goal.
Wireframe:
The wireframe works as a skeleton of the website. We sketched the wireframes according to the information architecture with the user's needs in mind.
We laid out the content of each section intuitively and envisioned the structure of the website.
Information architecture:
The website architecture was built around intuitive navigation, allowing the users to access related content easily, so they don’t feel overwhelmed by the significant amount of information presented to them.
User flow:
We created a simple user flow so users with different levels of tech literacy can have an effortless experience.
We focused on what they wanted and how they could achieve their goal.
Wireframe:
The wireframe works as a skeleton of the website. We sketched the wireframes according to the information architecture with the user's needs in mind.
We laid out the content of each section intuitively and envisioned the structure of the website.
Information architecture:
The website architecture was built around intuitive navigation, allowing the users to access related content easily, so they don’t feel overwhelmed by the significant amount of information presented to them.
We designed a combination of an overall clean layout with a generous amount of empty space, a set of icons, custom illustrations and visually appealing background patterns that creates a vibrant and lively feels in the User Interface.
Illustration:
Our illustrators started by sketching the concept, and after the client’s approval, we created consistent illustrations that visually explained each section’s written content and designed them in Figma.
High-fidelity prototype:
We structured the website layout around intuitive navigation, high readability, light background and eye-catching visuals.
We used industry best practices to develop our design into a fully functional and responsive website.
By designing while having the logic of HTML and CSS in mind, it helped us better communicate it with the developers. After a few iterations and clients' approvals, we reached the final design.
Illustration:
Our illustrators started by sketching the concept, and after the client’s approval, we created consistent illustrations that visually explained each section’s written content and designed them in Figma.
High-fidelity prototype:
We structured the website layout around intuitive navigation, high readability, light background and eye-catching visuals.
We used industry best practices to develop our design into a fully functional and responsive website.
By designing while having the logic of HTML and CSS in mind, it helped us better communicate it with the developers. After a few iterations and clients' approvals, we reached the final design.
Once our client approved the design, we started developing the website in Webflow. We built an easy-to-update website and submission forms.
Responsive:
We developed the website to be fully responsive to fit every screen size, from mobile view to landscape, tablet, desktop and bigger screens.
CMS:
We created easy-to-update design components using Content Management System (CMS). For example, their upcoming courses, FAQ, testimonials, etc.
SEO:
The founder and our team carefully chose the words throughout the website to help them become more discovered by their audience.
.png)
.png)
And a new Bootcamp launched in under 90-days *
We have excluded and obscured private material in this case study to comply with our non-disclosure agreement. All of the material in this case study is ours, and it does not necessarily reflect the views of Bluebird. *
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
