Landing Page Case Study

Client: Workspace

Project Duration: 2 Weeks

Role: UX/UI Designer

Tools: Figma

🔥Checkout the figma file: https://bit.ly/3UNb9F6

Introduction

In collaboration with Workspace, I took on the role of UX/UI Designer to design their digital presence through a visually compelling landing page. Leveraging my expertise with Figma, the project aimed to encapsulate their brand identity and communicate it effectively to their audience.

Responsive breakpoints

Discovery and Research

To kickstart the project, I conducted a comprehensive product analysis, competitor analysis on leading workspace management tools and customer research. This provided valuable insights into the industry's information architecture, helping me understand the essential website's sections to incorporate into Workspace's landing page.

Context: Whitepace is a work management platform designed to help teams organize, track, and manage their work in multiple platforms.

The problem:

The company has finished building the product, but they don’t have a website yet

The company wants to release and start marketing the product immediately.

They have a tight deadline.

The company wants to increase its conversation rate by 60% within 4 months.

The solution:

Identify the target audience and analysis the competitors.

Write the content first according the product and its features.

Build wireframes according to the content and present them to stakeholders.

Upon stakholders approval, bulid High-fidelity mockups.

Test the mockups and launch the website.

Wireframing and Information Architecture

Now we focus on creating wireframes, focusing on the optimal page structure and information flow. Each section was thoughtfully crafted, with careful consideration given to UX best practices. The wireframes served as a blueprint for the subsequent design stages.

The Design System: Colors, Typeface and Grids

After the wireframes, we focus on building a design system so that company can always follow brand guidelines and keep a consistency throughout the website. This involves creating color system, typeface system and grid system.

High-fidely Mockups

Now we focus on creating the high-fidelity design/mockups. The design is focused on modern trends and aesthetics to match the competition while maintaining consistency.