Back to Projects

Rubyscout

Rubyscout is a global web directory for professional beauty services.
Data
13 Jul 2020
Client
Michelle
Duration
7 month
Deliverables
Website
Duration
7 month
Technology Stack
#Symfony #Webpack #Facebook Api #Stripe #Chartjs #Aws

About Project

About the Product

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

Michelle
CEO and Founder of 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.

01 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.

02 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.

0
Team Members
0
hours spent
0k
users per day

Overview

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

01 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.

02 Sitemap

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.

03 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.

04 UI Design

Our team crafted a unique design that is visually attractive and emotionally appealing to predominantly female users of the website. We used bright colors and a clean and fresh layout.

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

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

01 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.

02 Typography

We used a simple font that would contribute to creating a clean and fresh look.

Montserrat Montserrat
Montserrat Montserrat
Montserrat Montserrat
Montserrat Montserrat
Montserrat Regular
Montserrat Medium
Montserrat SemiBold
Montserrat Bold
Montserrat Regular
Montserrat Medium
Montserrat SemiBold
Montserrat Bold
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
01
02
03
04
05
06
07
08
09

03 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
#FCCFD9
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.

Looking for help with your app?

Do you have an idea for a great app? We’ll help you to turn your concept into a full-fledged mobile app in record time

Schedule a Consultation
Next Project
Scanner +

Let's talk about your project

[email protected]
Filter