Design Approach:

  • Clear white space
  • Focus on content
  • Actionability with Red buttons
  • Unique Illustration visual style
  • Adaptive content
  • Responsive design
  • UI that help users to make better decisions

SULEKHA VISUAL DESIGN LANGUAGE

About

Sulekha is India’s largest and fastest-growing digital business in local services ecosystem. We designed brand identity & visual design language for its new product UI. Visual design language consists of UI design style guide, brand guidelines and UI KIT development. The new UI design is helping Sulekha in improving user engagement, desirability and reducing website bounce rate.

Defining Brand Values and key objectives for visual design language in the beginning of project helped us to orient visual design in right directions.

Positioning of Brand Values & Personality:

  • Credible/ Trustworthy
  • Simplicity
  • Warmth & Helpful
  • Value Your Time
  • Feedback Driven
  • Keep Consumer First

Objectives for Visual Design Language:

  • Reduce Information Clutter
  • Better Information Cognition
  • Improving Desirability
  • Increase Response Time
  • Feedback Driven
  • Simplicity
  • Youthful Design
  • Visual Information Hierarchy
  • Visual Design Consistency
  • Scalability/Adaptability

Logo Redesign:

Sulekha symbol consists of yin-yang type of symbol with hidden ‘S’ in between two shapes. The two shapes in Red and Yellow stand for User and Service provider respectively. This Yin-yang type of arrangement symbolises balance between User and Service provider by hidden intermediate ‘S’ i.e. Sulekha. The Symbol had certain impurities in shapes, movement, rhythm. We also improved the legibility of the ubuntu typeface by slightly increasing letter spacing and flattening canted vertical terminals.

Brand Architecture:

Brand architecture is the structure of brands within an organisational entity. It is the way in which the brands within a company’s portfolio are related to, and differentiated from, one another. Sulekha works in various domains such as Sulekha Properties, Sulekha Business and Sulekha Products. Initially, all these domains used to run individually. This created a lot of visual inconsistency in branding and design. To ensure a visual consistency and hence create trust among Sulekha users, stakeholders, partners; we brought all domains under single brand and defined sub-brand style.

Internal Communication:

We extended brand visual style into internal communication material to define a clean, clear approach of design with simplicity and focus on brand key colours.

Colour Palette:

Colour palette focusses on primary brand colours. Brick red is an accent colour used to Call to Action buttons for Sulekha Local Services. Background colour palette consists of bluish and brownish grey colours.

Typography:

Sulekha uses Open Sans for its branding and product UI.  Open Sans was developed with “upright stress, open forms and a neutral, yet friendly appearance” and is “optimized for legibility across print, web, and mobile interfaces.” Featuring wide apertures on many letters and a large x-height (tall lower-case letters), the typeface is highly legible on screen and at small sizes. It belongs to the humanist genre of sans-serif typefaces, with a true italic. The typeface brings friendliness, simplicity, focus on content due to its neutral nature, high legibility and helps in information reading experience.

Iconography:

We used both Filed and Outline icons for Sulekha product UI. Filled icons are used at specific places such as Navigation menu bar, where we want to bring more user attention and hence weight age is given. Outline icons are used at maximum places on the site to bring equal weight age in cognition with information.

Illustration as a Visual Style:

We wanted a bring unique visual appeal through visual imagery. Sulekha imageries mainly about Local Services. Sulekha caters information need for all types of services in India. Use of photographs was a challenge to portray all types of Indian local needs. Also, there were certain production drawbacks such as—cost of photography, scaling and adaptations of images, developing and shooting scenarios, portraying emotional images, storytelling and file size of images which dramatically affect page loading time. We conducted small guerilla research to understand how people perceive Illustration against Photographs.

Key Findings of Research:
  • Irrespective of the medium and approach; the imagery should be focused on what we want to communicate.
  • What Sulekha stands for should be conveyed immediately.
  • The imagery can convey the gamut of services that Sulekha offers.
  • It should emotionally connect to the user.
  • The major emotions which were found to be appealing are friendliness,care and concern, helpfulness, approachability, trust and reliability.
  • People preferred imagery which was clean, colourful and which portrayed some activity and action.
  • People paid close attention to expressions of the characters.
  • The placement of the central, emotional characters should be prominent in the imagery.
  • Majority preferred illustrations and associated it with fresh, modern and new.
  • The perception was that the illustration conveyed the story about the service along with its values.
Why Illustration?
  • Illustration becomes Content
  • Easy to convey who we are and what we do
  • Easy in Production, Scaling & Adaptation
  • Saves Time
  • Cost Effective
  • Unique Approach for Imagery (no one tried before in listing business)
  • Easier to iterate and implement
  • Reduced File size

UI Kit Development:

We developed a UI kit for both Desktop and Mobile web interface. This helped us to get the styling to the pixel perfection and consistent in the design and development process.

Desktop Web (key page designs)

Below videos illustrate few key mobile interactions developed along with new visual design.

Home Page
Business Listing Page
Business Info Page
Sub Category Services Information Page
User Dashboard
Booking Services

Mobile Web Interactions

Below videos illustrate few key mobile interactions developed along with new visual design.

Form Interaction
Home Page
Business Listing Page
Business Info Page

Lead Conversion Form Experiments

Below forms illustrate various form variations that we tested and validated for various service categories as per the information needs.

Madlib Form
Universal Locality Based Form
Multi Dimensional Lead Distribution Form

Value of Visual Design for User:

  • Flawless Device Experience for the Product
  • Values User Time
  • Delivers Qualitative Information
  • Projects Quality of Services
  • Viewability of Information
  • Findability of Information
  • Brings Transparency
  • Brings Context and Relevance
  • Brings Surprise & Delight to User

Impact of Visual Design on Product Experience:

  • Keeps Consumer Needs First
  • Changes Brand Perception
  • Earns Trust & Credibility
  • Helps in Brand Building
  • Brings Professionalism
  • Creates Feedback Driven
  • Surprise & Visual Delight
  • Unique Tone of Communication
  • Improves Efficiency & Productivity

Impact of Visual Design on Business Metrics: