Wireframe Design Process
FROM DISCOVER TO DESIGN
Once the Discover phase is complete and we have clearly defined user personas and user journeys, we can start on the process each client is most excited about: Design. The ‘what will it look like’ is always top of mind for clients, and for a good reason. A well designed digital tool is created with the target audience in mind, making it easily navigable and intuitive for the end user.
CONTENT-FIRST DESIGN APPROACH
We’ve also talked about our content-first design approach. This helps to ensure each page on the website has a purpose, and allows for more creativity when designing custom templates. If we know what content is going on the page, it’s easier to pull out sections to spotlight rather than guessing as to what will be on the page.
CREATING A WIREFRAME
The first step in the design process is creating a wireframe for each page of the website or app to map out the functionality. Wireframes keep in mind the user experience (UX) while teasing the user interface (UI). A wireframe is a two-dimensional outline of a webpage or mobile app, much like a blueprint for a building. Since the website or mobile app is designed around the functionality, this is important to establish early on in the process.
We create wireframes in Adobe XD, a vector-based user experience design tool for websites and mobile apps. There are many resources to consider when creating the wireframes, including:
- User personas
- User journeys
- User actions and workflows provided by the Development team
- Content Outline
CLIENT INPUT
Once the wireframes are complete, we review them with the client to clearly communicate the functionality. This helps the client understand the flow and hierarchy of elements without the distraction of design elements. Our clients typically respond better to visuals over words so wireframes are a great compliment to our more complicated user action outlines. The wireframes are less formal, help fuel discussion and allow for changes before any development work is started. The more time we spend in the blueprint/design phase the smoother the development process will be. It’s much easier to make functionality changes to a wireframe during the mapping/design phase than in development.
WIREFRAME TO DEVELOPMENT
While it’s important to walk through the wireframes with the client, it’s also important for the Development team to be involved. Our Design and Development teams will meet to walk through the wireframes and talk through functionality and work through any potential issues. This also helps the Development team prepare for the build-out.
OVER DESIGNING A WIREFRAME
While wireframes are meant to be simple blueprints to follow, it is possible to overdesign. This usually happens when there isn’t a clear vision or goal for the website, making it easy to place importance on everything. This lack of direction results in a design without hierarchy. It is best to clearly define the marketing and business goals and user journeys to help establish a comprehensive design. With main elements and features defined, it is much easier to design clear visual paths without all the clutter.
AN EFFICIENT PROCESS
We’ve crafted our process, the Technology Impact Assessment, to be as efficient as possible for our clients while producing high quality, well researched digital products. By creating these wireframes, we are able to collaborate with our clients and understand their wants/needs so the final product works exactly like they want it to.
By Christina Maxwell