Select Page

Miel Honey

UX/UI Design

March 2021



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


UX/UI Designer



01. Initiative


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.


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


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.


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


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.


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


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


  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.