Table of Contents
About
About MixRank
MixRank meticulously curates a real-time stream of the latest people, company, and technographic datasets. With updates delivered hourly, you'll always be at the forefront, instantly informed whenever the data that matters most to you undergoes any changes.
Why did we require a change in design?
The decision to refresh the website design was driven by a few key motivations. First and foremost, we wanted to bring our platform up to modern design standards and our new brand identity, ensuring that our users have a seamless and user-friendly experience. Furthermore, we aimed to enhance the quality of leads generated and stand out in a competitive landscape.
Goal and Objective
The project had three primary objectives: to distinguish itself from the competition, enhance usability for visitors while adhering to the brand identity, and drive increased and higher quality leads and sales conversions.
My Role and Responsibilities
Wireframing and Structuring
Iterative Mockup Design & Prototyping
Developer Handoff & Review
User Research & Competitor Analysis
d. Pain Points
Lack of content
Users used to visit the old website in search of valuable information, but they often left feeling disappointed because the site lacked the content they needed. This left them wanting more and made them hesitant to return, causing missed opportunities for meaningful interaction.
Outdated User Interface
The former design felt like a relic from a bygone era. Users found it hard to relate to and, in some cases, even struggled to use it. This outdated design did not only affect its visual appeal but also impacted how user-friendly and trustworthy it appeared to visitors.
Difficult to navigate
Moving around the previous website used to be a bit of a puzzle. Users found it hard to figure out where to go and how to get there. This struggle made their experience frustrating and time-consuming, and they might not have accomplished what they came for.
Ideation and Design
Embarking on the design journey, a multitude of ideas for the responsive website were carefully streamlined, focusing on those that promised the most efficiency and a truly user-centric experience, ultimately aiming to deliver the most rewarding user interaction and flow. This process began with the sketching of hand-drawn paper wireframes, which evolved into digital wireframes, and finally blossomed into the high-fidelity design through multiple iterations, each a step closer to the perfect user experience and interface.
a. Paper Wireframes
b. High Fidelity Mockups and Showcase
Using the sketched wireframes as a foundation, the new User Interface was crafted using Adobe XD, continuously refining the design based on feedback and adapting it as necessary. The design approach incorporated key principles, including Gestalt Principles, Fitt's Law, and the Law of Common Region.
Illustration Design
We got in touch with a freelance illustrator to whip up some cool 3D isometric illustrations to complete the look of the website. Ideas and concepts were tossed their way through written prompts, and they brought these visions to life. Then came an iterative review process, tossing in feedback and ideas, and our illustrator buddy worked their magic until we had the final designs in place.
Results and Impact
Usability Improvements
Average Time Spent on Website saw an increase of 8%, while there was a 9.5% increase witnessed in the User Engagement Rate.
Improvements in Web Traffic
General Web Traffic saw a steady increase by 12%, while the Bounce Rate decreased by 4%.
Increased Conversion Rates
An increase of 11.5% year-over-year change in customer conversion rates was observed.
Lead Generation
An increase of 9% change in quality and quantity of leads was noticed.
UI Kit and Design System
Typography
Fivo Sans Modern Bold
Fivo Sans Modern Medium
Fivo Sans Modern Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Color Palette
Form Elements
Daniyal Admaney Portfolio
UX and Product Design