Yervana’s mobile application mock-ups.
Yervana’s mobile application mock-ups.
yervana_logo

Yervana

A marketplace app that allows you to find your next adventure
Industry
Industry: Tourism

Client background

Yervana is a marketplace where travellers and adventure seekers can connect with locals to participate in authentic and personalized experiences. Through the mobile app and website, users can browse activities, select and book the listing they’re interested in and communicate with the host to coordinate the details.

Yervana offers a safe and secure platform for payment and is managed by a peer-to-peer review system similar to other shared marketplace apps. Perfect for adventure buffs and individuals who like to wander off the beaten path, Yervana lets you experience the difference and the uniqueness.

A person kayaking in open waters.
A person kayaking in open waters.

The ask

Yervana needed a trusted product development studio to build a fully functional website and mobile app for its users to enjoy.

The solution

After conducting Discovery sessions and performing in-depth user research, TTT Studios proposed a series of web and mobile concepts that serve the specific needs of adventure hosts and guests.

Yervana’s website on desktop.
Yervana’s website on desktop.

The outcome

By incorporating design and software development best practices, TTT Studios created a solution for Yervana on time and budget. The Yervana website has won a W3 award in two categories: UX Design for Websites & Tourism for Websites.

Our approach

Yervana’s mobile and desktop calendar view.
Yervana’s mobile and desktop calendar view.

Two sides to every story

The Yervana app features two main user types, each with their own end goals. Guests are users looking for their next personalized experience, and Hosts are experienced providers looking to share, teach or guide guests in their field of interest. Let’s take a closer look at each one.

Guests

  • Guests can browse and explore the many adventures listed.
  • Each adventure has complete details on ratings, reviews, price, meeting places, and other important information.
  • Guests can contact the hosts directly on the website or app for easy two-way communication.
  • Guests can favourite adventures that caught their eye and revisit them at a later date.

Hosts

  • Hosts can organize and track their itinerary to see all their upcoming activities and bookings.
  • Hosts can create new activities featuring three different states (Published, Drafts, and Unpublished).
  • Like guests, the Inbox tab lets hosts communicate with guests.
Yervana’s mobile application mock-ups
Yervana’s mobile application mock-ups
Yervana’s mobile application mock-ups

The design process

The UX phase of the Yervana project featured the following stages:

  1. Defining user journey
  2. Sketching with paper and pen
  3. Digitizing wireframes

UX Design

We constructed the flow of the wireframes based on the user journeys of guests and hosts. The screens are kept in black and white to prevent the colours from distracting test users from the flow of the screens.

UI Design

After UX has been settled on, we move on to the UI phase, where the following steps occur:

  1. Add branding guidelines
  2. Applying UI to main screens
  3. Upload assets onto Zeplin
TTT Studios’ developers working on desktop screens.
TTT Studios’ developers working on desktop screens.

The development process

We approached development a little differently for Yervana than in a normal situation. Because this is a more extensive product, we developed the frontend and backend in parallel in the interest of time.

Purple frontend icon.

Architecture Definition

Our frontend developer and backend developer mapped out all of the screens and laid out all the frameworks necessary for feature development. In a typical process, we would develop the API and test it before starting the frontend development. However, because we were developing both the frontend and backend in parallel, we populated the frontend with sample/offline data using Mockaroo, which allowed for continuous validation with design.

Purple feature development icon.

Feature Development

All the work done in the previous stages was brought to life in the second development phase. Our developers wrote and rejected a whole lot of code during this stage. Business logic issues that came up were also addressed at this time. We used Trello, a project management software, to keep track of improvements and problems.

Built with

Purple desktop and mobile icon.
  • Supported OS

    iOS 10+

  • Language

    Swift 3

  • Networking

    Moya and Alamofire

  • Crash reporting

    Fabric and Crashlytics

  • Distribution

    Testflight

  • Automation for continuous delivery

    Fastlane

Purple backend icon.
  • Language

    Java using Intellij

  • Framework

    Spring Framework

  • Database migration

    liquibase

  • File storage

    Amazon S3

  • Database

    AWS Relational Database (RDS) using MariaDB

  • Email delivery provider

    Mailchimp and Mandrill

Toolbox

Toolbox

Sketch logo.
Adobe Creative Cloud logo.
Trello logo.
Jira Software logo.
Bitbucket logo.
MindNode logo.
Slack logo.
Bitrise logo.
Zeplin logo.
Mockaroo logo.

Download the app

Services provided

Services provided

Purple project folder and setting sign icon.

Project Management

Purple mobile icon.

Mobile App Development

Purple desktop icon.

Web Development

Purple pencil icon.

UX & UI
Design

Purple backend icon.

Backend Engineering

Purple desktop and mobile icon.

Frontend Engineering

Other projects

See all case studies