Runner Up

October 2019

Squarespace Studio

Designer

Fredrik Zirath

Skills

  • Interaction Design
  • Product Design
  • UX/UI
  • Web Design
Scroll

Challenge

Problem

Being successful in the highly competitive industry of ecommerce is difficult. We have learned that the best brands in the world is all about telling a compelling story. But these stories does not speak for themselves without an amazing product people love to use.

Insight

I learned that by not allowing users to interact with the app by forcing them to log in from the beginning, will most likely keep users away from using the app. Instead I let the user play around with it and actually placing an order. By then we let them log in and continue with the project.

Solution

My goal was to align the user interface with the new identity for Squarespace. To communicate attitude through typography and abstract shapes. Equally important was the user experience through out the app to make it as easy as possible to understand and to use.

Process

After many trial and errors I decided to make the onboarding experience really easy and intuitive. Also to keep each step in the process clear and concise. Choose the style of the product photography that you want. In the next step you get a Pinterest-inspired view where you select the images you really like. Last step is all about writing down your objectives and thoughts for the shot. It was crucial for me that the most important step, which is the Inspiration step, where you select the images. To actually simply select the style that you like. Depending on the users choices the app will automatically match you the the perfect photographer for you. Everything to make it as easy for the user as possible. Instead of letting the user go though different photographer pages and look of what they've previously done, and then decide which one to pick.

Design System

The design system was all about being on point with the Squarespace branding. And to make the app feel and breath Squarespace-attitude but still maintain familiar visual language and interactions used by apps in general. I kept a clear visual hierarchy of typography, thinking of smooth and intuitive animations between the different steps in the navigation. For example, instead of using the standard back arrow (<), I used the previous headline from the last step as the "back-button". Making the steps slide smoothly from each step the the other. This is one of few things that brings that Squarespace-attitude forward and what make it unique. I used as few colors as I needed to let the images and iconography speak for themselves.