Select Page

Miel Honey

UX/UI Design

March 2021

 

About

Miel Honey is a fictional company created to demonstrate my skills in UX/UI design and framework. Originally create to practice Boostrap framworks.

Role

UX/UI Designer

Software

Figma
HTML & CSS
Bootstrap

01. Initiative

Goal

This was originally an assignment for my Web Design & Interaction class. We were tasked to hand code a website using Pure or Bootstrap framework. Using a logo I created from my illustrator class, I developed a fictional brand of honey to base my website on.

Branding

I had different variations of the honey logo I had already created. I picked my favorite one to use for the website and started on the moodboard and design guide.

03. Code

Bootstrap

This project required a minimum of 2 responsive layouts with a responsive design using media queries. I chose to use Bootstrap over Pure because I had previous experience with Bootstrap and was more comfortable using it. The landing page also required a minimum of 2 components such as buttons, cards or carousels.

Components

Carousel: Bootstrap allows the user a customizable carousel to showcase images. I used this component to showcase to feature honey products of the month.

Button: The button component was used for the product grid of the honies.

02. Ideate

Moodboard

Before starting on the design and the website, I collected visual elements and chose colors that best represented the website’s theme. I wanted the website to be fresh, warm, and sweet like honey.

Wireframes

Using Figma, I created a mockup using the framework available in Bootstrap as my guide. This led to how my website was going to function and how the contents were to be displayed. During the mockup process, I chose the color palette that matched the logo I initially created and from there devised a mood board for the website’s design.

A flowchart wasn’t necessary for this project since it would only be focusing on the landing page.

 

04. Revision

Testing

After handing in this project, I looked back at my initial mockup and I wanted to test how much I could improve and change my design. I wanted to use my knowledge in UX/UI and apply it to this project for my own practice. Since I had a running site, I decided to do some user testing  to see what needs improvement.

Old Landing Page & Navigation Bar

Improved Landing Page & Navigation Bar

User Testing Feedback:

  1. Navigation was not memorable/ noticeable.
  2. Initial landing image was jarring, lack of flow throughout the website.
  3. Branding was not clear and consistent

Solution:

  1. I added colour to the navigation bar and centered the links so it is the first thing you see when the page loads. The logo was edited to flow horizontally to better suite the navigation design.
  2. Chose a subtle and on brand image that helped guide the user’s eyes down to the products. Made sure the elements were centered and balanced.
  3. Created a design guide to follow with key colours to be used throughout the website. Kept the fonts and design more consistent.