Year : 2018
Duration : 2 months
Type : Website Redesign
Agency : Wondersauce
Client : Fourpost
Development : Wondersauce
Role : UI/UX Design / Iconography Design / Design System
Tools Used : Sketch / Zeplin / After Effects / Illustrator / Photoshop
Brief
Fourpost is a venture-backed, startup based in NYC that supports for local, emerging, and direct-to-consumer (DTC) businesses to open their own storefronts in Edmonton, Minneapolis, and NewYork. Wondersauce was in charge of creation for the newly renovated website to expand their retail influences nationwide.
I worked closely with Producers, Designers, Creative Directors, Developers, and UX Strategists to perform sketching, conceptualizing and developing design system and intuitive user flows, designing aesthetically pleasing and engaging interfaces, and creating compelling contents for use in the website and mobile in responsive design.
Typography
A limited palette of type styles is essential for maintaining consistent hierarchy across all pages. Kerning, capitalization and cases rules should be referenced from the Fourpost brand guidelines. Type settings should always be pulled from the document’s Text Styles panel.
Colors
The Fourpost color palette is limited to a select assortment of primary and secondary color options to not clash with the variety of product and lifestyle photos that will be provided by the Fourpost family of brands. Use masked color symbols when possible to allow for mass updates in the future, if necessary.
Grayscale colors should always be harnessed for the Fourpost master brand, while additional pops of color can be introduced to compliment sub-brands and locations. Primary Accent colors should only be used one at a time, not together.
Iconography
Icons should be created with single pixel stroke widths to allow for scaling without losing the integrity of the lines. All icons should be created at the same to be relative to one another within a 96x96px container size and should be converted to symbols to allow for seamless swapping. Icon coloring should be determined by color swatches for consistency and ease of future updates, if necessary. The icon set is expected to grow based on Fourpost brand and services expansion, and needs of the website.
UI Elements
UI elements should be grayscale in nature in order to seamlessly integrate into the design system that will be featuring a wide range of brands with varying color palettes. Converting common UI elements to symbols and nesting the various states of that element is necessary for ensuring consistency across all pages of the site as Fourpost’s needs evolve. The UI elements collection is expected to grow based on Fourpost brand and services expansion, and needs of the website.
