Enhancing the user and visual experience of the existing website of Wisedrive

  • UI UX Design
  • React Js
wisedrive/wisedrive_banner.webp

Project overview

wisedrive/wisedrive_project.webp

Our Solution

Structuring the information

We worked with the client to comprehend the challenges, objectives, and commercial strategy of the platform. The basic information architecture of the website was redesigned using the data acquired from the initial study and the competitor analysis.

wisedrive/wisedrive_flow.webp

Wireframes

Several iterations were created and ideas were thrown around in achieving the user experience part for the exercise module. From dashboard to the admin tables, high fidelity wireframes were created.

wisedrive/wisedrive_wireframe1.webp
wisedrive/wisedrive_wireframe2.webp
wisedrive/wisedrive_wireframe3.webp
wisedrive/wisedrive_wireframe4.webp
wisedrive/wisedrive_wireframe5.webp
wisedrive/wisedrive_wireframe6.webp
wisedrive/wisedrive_wireframe7.webp
wisedrive/wisedrive_wireframe8.webp

Color Pallete

We experimented with colour while adhering to the brand's history by sticking with the blue hues that make up their identity and trying some eye-catching gradients.

wisedrive/wisedrive_color.webp

Typography

Work Sans is a typeface family based loosely on early Grotesques. The Regular weight and others in the middle of the family are optimised for on-screen text usage at medium-sizes (14px-48px). The fonts closer to the extreme weights are designed more for display use both on the web and in print

wisedrive/wisedrive_work.webp

Turning wireframes into design

Transforming the high-fidelity wireframes by adding colors and other creative elements to create a pixel-perfect, visually appealing user interface. The UI was designed using a 12-column grid system to ensure responsiveness.

Intutive UI

wisedrive/wisedrive_intutive.webp

Responsive UI

Mobile responsive designs for the website were created to ensure optimal viewing and usability on smaller screens. By utilizing a 4-column grid system, we can effectively manage spacing, alignment, and proportion, providing a consistent user experience across devices.

wisedrive/wisedrive_ui.webp

Similar Portfolios

projects/ondway.webp

On D Way

A mobile app tailored for travellers traversing Indian highways, enabling them to discover and schedule pit stops at diverse restaurants while en route to their destination.

View case study
projects/extramileplay.webp

Extramile

Created a gamified user experience on an employee collaboration platform to create compelling engagements, collaborations, and a joyful retreat to a project management tool.

View case study

Come Experience - The Sketch Brahma Difference

our-service/sbPath.png
icons/arrowTop.svg