Windglass.fi Page
Case Study |


This case study illustrates the full process of designing Windglass's landing page. Windglass.fi is a windshield repair and replacement servicing company in Helsinki, Finland.

Designing Start to Finish

There's always a lifecycle and structure to each project we work on. This was the system of how we created Windglass's landing page.

  • project-scope

    Project Scope Brief

    The client provided what they had in mind over meetings and in documents, detailing the scope and work that needed to be done. We communicated with the development team to structure our collaboration workflow.

  • windglass-laptop-wire

    User-experience Design

    Our user-experience design process combines team interviews, client questionnaires, and analytical data to create result-driven end product.

  • User-interface Design

    Our design lead used the carefully crafted wireframes as a blueprint for adding in visual and aesthetic elements to the interface, such as typography and colours.

The Thoughtfully Crafted Wireframe

Based on the brief and the problems that we found with the original landing page, we mapped out each section's purpose, layout, copy and solution. Below was what we put together right before UI design commenced:

Designed and Built for All Devices

Our wireframes and interface design were designed specially for each main viewport size. This allows us to implement and replace functionalities that improves the landing page's usability, regardless of what devices that it's used on.

windglass-responsive-desktop
windglass-responsive-tablet
windglass-responsive-mobile

Desktop, Tablet and Mobile

Like all of my work, responsiveness was one of the key focus of creating Windglass.fi's new landing page. The presentation of intuitive structure and placement was what we focused on when creating the guidelines of the responsive site. Certain elements are displayed or hidden depending on the device used to access the site. It was important that the site could effectively retain users across all devices.

Defining the UI Kit

This UI kit was extracted from the final design's elements, for a smoother workflow for the development team.

Buttons

Typography

Forms

Applying the Style

The final style was implemented to not only the desktop version, but also the mobile and tablet version of the site.

windglass-style-1
windglass-style-2
windglass-style-3

Full Retina Support

To ensure images and icons appear sharp and clear in all resolutions, especially those of high-density screens, they are all of high-qualify retina format. Only SVG or monochromatic icons are used.




Regular

Retina Display

It was a Team Effort

Design Agency

Bit Finer OÜ

UX Designer

Patricia Goh

Development Agency

gotoAndPlay OÜ

More case studies like this:

Scroll Up