Product Design Guideline

Role: UX, UI
Timeline: 1 month

In design, we care a lot about consistency. There is a substantial psychological reason behind what we believe and that because we don't want to surprise our users constantly. We don't want to make them think about things that are not solving their problem, and instead, we want to help them learn our product quick and easy so that they can tackle their problems seamlessly.





As the first designer in the team, I knew to organize the future work, we should think about having a design guideline. This could let me save a lot of time down the road and it was making the process for the future hires much easier. 
On the other hand, we were developing an entirely new platform which required consistency in the user experience. We also needed to make sure our development team has a resource that is allowing them to continually refer to make sure they have the right asset and dimensions.



When it comes to creating design guideline, it's not hard to start from a wrong place at all. Since I worked in similar projects before, I knew where to start, the customer service room! They're the best people in your team to learn from them about the customers and just know something unique, they always have the best definition and it's just a good first conversation. I also sat down on so many customers calls to get our customers tone, feeling and thought process, after that project our CS team gave me an honorary title: "Man Crates Honorary CS Member." 
To come up with a design guideline though, I had to watch a lot of user sessions using Hotjar and also talk with stakeholder, engineers, and literally everyone. Then with the small Product team we had, I decided to have a quick brainstorm to come up with some basic constrains for our effort and detect the areas we want to nail down in our design guideline. 
Then I worked on a complete design guideline, called Atlas, to describe the design system at Man Crates, including patterns, elements, styles (followed the original brand guide) and interactions. As part of this online design guideline, I created interactions that were used all around our internal tools as well. A couple examples for the mobile interaction can be found here:

Tabs interaction in the mobile browser

Product View Pages in Mobile

The Space in Between


Designers always have attention to details; they can easily say something is 1 pixel off and that's not magic. At the same time, we would love to spread the word out and help everyone to catch those pixels off, so every component looks clean and organized. As part of Atlas (our design guideline), I define spacing and red-lines for pretty much every possible component we had in our platform:

Spacings for Dialogs in mobile view

Spacings for Calendar picker component

Elevation and Placements


To clearly define where each object is allowed to be placed and how they can be stacked on top of each other to eventually establish the shadows and their priorities in the user interaction, I had to define the elevation maps too.

Elevation Chart for Man Crates

An example of the elevation in the mobile menu


How might we all as a team have a reference for our design elements, so that we can create a high quality gifting platform? 


Design Guideline, Collaborative Design


Product team at Man Crates