Responsive website
Gym24 2.0
For the final project of the "Graphic Design and Accessibility" course, me and a classmate decided to redesign a gym page we stumbled upon. Because of what we had learned during the course it was of course important to make it accessible, but we also valued the usability and UX.
Our goals main goals were to create a website that:
- Is responsive for different screen sizes
- Has text that is readable over the backround and the text makes sence
- Easier to use with a more intuitive user flow
-
More aesthetically pleasing and more
professional looking (while maintaining their current graphic profile and "dark mode")
Live demo (in Figma)
Gym24 2.0
Backround
We identified a few different areas that needed improvement to make the website more accessible, as well as more usable:
- Responsiveness: When scaling the window, some elements became hidden.
- Text color: On the first page, there is white text placed on a light photo. This makes it hard to read for most people - and maybe impossible to others.
- Text structure: Some sentences are written in a way that doesn't make sence, maybe it was translated?
- User flow: The user flow can be improved with: consistant buttons, guiding the user with a clearer hiearchy, the use of symbols and more
- "The vibe": The website could use a more polished and professional feel so that possible customers have a higher vision of the company. Making the website more modern and simular to other gym websites can be a way to do this. Especially when changing from the parts that look like baseline CSS.
Gym24 2.0
Result
This project was a great opportunity to learn about more functions in Figma. We have previously only made static designs and it was a challange to make it responsive.
Although, I do recognize this isn't that useful from a user research perspective as you can't test the prototype. From a designer perspective and Figma learning perspective it has been useful to us.
1 page - 3 Versions
Each page has 3 different version; one for PC, one for a tablet and one for mobile that switches between them depending on the user screen size. This is done by using the plugin "breakpoints" in Figma, along with the built in functions "auto layouts" and "constraints" to have the pages make sence inbetween the switches.
While did the project together, we split up which pages
to design. Therefore I will only show the pages I created.
I deisgned the following:
- The Home page
- The Navigation bar (that I like to call "Navbar")
- The Sign in page
-
The Services page
Original
Home page
New Home page
For the new home page it was important to highlight what was most important and make sure the text is accessible.
This was done by:
- Having a clear hierarchy highlighting the Chrismas deal first, and then its different options using a bright color (in this case red). This also applies to the different texts. The price of a membership is for example made bigger and a more bright color than the previous price, as it is more important.
- Reducing some content in order to further highlight what is most important to the user.
- Making the text readable by manipulating the backround to make it darker
- Having consistant buttons so that it is clear to the user what is a button and what button belongs to what.
- Grouping relevant elemens togetheter in terms of space so that the user knows the belong with eachother.
The PC version is on top, while the tablet (left) and the mobile (right) is found below.
Sadly the christmas deal was removed right before we screenshotted the homepage. Altought it looked simular to the "Services page" you will see later.
Navbar
A new menu appears once the user presses the hamburger menu (the menu consisting of 3 parallel lines). This is the case for both table and mobile.
The options are the same as on PC but they are located in a way to make them more reachable on a touch screen.
Symbols have also been added to make the buttons more clear. A exit button has been placed where the hamburger menu button was to make it more intuitive.
Original
Sign in page
New Sign in page
For the redesigned Sign in page one of the main goals ways to make it easier to use and less overwhelming to the user.
This was done by:
- Reducing the amount of options, lowering decision fatigue.
- Making the options clearer. Having a obvious, red primary button and a secondary "create account" button that is displayed more like a typical link.
- Once again, Grouping elements that are related together. For example having "email adress" right above where the user writes their email adress.
- Designing it in a way that is consistent with the company’s graphic profile.
Original
Services page
New Services page
This might have been the biggest redesign of this project. The main focus of this page was to make it more accessable and easier to use.
This was done by:
- Adding icons to make it more clear what category means what. This also makes it quicker for the user to find what they are looking for, without having to read.
- Short descriptive texts that are written in a mostly basic language that is directed at the user. This makes it easy to read, even to someone who might struggle with the language.
- Making it more simular to other gym pages. This makes it more intuitive and therefore more accessible.
- Having a mobile version of the page that makes all categories available without having to scroll.
