Product Design Playbook
i.e How do we figure out the Lo Fi and Hi Fi mockups for our products?
This page details our product design process. There are two goals one would like to achieve using this process and the steps for both of them are presented here. Additionally, the product designer needs to go over the prerequisites and feel comfortable with the concepts there so that he can work on either of the goals.
Goal: Come up with Wireframes/Lo Fi mockups
Prerequisites
- Read the Product Experience Principles document. This will help you understand the standardized experiences we’ve outlined there. These standards will give you clarity on your starting points when you draw a wireframe screen.
- Go through a LoFi Figma file of an existing easy product (ex: culture.easy). You will be copying screens from this reference file when you are building your screens.
Steps to come up with Wireframes
- Create a new Figma file and name it “X.easy – Wireframes” and build your screens.
- Copy reference screens from other wireframe files (ex: culture.easy – Wireframes) to build your screens.
- Stick to using Black and White for wireframes as the primary goal is fast iteration through feedback at this stage. In cases where you just want to paste a screenshot(that you got from the internet) to save time, go for it.
Goal: Convert Wireframes to High Fi mockups
Prerequisites
- Understand the base design decisions we’ve taken for easy products. We’ve come up with this simple list with inspiration from the minimal Pulse design system. Read their design thinking first. This should take about 20 minutes.
- We’ve vastly simplified our Design decisions as follows.
- Typography
- Font Family – ‘Open Sans’
- Use a line height of 140%.
- Reference: https://pulse.heartbeat.ua/principles/typography
- Colors
- Stick to 3 colors – White, Black and the Brand color.
- Experiment with white vs greyish backgrounds if need be.
- For text colors, use black and greys.
- Reference: https://pulse.heartbeat.ua/principles/colors
- Icons
- We prefer using outline icons.
- Icons are incrementally added to the Figma file. If it’s a new icon, the first place to look for icons would be Material Icons and AntD Icons. Material has a bigger library of icons, so you might find more options there.
- Spacing
- Spacing between components should be multiples of 8px.
- Reference – Spacing Section, Designing Layouts
- Accessibility/Color Contrast
- Typography
Steps to come up with HiFi mockups
- Introduce your brand color in the Figma Design System.
- For each screen in your wireframe, copy a reference screen from a reference High Fidelity screens. This should give you an layout with some basic values (ex: sidebar links)
- When building your screens, reuse components from Figma components. Have an inclination to add new App Components into the Component File when you need that component in more than one place.
- You will need to pay attention to spacing between components. Maintain multiples of 8px so that the screen looks good.
- If you would like to make changes to the base components (Atoms, Molecules), please reach out to the design leads. Changing them has an impact on all high fidelity screens.