About project Overview Design process Branding Conclusion

Rubyscout: Beauty Services App.

13 Jul 2020

Rubyscout is a global web directory for professional beauty services.

Rubyscout

Client

Tech Stack

Services

#Research

#Product Strategy

#UI/UX Design

#Branding Extension

#Product Development

#Ongoing Production Support

About project

Client and idea

The client hired us to create an interactive online directory that would easily connect local providers of beauty services to their customers.

Challenge & Goals

We aimed to create an interactive online directory that offered a comprehensive set of features for both service providers and customers of beauty services. The challenge was to get a clear understanding of the behavioral characteristics and practical needs of both groups of market participants. With a good understanding of the market, we set to design an engaging and full-featured product that would not only conveniently resolve customers' pain points, but also stimulate service providers to sign up and participate in the creation of the database. We used gamification of experience by creating Pro and Basic tiers for service providers and different levels of participation for customers based on their level of engagement. Besides, it was important for our team to craft a visually appealing design that would speak to its potential users.

Solutions & Result

Rubyscout is a website that publishes crowd-sourced customer reviews about businesses in the beauty service industry. Customers can search for beauty services nearby, read reviews, and make online reservations. They can share photos and reviews, view the feed, and add service providers to their favorites. Customers can create sharable collections of their favorite beauty service providers. Public collections can be followed by other users. Registered customers become Local Rubyscouters and are assigned levels for contributing content. After claiming their businesses, beauty service providers can specify categories, list services they provide and add business hours, price range, and special offers.

Michelle

CEO & Founder, RubyScout

Collaboration with Tino Digital Agency brought us a product that satisfied both us and our end-users. They responded and adjusted to new requirements very quickly. What set them apart was that the UX team really wanted to understand our business. In the end, the design turned out purposeful and quite beautiful. Plus, we enjoyed their style of communication and friendliness.

All reviews

Team members

410

UI/UX design

715

Development

project Overview

Main app features

Regardless of where they are located, customers can easily find and book beauty services nearby. After receiving a service, they can review their experience. To make the user experience engaging and fun we incorporated elements of gamification. People have a chance to support their favorite small businesses by telling the whole world about them. Users are assigned levels for contributing photos and reviews. The highest-level users unlock the possibility of contributing blog posts and influencing their circle of friends.

Main

On the main page, users can search for businesses that provide a specific type of beauty services in a given location. 'Quick Searches' displays a small set of popular services in various categories.

Search

Users can customize search results by considering the distance to their current location, preferred price range, rating, and subcategories.

Service Providers

We offer service providers two tiers of business accounts. Service providers with the basic account can list their services, communicate various information about the business to their customers, add photos to their page, and run promotions. Pro account owners can create blog articles and are prioritized in the search results. To have a mix of businesses to choose from, only the three top search results belong to the service providers with a Pro account.

Feed

As customers post photos and share reviews about their experiences at a particular service provider, they are displayed in the feed. Also, users can share their collections of service providers that they like.

Create an Article

Pro providers and customers can create blog articles that are displayed on their accounts.

Local Rubyscouters

Customers increase their 'Local Rubyscouter’ level when they post more reviews and photos. At the highest level, they unlock the possibility of contributing blog posts and influencing their circle of friends.

Design process

Research

Our team thoroughly researched the key components of a successful business directory, such as advanced search options and filtering. To gather specific insights on popular categories, features, and color schemes, we explored common standards in the market for beauty services.

Sitemap

Design process

We created a sitemap that clarified the structure of the website and simplified navigation flow for its users. Besides, it streamlined the process of wireframe design and development.

Design process

UX Wireframes

In the next stage, our team created low-fidelity sketches and high-fidelity wireframes. It allowed us to craft a well-thought-out set of screens and streamline the next stage of the UI design.

Creating a clickable prototype helped us to replicate the entire user journey from signing up for an account to making a reservation to publishing a review.

Design process

UI Design

bordered

Design Concept

The design concept uses an abundance of white space and rounded corners for a soft and fluid look that helps users to focus on service providers' pictures and details.

When it comes to the UI design, the beauty is in the detail. We used custom-made design elements to enhance the user experience. Users like to know where they are in the app - no one likes to feel lost. To help users orient themselves on the website, the current tab is marked with a little green dot. The UI must be consistent to lead to a consistently enjoyable user experience. The same green dot is used to emphasize various important points in the user journey. For example, it was used inside the search icon, inside the location marker, and next to the 'Services' tag.

adaptive

Mobile version

A traditional website designed for the desktop was adapted to mobile devices.

Burger Menu

The hamburger menu is a common way to place the top navigation icon on a mobile screen.

Compact Filter Settings

Comprehensive search filters were designed to reflect the criteria important to typical customers when they search for beauty service providers.

Profile View

Account profiles for users and businesses show an info block, photos, reviews, collections, and/or articles.

Branding

Logo

The final logo is a stylized representation of a ruby and a street loop, which symbolize uncovering local gems and supporting small businesses in the beauty service industry.

Branding

Typography

Since Scanner+ is a multilingual app, we selected a standard IOS font that would look good across all languages.

Montserrat

RegularMediumSemiboldBold

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

010203040506070809

Branding

Colors

Ruby color invokes a sense of vitality, beauty, and confidence while emphasizing the symbol of a gem at the same time. The gradient from bright pink to lilac reflects that each user contributes its unique shade to the community. Emerald green is the main accent color, which communicates clarity, freshness, and a sense of relief to the user.

#F43E67

Bright Pink

#B4257F

Lilac

#18CD93

Emerald Green

Conclusion

We supported our client through every stage of the project - from ideation to launching the platform. Our team is tremendously grateful for the opportunity to support small businesses and co-create this online service where people can get in touch with local service providers and root for their favorite local gems.