Working under contract with Capco and their creative team, we were tasked with creating user personas and mapping the user journey and finally creating a design system for the app.
We started the project by researching the competitive landscape to establish a clear brand differentiation and creative direction. To get the momentum started we began with moodboards which are an easy way to establish a creative foundation for a website design project.
It’s an easy way to compile a wide gamut of appropriate content that defines the visual voice, the personalities, the style and aesthetic of the business product or service. It’s not about creating the content at this stage. It’s about gathering and collocating found content that reflects the emotional feel and mood you want to pursue in the design stage.
Mood boards for web design is like visual prototyping. Like traditional mood boards, web design mood boards compile inspirational elements, color palette, typography and texture in a context that emulates the design elements but is not specific.
In conversation with the client, we determined the primary and secondary user goals and began to design the user journey and the content requirements with a site-map which became the foundation and blueprint for the website design-build.
Once the sitemap was approved we moved onto the design of the wireframes. These designs outlined the page architecture for every unique page template. This phase is critical in providing the general hierarchy of content and user-flow and enables the client to visualize the navigational experience without getting bogged down in the graphical details.
I start the logo design with sketches and rough ideas. In the initial stages of the logo design process, the ideas are very loose and we are not concerned about details at this stage. We are interested in getting the conversation started to establish a creative direction. Once a general direction is chosen I then start to refine the concept and chip away to get to the final design.
Using the feedback from the moodboards we started building micro-components for the design. These smaller elements would later become the building blocks that would define the pages of the website. Once we had the approval of these smaller components we began to create a Style Guide document which became the reference for developers. With this vital document in place, we started to skin the wireframes with the new UI, typography, and colours to create the final mock-ups.
User Interface and user experience design of the dashboard and auto loan user authenticated portal.
Designs for a sister lead gen website.
