HOMER Learning

Web and Mobile UI Design

Several responsive layouts of the homepage are created for the web, tablets and phones.

Several responsive layouts of the homepage are created for the web, tablets and phones.

Role: PRODUCT DESIGN, ILLUSTRATION

Story:

After the merger of Speakaboos and HOMER, HOMER Learning undertook a rebranding and the redesign of their website. Because we were merging 2 catalogs of content with different visual aesthetics, we wanted to offer a cohesive visual experience to showcase our main offering, a step-by-step personalized learn-to-read plan and a customized library of stories sorted by interests for children age 2 to 8.

Product Goal:

Create an e-commerce app to host and sell anything needed to make cocktails.

Create a clean and elegant UI, and a simplified user experience that focus on products with the ability to search, save favorites, purchase and checkout seamlessly.

Process:

I started with researching e-commerce sites to get ideas on the best approaches to search for products, and took notes of the most intuitive and simple user flows. Next, I researched imagery and color schemes that best capture the allure of an Art deco Speakeasy. I started sketching wireframes and iterated and refined the user flow. Finally I worked on UI design, visual design, a mini-design system, high-fidelity screens and a prototype.

In early 2018, and just out of a merger, HOMER Learning needed a rebrand and a website redesign in order to put forward their main offering, a step-by-step personalized learn-to-read plan and a customized library of stories sorted by interests for children age 2 to 8.

The two main goals of the redesign were:

  • Creating a visual design system that reinforces the educational value of the learn-to-read program while retaining the playful aesthetic that appeals to the actual users, their children

  • Optimizing the conversion rate of the homepage and landing page, through iterative testing on copy, visual elements, video, social proof, placement of links and calls to action

As the Art Director for this project, I also advocated for clarity and simplicity, where each element has to convey value and convince the visitor to subscribe. Colors and typography were pared down from the initial website. I illustrated all the icons and defined illustration style guides that were later widely adopted by the marketing and branding teams.

Competitive Research

competitors.jpg

Personas

users.jpg
Landing_Desktop.jpg