Haute Stock: website redesign

Jun 6, 2017 | 2 minutes read
Project Link: https://hautestock.co/

Haute Stock is a membership site that provides high quality stock photos for women entrepreneurs. Rachel, the founder, had started this website to help out fellow entrepreneurs to make their own websites look professional and elevate their brand experience. As Rachel’s business grew, she wanted to elevate her own brand as well and redesign the member’s area of her website.

Working with the Tilted Pixel team (the design agency hired), I took lead on converting the wireframes to deliver a high fidelity design. Unlike some of my previous projects, I wasn’t involved in the user research process and I already had a clear idea of the project direction from the wireframes that were given to me.

The wireframes from which I created the high fidelity designs.

Using the style palette, I creating symbols and an asset inventory to increase the design workflow. By creating a base symbol for the common elements and using symbol overrides to customize them for the different screens, I created a very basic design system for the website. A design system improves the designer/developer relationship by reducing the amount of inconsistencies and allowing future features to be created more easily. You can see an example of creating base symbols and component design in the form symbols below.

The various form symbols used and their naming structure.

Although I had a smaller role than usual in this project, I took this opportunity to learn more about the design workflow and increased the productivity for the Tilted Pixel design team. The end result was high fidelity designs and an asset library that enabled the developer to implement the project more easily.

The final product. High fidelity designs handed off to the developer.