In our last blog post, we emphasised how psychology shapes brand strategy, which in turn influences our design process. Here, we’ll delve deeper into the 3 key steps we take in our web design branding process.
Web design takes more than a focus on technical matters such as wireframes, code, and content management. We believe that it is more about designing a website that aligns with an overarching brand strategy. Specifically, one that fits our client’s business aspirations, brand story and purpose. Our web design branding process always begins with building a good relationship with our clients.
With this in mind, we prioritise taking the time to carefully understand our client’s brand story and purpose. We connect with our clients to get to know them and their business better. Understanding our client’s business aspirations and how it provides value to their customers/clients is important for us to craft an effective brand strategy.
Step 1: Setting The Foundation
We begin each client on-boarding process with a brand & logo questionnaire. Questions such as “What attributes and/or emotions do you want associated with your brand?” and “How would you describe your brand to your friend?” encourages our clients to visualise their business analytically. We also ask questions that help our clients to narrow down their branding design preferences such as logo styles and formats.
Why is the questionnaire important?
The questionnaire allows us to record all the essential information about our client’s brand. These include their brand values such as the benefits of their product/service, words that represent their brand as well as their knowledge of their brand competitors. We include specific questions that pushes our clients to think deeper about their brand in order to discover aspects of their business that goes beyond what Google can answer. We also delve deeper to understand how our clients are currently marketing their brand in order for us to evaluate and leverage on its effectiveness.
The questionnaire is integral for us to identify our client s desired outcome and what must be addressed in the next stages.
Step 2: UI/UX research process
(Photo by: instagram.com/wireframebook)
We believe in taking a strong user-centered approach to each web design and development project we take on. With the information we have obtained from our clients through the initial meeting, questionnaire and research of their brand and competitors’ websites, we begin our UI/UX research process.
We plan out the skeleton of our client’s website by designing its:
1. Information architecture:
We draw up a chart that assists us in creating the website navigation map. IA categorises the content of our client’s website based on its importance and its links to each other. IA allows us to structure and organise all of the key information that our clients want to have on their websites so that their users can find everything they need easily. Visual elements, functionality, interaction, and navigation are built according to the information architecture principles. In short, IA acts as a blueprint of the design structure which can be generated into wireframes and sitemaps of the project.
2. Site map/navigation:
We derive the final site map from a careful study of the information in the IA, in a way that is the most seamless and user-friendly for the visitor. Several versions or iterations may be necessary to determine the best way of navigating the website.
3. User journey map:
The user journey map details the route that a user takes based on various use-cases throughout the website. We define the behavioral stages, and then align the customer goals with those stages thus determining what is needed on the website to achieve those goals. The map helps us to visualise how a user interacts with the web design starting from their first impressions which allows us to see from a user’s point of view.
Wireframes is a visual guide (without the presence of distracting design elements) that helps us focus on the structure and functionality of the website. It is created for the purpose of arranging elements to best accomplish a particular purpose. It also helps us to spot usability issues, and is recommended for complex or non-conventional websites.
5. UX flow:
A user flow is a series of steps a user takes to achieve a meaningful goal. When building the UX Flow, we describe what they will do at each step. We write out what the user needs to do at each step to get the job done or meet the goal/requirement. This goes hand-in-hand with the wireframes, as we can then tie everything together.
Step 3: Creative Conceptualisation
Subsequently, we proceed to translate our client’s needs, requirements and functionalities into a visual design solution.
We do up moodboards to help us visualise how effectively the typography, layout, typesetting and colour palettes work together. With reference imagery, moodboards help to determine the general look and feel, mood and visual language of the final design. Moodboards help to place both client and designers on the same page. It also provides a firm foundation for any design process moving forward.
One key takeaway that we hope that you’ll is to have a close, working relationship with your clients. Taking the time to understand your client’s business aspirations and brand story will help to guide your branding process. We work with all our clients closely through each and everyone of these stages, because we truly believe and value in being partners in each project.
We hope that you’ve found our 3 key steps in our web design branding process insightful! In case you’ve missed it, read our previous blogposts on the psychology behind web designing and why branding is a big deal.