One stop for all finance, engineering & legal services from Kashmir
category
intro
Art direction
Branding
Corporate Identity
UI design
UX design
tools
Adobe Illustrator
Adobe photoshop
Adobe XD
Wordpress
ol' pen & paper
Wizkid Consultancy & Financial Services is a service provider offering end-to-end engineering, financial and legal solutions to a diversified range of customers across India.
Wizkid has been providing customers with project management, tax consultancy, credit facilitation, etc. They have a dedicated pool of talented individuals with core engineering skills & all-around experience. They are further thinking of expanding into the education industry and providing training facilities as well.
overview
As the Indian financial year 2019-2020 ended, Wizkid decided to expand its functionality to include engineering & legal services. With this addition, they decided to have a fresh look with a new branding, corporate identity & website.
One of my major responsibilities whilst working with Wizkid was providing them with guidelines for each of the deliverables. The guide booklet would encapsulate the dos & don'ts while working with the brand elements - logo, logogram, fonts, color palette, icons, image style, social media, and more.
prepration
I started out looking at some existing design systems from giant brands like the Big Four accounting firms - PricewaterhouseCoopers · KPMG · Ernst & Young · Deloitte
They are well established as the four largest professional services networks in the world.
Also, competitor brands were compared in parallel for their branding & corporate identity, adaptability across platforms, the principle of website design: simplicity, accessibility, navigation, ease of contact and more.
Before designing the team decided to synchronize the tasks and segregate them among ourselves. The list included: Brand Identity, Power point template, Corporate collateral designs, UI & UX process with website design
refreshing the brand
After talking to the client and considering the target market, it was clear to me that we needed to create a very traditional multinational aesthetic. Being an early-stage of business, the branding for the company was not well defined.
The aim was to create a functional identity that was clean, minimal, and represented the values they stood for. After a few brainstorming sessions, we decided to take a Typographic approach.
They want a Wordmark that suits their personality while also communicating their business.
After a few trials, we discovered that the alphabet "W" independently was strong enough to represent the brand. Having various business verticals within the Wizkid Consultants umbrella sparked the design style on the wordmark.
foundation
We applied the Atomic Design principles into our design system. Design systems are largely based on the principles of Atomic Design by Brad Frost. He starts with the most abstract level and ended with the most concrete level of a fully designed webpage.
In addition to inverting the hierarchy, we decided to promote consistency and cohesion which would result in users mastering the UI faster.
Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before.
process
ideate
Develop a solution to an existing problem and test the idea
draft
Create basic layouts on pen and paper
wireframe
Creating a web blueprint with the purpose of arranging elements to accomplish their purpose.
site development
The process of building a website, establishing functionality & relationships between various elements
wireframes
By taking time to organize the services, industries into folders, sub-folders & files, we were able to create a more realistic & efficient Library.
After the organization, it was time to put pen to paper. The first step was to revisit the brief given to us by the stakeholders, jot down what did they require & what do their target audience wants to see? With all the information set, we made a sitemap, followed by rough layouts on paper.
An important factor we had to keep in mind while designing the layouts and navigation was to include options for the audience to request a callback or direct contact with the company from any page.
Once the layouts & navigations were finalized, the team & I got creating the web style guide, that included everything from buttons, forms, modules, and sections and made sure to include all of the various states.
challenges
development
We teamed up with Ram, a development agency based in Chennai, India to help us transition and build the new site. They started the development by developing this with HTML, CSS & PHP coding. During this time the clients started to pour in more content and sections to the development. Everything was manual and required many sleepless nights to keep things together and moving.
After a few tests with the Wizkid team & meetings with the team that would take over after the website goes live, collectively it was decided to move the site onto a website builder. This would make it easy for their team to handle it post-hand over. So the full website was moved to WordPress. The handover was done in Jan of 2021 with a full training session for each section and how to increase engagement on the site.
There were two conflicting goals. The first goal was to shift the Focus onto the Content while also including all the details they had shared. During the information-gathering stage, we noticed the information overload which would result in the USPs being lost within it all. We needed to organize the data given, simplify it and make it relevant. This took most of the time for this project, but ultimately streamlined our design.
Another pain point was the paradox of choices in their services and the sub-services, a solution we suggested and implemented was prioritizing the options after narrowing down their main target audience. With a vague target audience, the process to impact was minimal while also confusing them with hundreds of options in no particular order. This was implemented after a simple real-life demonstration.
