Movement Fitness Dublin | Website re-design
Project:
Role:
Date:
Website:
Programs:
Description:
Movement Fitness Dublin
UX/UI Designer
January 2020 - March 2020
Wordpress, Photoshop, Sketch
Website redesign for a fitness brand in Dublin
Project Start
Old Website
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.
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.
To show off the new program the user first scrolls past a short explanation of the 4 cornerstones of the program. Later down the page follow the actual program, where colors are used again to summarize in short about the program again and a call to action to learn more about the program
Project Start
New Website
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.