Pufflang

Landing page design for a language teaching startup.

MY ROLE
Art direction, branding, visual identity, logo design, wireframing, design and developpement of web page.
TOOLS USED
Tools: Figma, Webflow, Photoshop, Adobe Illustrator, good old pen and paper ;)

Teach languages without losing the fun

Design and developement of a landing page for Pufflang, a startup with the aim to help kids have fun while learning languages and achieve good prononciation in the target language. This is a side project I am developing. As a trilingual I think speaking many languages is one of the most powerful assets one can have and something that can be taught while having fun.

VIEW LIVE SITE

Brand identity

This brand is fresh, young and affordable. I picked colors that are inviting and fun, and drew some whimsical illustrations to add some personality. The UI had to be appealing for children and convey the idea that the courses at pufflang won’t be boring because they are designed for them. At the same time, it needed to be serious enough to gain the parent’s trust.

Logo design

The logo doubles as a mascot that grabs attention. It might later be developped into an animated character should Pufflang become an app in the future. I experimented with hand sketches before moving on to digital ones. The version that was retained includes a puffin and conversation bubbles. Puffins are agile in all sorts of environements, which matches the misson of pufflang: make kids comfortable in many languages.

The Challenge

Le Poêlon Gourmand offers high quality service, yet their website presented many pitfalls when it came to information architecture. Unfortunately, many elements were reflecting negatively on the user experience such as confusing navigation, a lack of legibility, and many gray zones pertaining to the pricing and conditions and so on. I performed a website redesign that would address these points without changing the voice of the brand.

Young child waving at screen on fun interactive online language class. "Learn with" written in speech bubbles with the pufflang wordmark logo.

The goal? Highlight the unique concept and refined essence of the brand and provide an enjoyable user experience

To achieve this, it was essential to clean up the information architecture as much as possible. Also it was necessary to guide users to easily perform these key tasks:

  • Get familiar with advantages the Poêlon Gourmand provides
.
  • Know which dishes are available on the menu
  • Understand the pricing and have an idea of how much a gathering could cost them
  • Understand the terms and conditions

The Discovery Halts project was launched by the city of Montreal and other contributors to allow visitors to discover the Mount Royal Heritage site with fresh eyes. It consists of 3 types of elements; conical place-markers, halts where hikers enjoy beautiful views and 3D topographic maps of the site.

These are scattered about the park and intended to subtly draw attention to historical or geographical landmarks in a passive wayfinding approach. The place-markers especially, were designed to hint at these landmarks with their bronze inscriptions.

The challenge

Developing a digital tool that would guide users just enough without stealing their attention away from their surroundings. The main challenge was bridging the gap between the intent of the elements in place and the understanding of the users to allow them to really benefit from the experience. We also needed to come up with discovery and way finding solutions that didn’t interfere with nature.

The goal: Enhance the original Discovery Halts project and allow visitors to explore the site more fully by having enriching information at their fingertips.

As part of the Discovery Halts project developed by the city of Montreal, we conducted research and developed an app concept to enhance the project and achieve its original goal: bring people back to the trails of the Mount Royal and allow them to rediscover this place rich with history.

Analysis

Affinity diagram with post-its to summarize and organize information gathered from the interviews.

Affinity diagram with post-its to perform data analysis.

Key observations

Many people don’t know about the place-markers
People tend to ignore or simply not notice them.
They do not know how to interact with the place-markers.
They are hard to notice if people don’t walk in the paths

What people said when we asked if they’d noticed the place markers and what they thought they were

“I come here once a year as a school field trip, but I never went in the paths”

“I don’t know; covered tree stumps?”

“I have been walking here every morning for 9 years and have never seen them.”

Strategic approach

We concluded that while the place-markers provided hints to natural and historical facts present in Mount Royal, it was necessary to give people more explicit information so they would understand what they were looking at and not miss out on nuggets that could enhance their experience. So we set out with the aim to guide and inform users.

Solution concept

Before the final design was complete, we put ourselves in our users’ shoes to find out who would be using the product and how they might be introduced to it.

Mobile App

We designed a mobile app with two main sections:

  • Explore Mode

    Which allows users to plan their visit based on historical monuments, fauna and flora or lookouts they want to visit on the Mount Royal.

  • Treasure Hunt Mode

    Which gamifies the experience by suggesting different hunts to look for clues and learn facts about the site while respecting user constraints (length, difficulty, time to complete).

Mockup of user interface design for Mount Royal app.

Brand identity and
Design System

Since this was a website redesign, I made a point to preserve their existing logo and main brand color. I also extended the color palette with warm hues to remind of a hearty and delicious meal. Added to these a dark charcoal to provide contrast and remind of the cast iron pans. Textures were also used to represent the different cuisines from all around the world and maintain visual interest by bringing a bit of lightheartedness to the information presented.

Brand assets, icons and color palette.
Flip your phone horizontally or view on desktop to see the video better!
Flip your phone horizontally or view on desktop to see the video better!

What I learned

Fleshing out a design system from scratch takes time. A lot of it.

Self explanatory.

Mockup of desktop interface design and finished web design for the redesign of Poêlon Gourmand, a caterer in Montreal, Canada.

The Challenge

Just as a house may needs renovations, websites can require a thourough redesign. In the case of BMI, their customers were experiencing frustration navigating the site and as a result, they kept flooding my client with endless phone calls. They also had to deal with an interface that wasn't intuitive, such as clicking on a link that directly opened a PDF without warning them beforehand.

Objective

The main goal was to address all the recurring questions customers were asking and organize information they were looking for to reduce phone calls to a minimum. It was essential to create a simple and efficient design that would ensure a positive user experience.

The Process

The project started with a brainstorm session with the client to make sure I understood his vision. After which, I edited all the order forms and made them interactive for easy online fill in. From there, I drew wireframes, iterated on design decisions to best display the content and finally coded the website in HTML and CSS with JavaScript integrations. Then, I setup and interactive map to display sales representatives and arranged an user-friendly contact page.

A competition research revealed what was being done in that field and how my client could stand out. The team at BMI ortho is very tight knit and puts everyone that comes in contact with them at ease. They also offer tailored braces crafted directly on location. We allowed this to come front and center with some personal touches like some custom photography added to a virtual gallery.

Desktop computer showing the about page of the BMI website on a section that highlights their 3D scanning technology.
Responsive website design for the BMI website on phone and tablet.

What I learned

Good design serves a purpose

You know you’ve done a good design not by if it’s “good looking” or not. But whether the user’s needs are met and their life is made easier by what you’ve made.

I love working autonomously

The first few weeks of this project I worked on location, but a good part of it was completed remotely with regular check-ins. I found it super convenient and I was just as efficient (if not more) as I would have been doing the commute.

Prototype and AR

01- InVision prototype which we later tested with real users on location.

02- 360 AR (augmented reality) we developed to allow visitors to travel through time and see what the location they’re standing in used to look like.

Finished user interface design (UI) for Mount Royal app in Figma.

What I learned

not everything is written out

Many projects may seem vague or as having blurry edges. It’s our job as designers, especially in UX, to provide clarity for the user and to ensure they have a positive experience.

How to be flexible

We started as a team of 6, but as the project moved forward, some team members didn’t see the purpose and dropped the project to pursue different avenues. They participated in some field research, interviews and early brainstorming. The remaining was a team of two; my classmate, Eliot Zeinaty, and myself. This meant restructuring our approach dramatically, and sacrificing certain aesthetic decisions to respect our tight deadline. We juggled with wire-framing, app design and prototyping to present a cohesive final presentation. In the end, I was responsible for the design of the entire “Treasure Hunt” section. I learned to prioritize like never before and to adapt to changing circumstances.

“Danke schön”, “Bitte schön !”

One of the families we interviewed spoke German. Now I now how to say “you’re welcome” in that language thanks to them. Connecting with the real people that might use your product in the future is amazing.

Desktop computer and laptop showing the knee brace product section of the BMI website.