vaneelee final

A brand synonymous with style, elegance, beauty and class deserves a website to match.

UX Research

Before we could begin designing the website, we had to first conduct a Research into what people’s expectations were for this website. An important aspect of understanding User Experience (UX) is understanding a user’s assumptions, identifying what they expect, and giving them what feels intuitive. Here are some of the questions we asked concerning UX:

In your opinion, what makes a website look classy and stylish?

Chart UX Research

We wanted to understand what aesthetics users identified with ‘classy and stylish’. By better understanding a user’s definition of the term, we could shape our website to match that definition. Our results showed that most users feel a website has to be simple and clean to be considered classy and stylish. A large percentage of users also felt that pictures and a strong color scheme are also important factors. 

UX Design

User Experience (UX) Design is the process of laying out a product’s usability and design flow in order to provide the desired experience to a user. An essential element of this is determining how users form experiences with the product. In the case of this project, we laid out an initial wireframe of the website so that we could better understand how the website would flow and to see correlations between each section. Here are some of the wireframes that we built:

vaneelee ux1
vaneelee ux2

Styles & Elements

In the initial stages, our design team worked closely with Vaneelee to choose a complementary colour palette and type stack to best represent the company’s brand identity. We then tailored various elements in the design such as the Call-To-Actions (buttons) to reflect this identity. One of the ways that we maintain the style aesthetic throughout the design is by subtly incorporating textures into various elements to match with the overarching theme.

Styles vaneelee

UI Design

User Interface (UI) Design is the process of taking preliminary UX Design and applying a Graphic User Interface (GUI) to it. In layman terms it means taking a wireframe and adding content to it in order to see what the final product will look like. Here are some of the final designs:

Vaneelee UI1
Vaneelee UI2

Custom Mega Menu & Transitions

We wanted to create a Unique Mega Menu that would house the expansive Collections menu on the website. The menu had to be both stylish and functional with the potential to grow as more collections are added.

We also wanted to give the site a sense of flow, so we added smooth transition effects to various objects throughout the development phase. The animation brings a liveliness to the design and keeps the users attention. 

megamenu

Development

During the Development process, we build the website from scratch using WordPress as the base Content Management System (CMS). We do this by creating custom page templates and outputting information via Advanced Custom Fields. This also allows the client to make alterations to the information at any point, thus making it easier for them to manage their websites after the project is complete.

development last