Cadabra Studio

Client

Blue Tree is a digital PR agency that cooperates with established tech startups and SaaS companies. The main goal of the agency is to help businesses gain more profit with the search. Blue Tree strives to provide SaaS companies with helpful services on crushing organic traffic and generating more traffic. The agency is also involved in reviewing B2B software in the market and making use of the best products out there.

Task

Our task was to redesign a Blue Tree website considering the principle and concept of the existing website. A new design should be stylish, minimalistic, and user-friendly. Moreover, the client’s demand was to make the logo unchanged, so we needed to adapt a new design to the logo style. Also, it was required to create hand-drawn illustrations and use serif fonts.

Mood Board

Our designers paid a lot of attention to creating visual concepts, adhering to associative and logical structure. We built a structure of associations to the “Blue Tree” name. Thus, our specialist found the proper solutions for all logical chains. The primary task of the designer was to build as much intuitive website as possible.

Visual Concepts

Creating visual concepts was necessary to clear out the right design vision we need to keep up with. So we conducted research, and we provided the client with a few options to choose the one he liked. We also considered the client’s preferences and brief during the research.

Architecture

Mind mapping is the next essential step that we took during the Blue Tree website redesign. A mind map helped us build the website's informational structure, prioritize the hierarchy of elements, and understand the whole functionality of the website.

Wireframes

Wireframing is the process that any UX design creation requires. They were built to provide the client with a more precise understanding of how the redesigned website will work. That is, we showed the client what we wanted to achieve. It was an essential part that required an individual approach to clear up the right direction for our team.

Site Pages

Once wireframes were created and approved, we proceeded to the building of clickable prototypes and tested them. Then it was the turn of the UI stage. We faced the next challenging but interesting task during this stage — building a visual layout and responsive design that will be adapted to smartphones and tablets.

Illustrations

We created custom illustrations that reflect the particularities of the project and the brand. Our goal was to convey the effect of freehand painting and use the combination of watercolors. Besides, we needed to reveal the digital direction topic in illustrations, so we did our best to combine the illustrations with the company’s brand concept.

Typography

Typography is an important part of the visual style of the future interface. Therefore, it is important to pick a font pair that will convey the mood and emotion of this site to users. We used Libre Baskerville for the headings and Muli for the body text.

Guidelines

Finally, we prepared a UI kit that is required for further programming — developers need it to understand where and what element and component must be placed. It helps the development team reduce the time necessary for figuring out the following steps.

Team Composition: UI/UX Designer, Illustrator, Project Manager

Tools: Figma, Adobe Illustrator, Jira

About the Client

Rupert Rehner entered private practice after working as a military psychologist for over 10 years. He helped hundreds of people deal with their mental problems, but he wanted to help thousands. This is how the idea of creating our own mobile app was born.

Task

Our client had a long military experience and worked with people with post-traumatic stress disorder. He had an idea to create a mind peace app for the military to help such people deal with their issues faster. 

However, after analyzing the market, we suggested developing an app that would be available for everybody as these are highly in demand now.

Development Process

Cadabra Studio built a personalized content recommendation mind peace app that helps individuals maintain emotional health and improve their time management, decision making, and goal setting. Users input their daily emotions (journaling) via chatbot conversations, respond to daily questions, and like or dislike recommended articles and famous quotes.

Design and Validation 

We had to design an engaging user experience that provided users with immediate feedback to incentivize them to respond to daily questions.  We also needed to create a chatbot that doubles as a stream of suggested content and an outlet for live conversation. 

Customer Discovery, Product Market Fit, and Validation were conducted at Rotterdam Erasmus University with additional research on behavior at the Delft University of Social Work.

Further Improvements

Learning goes both ways. As the AI system learns more from users, it makes better recommendations, which helps the user make better personal choices and experience better outcomes.

To make the system faster and classify content better, we are currently evaluating DoD technology through a Patent License Agreement and a Cooperative Research and Development Agreement with the National Security Agency Office of Technology Transfer to further enhance the capabilities of the Mind Peace App.

About the Client
Med Advice is a highly specialized analysis and consultancy services provider. The client's core competencies are the development of health policy, health analysis, and advice.
 
Task
The client needed to develop a patient health portal, which could provide an opportunity to consult experts, contribute to debates and find a variety of healthy recipes. Meanwhile, users were to have the ability to get an overall view of the many different health initiatives and opportunities. Initially, the portal development was started by another vendor. 
The client was looking for a partner to continue the development process, design, architecture, and performance of the health portal.
 
Project Team

• Project Manager;
• Business Analyst
• UI/UX Designer;
• 2 Web Developers;
• QA Engineer.

User Page

Due to the WYSIWYG editing, the user can easily correct all the data and see the result immediately. Each page can be customized and the user can choose what information to display about himself on the portal.

Reporting & Notifications

The health portal solution supports two main ways of notification and confirmation: via e-mail and text messages. In addition, the developed solution allowed generating Excel reports by the means of MS SQL Server Reporting Service (SSRS).

Tech Stack

ASP.NET Framework 3.5: C#, MVC, EF; JavaScript, jQuery; MS SQL Server 2008 R2, MS SSRS, Figma

The Outcome

• The number of regular users increased by 3.5 times;
• +56% organic visitors;
• 99% positive feedback.

Task

Our client, as a practicing pediatric dentist, noted that the main problem of dental disease in children is the inability to properly brush their teeth. He came to us with the idea to create his own application that will help children learn how to take care of their oral hygiene correctly and at the same time so that they can make an appointment through this application.

Project Team

• Project Manager;
• Business Analyst;
• UI/UX Designer;
• 2 Mobile App Developers;
• QA Engineer.

Development Process

To create an understandable children's teeth brushing simulator, our team came up with the solution of creating a mini-game where the child can choose a character that explains how to brush teeth properly. 

In addition, we have implemented such features as booking a visit to your doctor, online chat for consultations, and the ability to pay for a visit through applications.

Mini-Game

To create a game to keep the child's attention for two minutes while they brush their teeth, our designers came up with three characters that guide the child through the steps and praise him for completing the tasks correctly. And with regular use, the child can receive points, move to a new level and receive a prize from his dentist during the next visit.

Third-party Payment System 

Together with the client, we came to an agreement to integrate the Braintree service into the application.

Braintree is a PayPal-based service that provides tools and resources to develop streamlined purchasing solutions. Using the Braintree SDK, the mobile applications will be able to accept both credit cards and other payment methods (PayPal, Apple Pay, etc.).

Tech Stack

iOS: Swift 3, Fractal MVVM, UIKit, Foundation, CocoaPods, Google Maps, TRON, Alamofire, Kingfisher, JSON, Fabric, Crashlytics, OAuthSwift, Mixpanel, Charts, SwiftyBluetooth, TableKit.

Android: Java, Dagger2, Retrofit2, OkHttp3, RxJava2/RxAndroid2, Firebase Cloud Messaging, Joda-Time, ButterKnife, LoganSquare.

About the Client

The company empowers commercial real estate finance professionals to create more industry connections and close more deals by streamlining, prioritizing, and analyzing their loan activities and lender relations on one platform.

RealAtom has been on the US real estate market for more than five years. Located in Arlington, VA, it helps lenders and borrowers make fast and legal deals throughout the USA.

Project Overview

The team of RealAtom had an idea to create the nation’s first end-to-end platform for commercial real estate loans powered by algorithms to get the best user experience.

Our task was to create a design for the UX platform and landing pages for borrowers and lenders.

Challenges

There were several challenges our team faced while working on the project:

- Long search of a lender for a specific type of financing;

- Intermediaries in the form of banks and other organizations;

- Long procedure to obtain a loan from the bank;

- Long search for the borrowers who meet the criteria for lending; -

Inability to negotiate loan terms;

- Uncertainty on the borrower’s creditworthiness;

- Inability of the borrowers to determine loan conditions;

- The platform didn’t seem reliable;

 - Long login process for lenders and borrowers.

Role and Scope

The project scope outlines the goals that need to be achieved when delivering the final product or service. Our goals were to offer practical solutions to the existing problems and satisfy the audience’s needs.

Work Process

 - Before starting the design process, we did UX research, including User Personas, User Journey, Mind Map. As a result, we created two portraits of the service users — a Borrower and a Lander.

 - After discovery meetings and an asset audit, we created mood boards and then collaborated to produce a visual direction. Having determined the problems, target audience, resources, and budget, we started the project development process.

 - A Mind Map and wireframes helped us to arrange the information architecture and create perfect solutions. 

- The Design Process itself took us 6-8 months to complete. During this time, we were developing the project step-by-step, taking into account the smallest details.

Results

The main aim of this project was to solve the existing problems and to strengthen the weaknesses. Therefore, the results are the following:

- Lending without intermediaries. We made a user-friendly platform that easily connects borrowers and lenders.

- An easy choice for loan terms. As the project contained vast amounts of data (e.g., the loan conditions from lenders, terms of rent, etc.), we suggested organizing it in the form of tables. It makes it possible for both lenders and borrowers to compare their offers and conclude a transaction on the most favorable terms.

- Confidential money and document exchange. We ensured that the parties can agree on loan conditions and exchange documents without worrying about the confidentiality of information.

- Communication 24/7. The presence of internal chat makes communication between borrowers and lenders efficient, providing the 24/7 access for communication at any convenient time.

Team Composition:

- 2 UI/UX Designers

- Business Analyst

- Front End Developer

- Back End Developer

- QA Engineer

- Illustrator

- Project Manager

Tech Stack:

Word Press, PHP, MySQL, Nginx, jQuery, Live chat, Bootstrap

Task

 - ​​To help drivers to pay quickly through different banking services and be informed when the paid time slot is about to be over.

 - To check and validate car plate numbers, monitor car stats for the parking owners.

 - To help parking operators to monitor all processes happening on the parking and be able to act adequately.

Project Team

 - UI/UX designer

 - Project manager

 - 4 Developers

  - QA

Database

The database model was designed and improved during four sprints. Since this is a SaaS solution, we had to make it a multi-company. Every company has hundreds of users, which are either operators or attendants. A car is parked and validated in a particular zone, so we always know all information sliced by either zone, car, or attendant. We designed storage for tons of incoming validation requests.

Plate Recognition

We developed our plate recognition solution using the OpenCV library. We launched MVP with our implementation, and in a year, we switched to OpenALPR. As a result, the system can recognize license plates of not even the best quality, purity, or additional images.

UI/UX

It was necessary to elaborate on the UX design of our parking app, and we created the low-fidelity prototypes first, which gave us a better understanding of how it will work. 

As for UI design, it was necessary to choose a color scheme that will differ from competitors’ apps. We decided to use a purple color since a darker color makes the customer experience more comfortable, especially at night. And our design team also built a UI kit that contains all elements a Parking App is based on. 

Tech Stack

OpenCV, OpenALPR, Tesseract, Kotlin, Swift, MySQL, Google Maps, AWS, Google cloud messaging, Apple push notifications

The Outcome

 - Straightforward interface in light and dark mode

 - Brand style guide for recognizable marketing

 - Various features for smooth user experience

About the Client

Our client has been working in the field of online advertising for a long time and has developed great contacts among advertising agents around the world. His main idea was to unite all agents into one network.

 
Task

 - To develop a custom digital displays ad management solution and implement several roles, such as Screen Owner or an Advertiser. The software should be intuitive and simple to use without additional tips.

 - To provide flexible terms while charging, take into account the time of day, weekends etc., or provide flexible terms

 - To locate digital screens anywhere, users should have a convenient admin panel for managing the statistics and benefits.

 
Project Team

 - UI/UX designer

 - Project manager

 - Business analyst

 - 4 Developers

 - QA

Mind Map

Having studied the client’s project and requirements, we focused on researching smart solutions for digital advertising. This research gave us valuable ideas that we used in our project. As usual, the creation of the application began with creating the basic information architecture. Our step was a creation of a MIND map.

 
Development Solution

We created the system following Cost-Per-Vew method of charging for advertisements based on the number of views or interactions an ad receives, so the Advertisers pay only for the real views and are informed about statistics and transactions in the personal profile and by email. 

 
Tech Stack

 - Kotlin for Android

 - Swift for IOS

 - Google Cloud Messaging for Android

 - Apple Push Notification Service for IOS

 - Nginx

 - MongoDB or SQL

 - Google Maps

 - Amazon Cloud Front

Insurance Company Website Design & Development

About the Client

Shield Insurance is an insurance company specializes in different policies, but their main focus is home insurance.

Without an easy-to-use website, you are leaving money (and customers) on the table. That’s why Shield Insurance company turned to us when they realized that they would like to expand their business and want their insurance company to grow faster.

Task

Our client, an insurance agency, needed a modern, responsive website that included customer-friendly features. In addition to an updated site, the company wanted to keep and improve upon its old site’s user resources. They also required insurance content development for their various personal and commercial insurance lines.

Project Team

 - UI/UX designer

 - Project manager

 - Business analyst

 - 3 Developers

 - Copywriter

Responsive Website Design

Our client expected a frustration-free, easy-to-use website, so we ensured the development of responsive design, coupled with a focus on functionality. It made the insurance website accessible anywhere. We’ve optimized the website to enhance user-friendliness across all devices, empowering our client’s insurance business to satisfy current and potential customers.

Brand Character Creation

In order to hook the visitors of our client's site even more, we proposed to develop a branded character that would accompany the user on each page and suggest the next steps. The character attained the desired marketing goals of increased brand awareness, emotional connection with the target audience, elevated brand value, recall factor, brand affinity, easy recognition of the brand and its offerings and the loyalty from the consumers.

Tech Stack

.NET Framework 4.0, ASP.NET MVC 3, Web Forms View Engine, IIS 7.0, SQL Server 2008, Figma, jQuery, ELMAH.

The Outcome

 - Aesthetics and functionality intuitive design

 - Easy-to-use content management system

 - Visit time to the site increased by three times

 - Increased conversion rate by 233.95%