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.
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.
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.
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.
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.