AEMAS | WEBSITE
Project
Aemas
Role
UX/UI Designer
Date
October 2019 - January 2020
Website
Programs
Wordpress, Photoshop, Sketch
Description
Website design for a product & service sales company
Project Start
WEBSITE TRANSFER
The client had a previous website hosted by the company who built their first website. Here their website and domain was hosted. This company stopped hosting the website and the website got taken out of the air. This is where I got brought in.
The first task was to transfer the domain over and immidiately add an "under construction" page while we start the new design. This was an urgent matter and had to happen very quickly.
User Experience
INFORMATION ARCHITECTURE & WIREFRAMING
Goals & Needs
The main goals of the client where:
- Show off their products
- Offer downloadable forms on each product specific page
- Encourage the user to call the client
After a more in depth interview and making user profiles I added two more needs to the list:
- The homepage
Solutions
Based on the need that it has to be clear from the start what this program is about I decided to start with a short description of the program that explains it in a nutshell. This is immidiately followed by the 4 building blocks and is supported by images that correlate with the exercises that can be associated with each block. This gives the user visual associative aids next to written text.
Looking at the capabilities of Squarespace I used large image strips in between the text blocks to show improve readability and this gave a good opportunity to focus the user on the call to actions for the marketing funnel as well as giving an easy que as to where to buy the program or download the free workout.
Lastly when arranging information in the sitemap it became apparent that there was too much text to include all on the home page. This is when I proposed to add a contact and about page where users who want more backstory could get more information. These secondary pages would lend themselves to more dense text fields that wouldn't interfere with the flow of the homepage.
WEBSITE DESIGN
CREATING THE LOOK
The goal of this website was to have a clean and proffesional look.
The design criteria where:
- A "new" look, compared to the old one.
- A professional and stylized feel.
- The website colors had to be based on the logo.
Aemas didn't have a lot of personal images, so the challenge wat to design a website with mostly product images but not look "boring"
As a solution for this I used zoomed in versions of product images as banner backgrounds. These banner images where made black and grey and had their opacity turned down.
Apart from this I tried to keep this site simple, because it is all about the products that they sell and the services that they offer with it.
I used blue button and icon boxes as a way to let the logo colors be repeated through the website. Crudely said the theme of this website is sience and laboratory based, so I decided to not use the red from the logo and only use grey's, white and blue. This also makes the logo at the top pop more.