Responsive landing page
EasyFit
Throughout this project, I had the wonderful chance to not just create a responsive landing page and experience the process of handing off a design to developers, but also to refresh my coding skills and personally develop the landing page code.
Goals
To design a single landing page for a fictitious gym, where the user gets to interact and register for a service.
End goal of assignment: Hand off landning page to junior developers.
Challenge
The landing page was to be created with the ambition to sign up for a gym class. It should be customized for the experience with regards to content, design, structure, and copy, and should feature a form where users can sign up for a class.
My role
UX/UI Designer
Web developer
Tools used
Project time
Three weeks designing + 1 week of coding
DESIGN PROCESS
Empathize
Considering the goal of this project to create a single landing page for a fictitious gym, I began by brainstorming the type of gym I wanted to create. To do this, I created an archetype inspired by my own challenges and requirements, and mapped out a user journey to identify potential business opportunities for the fictional gym concept.
Linnea
The unmotivated gym archetype
“it is not fun going to the gym, I don’t feel motivated, so it is so much easier to do something else more fun and therefore procrastinating it.”
User goals and problem:
Linnea wants to stay healthy but do not feel motivated going to the gym. She sometimes procastinate and find other things to do instead of working out and therefore could need a kick in the butt to get started.
She currently don’t have any goals with her workout, but just know that she has to do something in order to take care of her health and body. She does not know where to begin or what kind of workout to do in order to take care of her body and could therefore need guidance from someone else.
Pain points:
- Don’t like the gym
- Don’t have any specific goals besides staying healthy
- Have little experience with training and how to train in the right way
- Do not have any equipment at home
- Live in a small apartment
Ideate
After empathizing and finding opportunities based on the pain points and needs, I decided that I was going to design a landing page for a fictitious gym that creates online workout classes. I then continued by brainstorming concept and researched for inspiration.
Who is it for?
People who do not enjoy going to the gym. People who needs to get a kick in the butt to get started because they don’t have any goals or know where to begin. Could also be someone who works late afternoons/night and usually miss all the fun workout classes at a gym. Maybe lives somewhere there is no gym.
What are their needs?
Inspiration and motivation/nudge, coaching, simplicity, easy to get started, no waiting, hands-on tips.
What device do they prefer and how do they use it?
The user prefer their phone. Sometimes use it at the gym to check a training video on youtube.
At home the user prefers to use their apple tv to watch youtube videos.
Business goal of the landing page?
Get customers to download and use their workout app
Inspiration
Frankenstien wireframe
Hi-fi wireframe
Hand off
Once the design was finished, I compiled a design deck containing details about the design to pass on to the developers. This included background information about the design, a style guide, and an overview of components. During the handoff, I also provided a walkthrough of the final design and showcased animations for specific elements within it.
Challenge
Even though I knew a bit about coding, I found it hard to figure out what to show the developers and how to communicate it in an effective way.
Coding
After handing off the design to the developers it was then time for me to try and code the design myself. The coding was done in the cloud development platform codeSandbox.
Final Design
Next Steps
The natural next step for this project would have been to carry out user test to examine the flow and usability of the landing page and to make sure the sign up process worked as intented.
Lessons learned
Design hand off: Through this project’s design handoff process I have learnt how to communicate more effectively with developers. By coding the page myself it provided me with valuable insights into the language and information that resonate most with developers, enabling clearer and more efficient communication for future collaboration.
What I will do next time: Having gained insights into accessibility, I realize the importance of prioritizing design that’s accessible to everyone. For example, if I were to do this project again, I would have selected colors with higher contrast to enhance usability for all users and create a better set of button components. Furthermore, I would have also tried to run some earlier user test of the design to ensure the landing page was easy to use and gave all the information needed to sign up for the community.