Soil Loop

Composting system app

FIGURIQ is a concept landing page for people who seek weight loss programs. The landing page has a minimalist and aesthetic look without compromising the main functions. I aimed to create a responsive web design to increase the website's accessibility among people using different devices.

MY ROLE

Research

User Interviews

Wireframes & Prototyping

User Testing

Branding

TEAM

Personal project

Design Goal

The goal was to design a landing page that scales automatically, and its content, images, and structure remain the same on any device.

Impact:

The responsive web design makes a landing page user-friendly and accessible so it responds to the needs of the users as they use different devices.

Sketches

My first step in designing a responsive web design was sketching. Sketching ideas gave me an understanding of how to arrange all essential elements for the landings page – menu, headline hierarchy, image, and CTA buttons.

Solution

I understood the principle of responsive web design, but I did not how to achieve fluidity and proportionality among all screen sizes. To figure out, I built the layout system, adapting it for the most common screen sizes – desktop, tablet, and mobile phone. That was my strategy for multi-screens that helped me to understand how different screen sizes play together. As scrolling vertically is natural for users, I had to adapt the content and text that fits the width of different screens without compromising on design.

Then, I developed a typography style for headings, buttons, paragraphs, making it readable for users. To ensure that my design reliable and familiar for users, I built a layout on the smallest screen size, using Material Design guidelines. Lastly, when my layout was cohesive and legible, I scaled it up to 150%, matching it to the other two screen sizes.

Final Design

The final design works on the desktop, tablet, and mobile phone. The site's accessibility makes users happy, which increases site traffic and sales.

What I Have Learned

My first attempt to build a responsive web design was not successful because I started creating a design for a desktop first, then I moved to a tablet, and lastly to a mobile device. So, the lesson is learned – always start from the small size and move to the bigger one.

Without a persona, I tried my best to keep users' needs and expectations in mind. I designed this landing page concept with an idea that every placed element on the web page such as buttons, links, and icons has its purpose; the final design is intuitive and easy-to-use.