Reimagining the booking experience with 2Hub to increase conversion

  • UI UX Design
  • React JS
2hub/2hubBanner.webp

Project overview

2hub/2hubProject.webp

The Brief

Solution

Structuring the information

2hub/2hubFlowmap.webp

Converting informations to wireframes

Once we had the information architecture finalized, we started with the wireframes. Ensuring a user friendly, simpler & more understandable wireframes athrough the platform.

2hub/2hubWireFrame3.webp
2hub/2hubWireFrame4.webp
2hub/2hubWireFrame5.webp
2hub/2hubWireFrame2.webp
2hub/2hubWireFrame5.webp
2hub/2hubWireFrame2.webp
2hub/2hubWireFrame4.webp
2hub/2hubWireFrame3.webp

Refreshing Ant Design System

2hub/2hubRefresh.webp

Color Pallete

Orrange is associated with optimism and energy, it conveys a message of positivity. It's an attention-grabbing, warm color that really pops when combined with different light & dark tones.

2hub/2hubColor.webp

Typography

Inter is a variable font family carefully crafted & designed for computer screens. Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate '0' from 'o', tabular numbers, etc.

2hub/2hubType.webp

Wireframes to designs

Building each components with the basis of atomic design model combining atoms, molecules to create a systematic design throughout the platform

Atomic Components

2hub/2hubAtomicComponents.webp

Other Screens

  • Marketplace

    2hub/2hubScreen.webp
  • Bookings

    2hub/2hubScreen2.webp
  • Payment Methods

    2hub/2hubScreen3.webp
  • Profile

    2hub/2hubScreen4.webp
  • Basic Details

    2hub/2hubScreen5.webp
  • Documents

    2hub/2hubScreen6.webp
2hub/2hubScreen.webp
2hub/2hubScreen2.webp
2hub/2hubScreen3.webp
2hub/2hubScreen4.webp
2hub/2hubScreen5.webp
2hub/2hubScreen6.webp

Responsive Design

2hub/2hubResponsive.webp

Similar Portfolios

projects/cognoai.webp

Cogno AI

Congo AI enables intelligent omnichannel conversations to help businesses provide seamless experiences to their customer at scale. We strategized the tech stack, and design flow to enable effortless user experience design.

View case study
projects/zest.webp

Zestmoney

ZestMoney wanted a simple and intuitive interface for their merchant platform, considering the diverse users who would be using it on a daily basis. Our in-depth UX research allowed us to design a cohesive user flow for an action-oriented app.

View case study

Come Experience - The Sketch Brahma Difference

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