A boutique photography website

The Challenge

Hautestock was a growing business and wanted to improve their branding and web presence. To provide more value to their members, they wanted a refined design representative of their professional and modern identity.

The Outcome

A brand new layout was created that optimizes the photography viewing experience with a large carousel and optional filters. In addition to the gallery view, the membership settings section was also redesigned and organized to fit into simple categories such as edit profile, subscription settings and update payment.

My work creating the high fidelity mockups and a component library helped improve the developer hand-off experience.

Haute Stock benefited from a new client portal and checkout process that makes it ridiculously easy to find the stock photos you need.

Photo gallery with category selection

Using Atomic Design for creating components

For this project, the wireframes were already completed and my role was more focused on the high fidelity mockup. Coming into this project later on, I took the opportunity to learn more about UI design and best practices to create a reusable component library.

There are many ways you can organize your symbols when designing, I decided to follow the atomic design principles. Thinking like a developer, the goal is creating reusable components that are made up of smaller components. This creates a scalable system to create new pages within the system of constraints you’ve created.

Starting with the ‘atom’, the smallest component to create is the form input.

Next, I created different states for the border whether the field is active or not

Combining both symbols and adding a label above the form field,  we have our basic component to use

With the basic component, I was able to create multiple types of forms with different styling.

This reduces the number of custom symbols to create and provided a simple guide for the developer to recreate the UI design in code.

High Fidelity Mockups

Using the style guide that was developed, I created various components to define aspects of the wireframes below. Good UI design is a balance between creating personality through imagery and building a visual system that allows you to be consistent.

Initial wireframes

The finished high-fidelity mockups

Lightbox view

Membership checkout

Key Takeaways

Through this whole process, I learned a lot about the different needs of our users and how important usability is for new products. While the app itself had many great features, it was useful to overhaul the initial pages that users see. With these new landing and sign up pages, it grew the brand and gave it a more reputable identity.

1. Make every project a learning opportunity
   ‍While my main focus was on delivering value for the client, I also made an effort to understand new concepts and grow my skill set.
2. Adapt a ‘clouds and dirt’ philosophy for UI design
   ‍You should be spending most of your time looking at the high level of how each page looks and focusing on the little details that make up each component.
   
3. Utilize the different strengths of each team member
   ‍I’m an avid organizer in my personal life and I taught others about asset management while they taught me about visual branding.

Check out more projects