LANGUEVILLE
UI, graphic design and web development
Client
Langueville is a Quebec-based company offering online language classes. Their mission is to create a fun, immersive and welcoming space to learn a language. The goal of this project was to design and code a responsive website that introduces the company to a wider audience.
Project Requirements
Multilingual — Given the languages offered and the target demographic, I wanted the website to be available in English, French and Spanish.
Transparent — I wanted pricing to be displayed. As a user, I find it frustrating when I need to initiate contact to find out this information. For the company, it eliminates the communication exchange regarding pricing.
Simple — The intent was to start with a simple design that could grow over time. Information is not nested and there are no sub-pages. The goal is to provide a point of contact if users are interested and then proceed with onboarding (placement test, scheduling, motivations). Sample lessons and curriculum could be embedded at a later date.
Playful — To reflect the company’s brand and mission, the design should represent immersing oneself in a new welcoming environment.
My role
Design — Use Figma and Affinity Designer to create illustrations and prototype the website.
Code — Write HTML, CSS, and JavaScript in VS Code.
Translate — Create written content in English, French and Spanish.
SCREENS
Home
An animated hero image features above the fold. Two animals from different habitats communicate with each other in three languages in outer space. As the user scrolls, descending closer to land, they’re presented with four distinct advantages for learning a language. At the bottom of the page, a call to action that takes them to the next page — packages.
This design shifted from the original iterations that relied on a typical grid layout in order to create the feeling of being immersed in a new environment. The animations and illustrations were chosen to represent the premise that learning a language should be fun and create connections. The entire page illustrates a play on words.
To reduce time spent coding and maintaining the different screen sizes, the designs are nearly identical.
Packages
Following the call to action from the home page, the user is invited to learn about the classes and pricing. Again, this page utilizes a play on words and imaginative illustrations.
Contact
For the desktop and tablet resolutions, users are presented with a postcard that flips to reveal a contact form. After the message is sent, the snail communicates a success message. The mobile version is simplified to a standard contact form, but the illustrations and color scheme are carried over to preserve consistency.
I coded the contact fields as Google form entries so the data would be immediately organized in a spreadsheet. The data entry triggers an automated response inviting prospective clients to take a placement test and provide more information regarding their schedule and interests. Finally, after a schedule with a teacher has been confirmed, clients are invited to make their payment through a secure channel.
MORE PROJECTS
Goals
Learning and memory enhancement feature. Aim: To improve users’ recall and reduce the “Google Effect.”
Idea Generator
A utility app to help users reduce screen time. Features: filters to customize activity suggestions and scheduled notifications.
Fleur
A multifaceted eCommerce app for a florist. Features: drag-and-drop design studio, quiz, library, shop, and cart.
Let’s connect:
© 2024
