Kickoff the project with discovery and research to flush out core issues, explore ideas, and hone target customers, product goals and business strategies. Set a long term goal, list questions that are the biggest risks, concerns and challenges to make this product be a success. Interview stakeholders about the assumptions and high-level goals, research competitors, interaction analysis, surveys, etc. Have an end-to-end prototype to present to at live customer research sessions. Finally, all of the questions and design ideas will flow into a dual-track design and deliver agile development process.
Focus on idea generation. Translate problems into solutions. Explore a wide variety and large quantity of ideas to go beyond the obvious solutions to a problem. This involves: information architecture, user flow, sketching, wireframing, prototyping, visual design, usability study and synthesis.
Design decisions involved: Business strategy, customer value/user needs and technology feasibility. And bringing engineering in early as possible.
Test early designs, target real problems. Rapid prototyping should be a priority wherever there’s desire to build better products. This process involves several iterations of a 3-step process: Prototype (turn the solutions into a mockup), review (introduce it to users), refine (use feedback to clarify or improve). Also, test work that has been built (dev & production) and for hypothesis and value (interview).
During the test, involve no more than 2 people in a room: the test lead and either another designer, PM, or developer. I love when developers join as they get to see problems IRL and they are then sold on fixing them.
Design is a never-ending process, and through hypothesis-driven design, it gives you valuable insights on what you should do next. The more you're able to loop through "Build, Measure, and Learn" cycle, the higher chance you have better results.
Good typography is crucial. It evokes craftsmanship and quality. By using a modern design system you can make sure typography is consistent across all pages. Readability is one of the most important aspects of a successful design. Visual hierarchy provides users with visual cues for locating information and understanding what is really important in your content.
Let the typography breathe.
It can support information architecture and interaction design decisions. While visual design is the surface layer, it should support everything that sits below it. Using color and typography hierarchy to help maintain spatial awareness, guide the user intuitively from one place to another. Don’t stray from incorporating your primary brand color throughout your product. Use secondary and tertiary colors to disseminate between features of your app and support clickable items.
Create a style or brand guide which will help communicate and store logic around how and when to incorporate visual design patterns into your product. This can also serve as a central document to be shared with all members of the product team, especially as developers implement the design.
Define reusable patterns. It makes a project much easier to start with a set of components and reuse them until you need to customize it or add a new component.
A component consist of a collection of elements, that are commonly used alongside each other to identify a common pattern within a flow. A small set of critical elements — navigation, type sizes, buttons, borders, lists, graphic element styles.
As you develop your functional designs, you’ll have a kit of parts to style quickly. You can adjust styles but as you do, keep your patterns updated so they are flexible and reusable.