One Step - Website
Role
Tools
UX/UI Designer | Coder
Figma | HTML & CSS
Dec 2025
Date
Overview
In the span of 3 weeks, I prototyped, designed, and published One Step, a website for seamless habit tracking that keeps you accountable and encourages you to take that next step towards the goals you've always wanted to achieve. Coded entirely in HTML & CSS, this website serves as a polished preview to the UI design of what could become a full-fledged website business.
Link: Website
Context & Problem
Web Production Pipeline
This was a course project made to test and enhance my personal process of web production, all from ideation to final product, conditioning myself to work in a pipeline that is identical to companies of website creation or app development. By articulating myself through each stage of the process, I was able to develop both my skills and understanding of how each step works with the other in order to create a final product.
Research & Insights
Figma Mockup
I chose a habit tracker website as I believe that current-day apps/websites aren't made with the user in mind. Having tried to get into habit tracking myself, I noticed how zero online applications worked, so I decided to use my expertise to create one that puts user experience first.
I used my Figma skills to develop a mockup of what the website would look like. When designing the website One Step, I made sure to keep in-theme my vision of calm, grounding, and supportive. I made sure the interface was minimalistic, easy to read/navigate, and visually pleasing.
Research & Insights
Mood References
When researching for references, I looked for calm imagery and habit trackers that effectively showcase content without any fluff. For the colour palette I picked teals, blues, and a deep grey to convey a sense of calm to the viewer, and the dark background to again express serenity while also feeling grounded. Below are references I drew upon.
Page feels calm
Page is minimalistic, yet expressive
Page feels grounded
Obstacle & Execution
Figma to Coding Roadblock
One of the greatest challenges when developing the website was the transition of designing the website from figma to coding it to life. I struggled through many different formatting challenges with HTML & CSS. Certain sections proved very difficult to code despite the initially simple format, and certain barriers came across that therefore required me to think outside the box for solutions.
Just like in a professional environment, throughout the whole project different iterations were made which resulted in the final product being different, however much more visually pleasing, compared to the initial mockup.
The photos show changes made throughout the website (left is initial mockup, right is final website).
Results & Reflection
Deepened Website Understanding
This project was a great challenge that resulted in a website design that is unique, easy to read, and simple to use. Through this project I developed not only hard skills such as coding and design, but also soft skills like problem-solving and perseverance.
When building this website, I deepened my understanding of each of the roles and skills required to create a final product. Which develops my intuition and teamwork skills for when needing to work in a professional group setting.