Kaamstart - FIFILO - A UI UX Design Studio

Delivering authentic services at the push of a button

  • Kaam Start
  • India
  • On Demond
  • UI/UX Design

A one click service booking design

CLIENT

KAAM START

BUSINESS TYPE

On Demond

SCREENS

10+

TIMELINE

1 Month

The Challenge

For this project the main challenge was to incorporate mobile responsiveness to the user interface design of the website. As majority of the users made use of their smartphones to order and avail of the services provided by KaamStart, a responsive mobile interface design would make the website more convenient for the users. Moreover, customer information and lead generation form had to have only the required number of fields and be easy for the potential users to fill up. The user interface needed to have a one click booking design to provide the users the ease of booking and an efficient and time saving user experience.

WireFrame

The Solution

Discover - To be able to deliver end products that are result oriented, it is essential to understand the get a clear picture of target audience and business requirements. The client KaamStart specializing in providing maintenance and utility services required a mobile responsive and user interface. The target audience consisted of customers who mostly used their smartphones to avail of the services provided by the client. So in this first phase of design and development, we did full task analysis. We needed to have a clear concept of the overall design of what the user interface would be like, and functionality and features that the end product would have. To get a better idea and for design inspiration, our team surveyed other such websites and applications presently available in the market.

Define - In order to define our project, we firstly looked at our main challenge, which is to design a mobile responsive user interface without compromising on the quality and functionally of the product. Next, on the list was to incorporate a lead generation form within the landing page. The UI interface needed to highlight the different services the business enterprise provided for compelling and appealing UX. The lead generation and CTA (call to action) form has to be simple and easy to fill, comprising only the most necessary number of fields. And in addition, the website had to have a neat and uncluttered feel and appearance that would reflect the brand and company’s core values

Design - So as with all our projects we started with a basic design of the website. While doing the sketches, we first incorporated the main feature and function that the website needed to have. This included a CTA and a lead generation form, a display of the services provided by the client and storyboards depicting customer reviews.
To make it mobile responsive, we decided to take the mobile-first approach. This mobile-first approach would allow us to prioritize the mobile version of the website over the desktop version. This meant designing the smallest view of the website first. So in order to make the website mobile responsive in the best way possible for an impactful UX, we made the use of CSS integration. The choice of fonts in terms of typography was vital, we had to choose ones that worked well on big as well as small displays. We avoided the use of large graphics for faster loading on mobile devices, we designed scalable navigation to make top features and function options visible on all devices and an effective visual hierarchy to accommodate all screen resolutions. And fluid grid sizes and UI design to accommodate one click service booking.
Incorporating these aspects to make the website mobile responsive we proceeded creating the wireframe and then building the website prototype.

Deliver - Once we had a working prototype in place, we tested the prototype on a real mobile device. Most of the core UI design worked seamlessly, however the product required some fine tuning and elimination of some features. Following the competition on minor issues on the website, we carried out a series of validation tests to see that everything was in place and the website ran smoothly on all devices without any functionality or UI issues so that it would make for a meaningful UX. Our final version of the product was able to meet the expectation of the on every aspect and we were able to deliver a fluid UI design for an engaging user experience.

The Typeface

Poppins ☞

The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography

Poppins Bold

Aa

1234567890

ABVDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Poppins Regular

Aa

1234567890

ABVDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Color Palette

Primary Colors

HEX

RGB

CMYK

#173F53

23, 63, 83

72%, 24%, 0%, 67%

Secondary Colors

HEX

RGB

CMYK

#8ED974

142, 217, 116

35%, 0%, 47%, 15%


Other Secondary Colors

HEX

RGB

CMYK

#7AC95C

122, 201, 92

39%, 0%, 54%, 21%

HEX

RGB

CMYK

#434345

67, 67, 69

3%, 3%, 0%, 73%

Have A Design Idea

Let's create a better user experience
together!

icon
icon icon icon icon icon icon