Project overview
Inspired by one of the exercise during Digital Designer course I did (April - July 2022), I created a Landing Page concept for Microsoft Surface Pro 8. The task was to redesign the website of one of Surface's laptops.
Intro
Microsoft is a well-known brand producing software, electronics, and computers. On their website, one can find a variety of products’ pages. Surface Pro 8 is the newest product from the Surface family.
Problem
There are eight different Surface products in the line, many of which are made with the same, repetitive template. Users can find it hard to distinguish the benefits of the products and learn products' core values.
Solution
A redesign of the Landing Page. My goal was to highlight the most important features of the product, with a simple and clear design. I focused on opportunities, to make my design stand out from the rest of Surface products.
Process
Pain points and opportunities
First, I analyzed the website to identify pain points and opportunities to improve the user experience of the product.
Pain Points:
👎 After the short hero section, the website shows long block of text information about the purchase
👎 The same website design for every Surface product
👎 Inconsistent design of icons, color, and line width
👎 A lot of text to read as a footnotes
Opportunities:
👍 Design a hero section and place the most important links
👍 Highlight the most valuable features of the product by showing how people use them
👍 Create a unique design that helps the product stand out
👍 Tidy up the design of icons
👍 Categorize long texts and footnotes
Screenshots of existing website
Analysis
Next, I scanned information architecture. I jumped into FigJam and I break the website into sections. I analyze each of them. I focused on what the section is telling to customer and what information it contains.
Information architecture analysis
Content analysis
Low-fidelity wireframes
Then I created my own sections and defined their purpose. After it, I quickly draw low-fidelity wireframes and decide where to place text and visuals.
Content structure and low-fidelity wireframes
Design
Microsoft Surface 8 is a device that combines the power of a laptop with the flexibility of a tablet. I wanted to show the biggest advantages of the product through simple and elegant design.
In this project, I use only images from unsplash - Surface collection (except accessories images). The rest of the content is from the original website of Surface Pro 8.
Colors
When picking the visual content I tried to find a fresh and energetic color palette. I got inspired by the photos I choose, and decide to use turquoise color based palette.
Typography
I choose Inter font and 1.25 type scale. I made sure that every paragraph in my design is readable by checking the contrast ratio to match the AA standards of WCAG.
Grid & Spacing
For the desktop version, I used a 12-column grid with 40 px margin and 20 px gutter. For the mobile version 2-column grid with 16 px margin and 20 px gutter. While designing I stick with the rule, that all spacing measurements should be divided by 8, sometimes by 4, when needed.
Summary
The goal of this redesign was to sort out the information, make the design more attractive and highlight the most important features of product. Through all of it, possibly increase conversion on the website.
But my personal goal was to practice. This simple exercise thought me a lot. I became more aware of the websites that I use. How visuals and texts are working together, to create sections, and what message the section is telling to the user.
Thanks for reading this and see you in my next project!
2024 Portfolio by Jędrzej Urbaniak