Rubyscout: Beauty Services App.
13 Jul 2020
Rubyscout is a global web directory for professional beauty services.
Rubyscout
Client
Tech Stack
Services
#Product Strategy
#Product Design
#UI/UX
#Branding Extension
#Product Development
#Frontend Development
#Backend Development
#API Connection
#Analytics Integration
#Ongoing Production Support & Product Evolution
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.
6
Team members
410
h
UI/UX design
715
h
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
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.
