Before we begin designing something for people that they will love, we want to understand their behaviors, needs, and motivations. Our team uses interviews, surveys, user personas, and data analysis as the foundation of our research process. This research is used throughout the rest of our process.
Flowcharts communicate the flow from screen to screen, illustrating the user’s journey. Before wireframes or prototypes can be created, the team needs alignment on the goals, behaviors, and motivations of the user. User stories are used to describe the activities taken by a user.
It’s imperative to know how the audience consumes information. Experiences should feel natural and easy to use. When we understand the primary motivations of a user, we can craft an information architecture, most times in the form of a sitemap.
Wireframes are a very important tool which allows us to focus on the structure and content of each page, without worrying about the visual appearance. We focus on the different sections of content and how that content is prioritized within each section. Creating a clear hierarchy to guide the user through the information on each page.
After we’ve finished the blueprints with a sitemap and wireframes, it’s time to bring it all to life. We infuse the brand, personality, visual elements into the website, or application design. We make the story stronger by making it visually appealing. Not only do we use the visual design to create something visually pleasing, but we use it to guide the reader’s eye with intention.
We use prototypes to test assumptions about the experience that we’ve created. The goal is to provide a test experience as close to the real thing as possible. The prototype protects you from missing critical parts of your application before moving into development. Additionally, prototypes will give you an idea of what the end product will feel like.
We spend time identifying the target users and understanding the pain we alleviate and the gains we are striving to achieve. We learn their behaviors, needs, and motivations to inform the experience we build.
Whether we collaborate internally or with our clients, we use a collaborative approach and established exercises to generate ideas quickly. We believe in an inclusive, “yes and…” kind of attitude.
It is essential to tell the right story to capture an audience. Our research is used to direct the navigation, content organization, and user journey. The wireframes should reflect your vision and validate your value proposition.
After wireframing, the team creates the design elements for the website or application. We bring together the brand, personality, and user journey, and visualize the interface in mockups. When the mockups are complete, they are made into a working prototype.
A wireframe is a blueprint for a website or a digital product. A wireframe focuses on content, structure, and layout, whereas a mockup focuses on the final visual of a website or application. A mockup uses a wireframe to inform where things should go and the hierarchy of components and copy. Think of the mockup as a final design of how a page or screen will look, and a wireframe is a blueprint that guides that design.
The real benefit of wireframing is that it allows you to focus on the base of the product or website you’re working on, without the distraction of focusing on the final design. It acts as a blueprint for what you’re designing, especially the navigation, content, and structure. Telling the story is just as important as how a website or digital product looks. Wireframes are a starting point to get alignment with crucial stakeholders, without the team getting distracted with fonts, colors, or specific graphics.
There are many tools out there to either help you speed up your process or provide a fantastic user experience. The best tools for wireframing are design system kits that speed up your process for common user interface patterns. You can make a system that is custom to your needs, or you can buy one from design marketplaces. Our team uses Sketch combined with a custom pattern library that we feel best to solve common design problems. For prototyping, there are many tools out there. We love and use InVision for prototyping. The project team can share designs, clients can provide feedback, and screens are connected to give a close to real-life experience. In addition to Invision, other tools can do the job, and we enjoy a few like Framer, Figma, and Marvel.
Prototypes allow you to test your ideas and create something as close to the real end-product as possible. It will enable you to share a useful experience with the team to verify alignment, test for usability issues, or even get first impressions from your target audience. The time spent at the beginning of a project building a prototype pays dividends throughout the product development process. It highlights potential problem areas with the user’s experience, provides details to the developers that make the application easier to build, aides in the QA process, and ultimately saves time and money. Making changes to a prototype is significantly cheaper and faster than making changes to a complete application.
Our teams break down big ideas into their simplest form. They work with you all the way from ideation through delivery and support you every step of the way.