Work Single Main Image

The Need

Mobile app to connect with domestic service providers and should allow online books. App should have modern and intuitive user experience.

It could be pretty difficult sometimes to find nearby helpers like Carpenter, Plumber, Beauty & Saloon experts, Electrician, Construction workers, etc. HomeService app should be one stop domestic helper solution for your domestic needs.

Project Details

Project needs to be designed from scratch with all the modern tools and best practices. First step is to do competitor analysis involving research about already existing market leaders in this space e.g. UrbanClap, etc. Then, understand paint points in existing apps, noting down features they provide and that consumers will expect and optimize it further to provide most inclusive world class User Experience that users love to use.

In first version of design, I focused on flow around common home services with basic features and in future will be adding support for much wider range of services and collaboration features. I will also be doing look and feel improvements in next version.

Role :

Product Designer

Duration :

October - December 2022 (5 week)

Tools :

Figma, Illustration,Photoshop

Website :

Visit Website

Problems

Problem Sign

In this project, we need to create scalable design with all the best practices

Design home service app with all the modern tools and best practices to ease people's life and give them best User Experience.

Design needs to be scalable to accommodate quick changes, multiple iterations efficiently and at a faster pace.

Mobile Mockup
Mobile Demo GifMobile Demo Gif

Solution

Solution Tick

Designing for scale

Scalable designs are very important for modern applications, specially startups / mobile apps where a product goes through multiple iterations and serve a large number of users.

Figma, which is the preferred choice of most UI designers these days has lot of great features and improvements recently to help us achieve scalable design much easily.

Design System, Reusable component based designs with variants, Auto-Layout, Absolute Positioning, etc. is used in this project to achieve responsive designs.

Designing the details

First I started with a wireframe using pen and paper for an early version of the app. This helps take feedback and optimize on the whole application flow before actually spending time on design. This a very critical part which a lot of teams easily miss causing many back and forth communication and rework at a later point.

I also create low-fidelity wireframes for the projects where I have to collaborate with other team members. Once I had inspirations and starting point for the app, I started with the design.

Design Image

Some high level sketching for how all the pieces would fit together

Design Image
Design Image

Component based design, Auto-Layout, Absolute positioning features of Figma are used

Flow Diagram

Social media often feeds into the discovery of new content such as news stories, and “discovery” is a search activity.  Many people also perform searches at social media sites to find social media content.

Competitive analysis is a key aspect when in the beginning stages of an SEO campaign. Far too often, I see organizations skip this important step and get right into keyword mapping, optimizing content, or link building.

Flow Diagram

First Version of Design

In first version of design I primarily focused on application flow around common home services with basic features to keep it simple.

In next version, I will be doing improvements related to look and feel. I will also be adding support for much wider range of services and collaboration features. In below screenshots, I am presenting glimpse of few screens from my design.

Mobile ScreenMobile Screen

Design System

I created a design system that would not only build the consistency but also save time as we build new features. This will improve the overall process and experience for our app.

Flow ChartFlow Chart