iOS app provides innovative digital health solutions at cost price

Highlighted screen

About this project

After a new round of investment, Jinga Life needed to improve their existing product and business model that aligned with the new business goals they had set. Imaginary Cloud’s goal was to bring the app’s concept to life on iOS.

Result: A new interface that assured clarity, regardless of age or medical situation, sticking the user journey to the very essential.

our INVOLVEMENT

Design

Build

technologies

Swift

Node.js

Ruby on Rails

Jinga Life is changing the way we care for people through technology

Jinga Life is a digital, personalised, family health platform, changing the way we care for people on the planet by using simple technology to help them care for themselves and their loved ones.

Jinga Life's vision is to shift the axis of Healthcare from the Hospital to Home by empowering the "Jinga"​ (the Female, and true custodian & curator of the Family’s health and well-being) to coordinate and care for all her loved ones from the comfort of her home.

Based in Dublin, Ireland, the platform is tailored to the specific patient, designed to be user friendly and intuitive for everyone, and available without the need to install specific software.

This platform will provide the Jinga with help and support and information for every stage of life from early childhood (immunizations, dental records) through the teenage years (sexual health, mental health, orthodontics), monitoring chronic diseases, reacting to acute conditions or accidents, right up to smart ageing, assisted living (connectivity, monitoring, communication) and dignified dying (treatment, location, planning, wishes).

Jinga Life project screen
Sample screens
Imaginary Cloud’s role and involvement with Jinga Life

We were approached by the CEO to help moving the project further, after a new round of investment. The plan was to revisit the existing product and business model and develop a set digital products aligned with the new business goals.

One of these products was an application to help family members to manage the health records of their family, and easily share that information with doctors while still keeping information private.

Imaginary Cloud impact examples

during the project

The branding work was laid out before us and we used our proprietary Product Design Process to bring the app’s concept to life. The interface is intuitive and features are built with no room for any doubt regarding what they concern. It consisted of 4 stages:

four stages

Research
Ideation
Execution
Technical Assessment

two stages

Migration
Development

four stages

Requirements
Back-end integration
Website development
Advanced filtering and search

four stages

Research
Ideation
Execution

during the project

The branding work was laid out before us and we used our proprietary Product Design Process to bring the app’s concept to life. The interface is intuitive and features are built with no room for any doubt regarding what they concern. It consisted of 4 stages:

research
1. Briefing
2. Benchmark
3. User Research

We identify the main aspects of the business model and user needs.
First, we gather evidence that will support the decisions taken henceforth, ensuring that no decision is made based on vague assumptions.

This stage consists of 3 steps: a briefing with the project's vision and goals and business requirements; user research to guarantee product usefulness and effectiveness from the user's perspective; and a design benchmark to analyze the landscape of similar and complementary products, design patterns and technologies used in the industry.


The Research stage allows us to leverage the knowledge and skills of existing players and ensure features and design differentiation in the market, and ensure costumer fit.

ideation
1. User journey
2. Decision Matrix
3. Wireframes
4. Moodboard

We formulate an approach to the product based on the user's needs and the business model.
This is the core of the creative process and it is where the concept of the product is formulated based on the user's needs and the business model (both identified in the Research phase). Here, the UX designer, the product designer, and the product owner work closely together.

This stage consists of 4 steps: mapping out the user journey, by describing each user's action, with various user scenarios; a decision matrix that helps prioritize the users' and product's goals while considering the product life cycle's current stage; drawing the wireframes, i.e., the pages’ structure and navigation flow to ensure interface usability and reduce design time; and finally, a mood board to ensure that the product's look and feel conveys the desired user experience and is aligned with the user profile and market strategy.

Execution
1.Style guide
2. Graphic user interface
3. prototype

We bring the concept to life and put it into practice.
In this stage, the product designer focuses on creating a physical representation of the concept that has been defined up to this point.

It consists of 3 steps: a style guide, where we define a graphic interface’s style, considering colour palette, fonts, image style, input fields, buttons, and so on, to ensure consistency throughout the application; a graphic user interface design (GUI) which are the end-looking screens by applying the style guide to the wireframes; and a click-through prototype to facilitate the feedback from stakeholders or potential users and investors.

TECHNICAL ASSESSMENT
1. HIGH-LEVEL ARCHITEcTURE
2. PROJECT PLAN

We guarantee that all requirements and ideas generated are realistic to implement.
In this stage, all the work previously done should be achievable considering the available time and budget previously settled.

It consists of 2 steps: a high-level architecture where we detail how the product will be built, identifying baselines for the needed technologies and skills to make it; and a project plan to define the major milestones and provides a general understanding of the project's structure, phases, intersections and interdependencies.

migration

Imaginary Cloud started by migrating the existing database from Wordpress to PostgreSQL. A daunting task because of the thousands of items and large size of assets that are normal in a CG marketplace.

After the migration was completed, the team focused on migrating its infrastructure. The site was hosted on Heroku, which had relevant constraints on the ability to scale. Imaginary Cloud was able to migrate it to AWS, completing the first stage in just 2 months.

Continuous Development

After the successful delivery of Stage 1, the client continued to work with Imaginary Cloud on a continuous development basis, adding more features to its product to fuel its growth. The team worked on many different elements, from payment integrations to sales campaign tools to facilitate marketplace promotional campaigns. Imaginary Cloud also helped Flipped Normals improve its Google positioning by implementing an SEO audit, which tweaked the site’s performance and content relevancy.

requirements

The project started off with a team meeting to list all the client requirements. This thorough investigation allows for an easier, quicker, and more cost-efficient delivery. This meeting was led by our Project Manager, which supports the team all through the project, and our Developer, ensuring all technical details are discussed.

Eurofound provided a solid brief that captured the existing infrastructure, their vision for the website, and the technical constraints and requirements. It was a challenging task that needed to be completed in 6 weeks.

back-end integration

Our developer started the development process by creating the back-end integration that would allow the new website to fetch content from the existing database. Using a Django framework, we were able to create an efficient and quick application that retrieved data, generated listings of results and allowed for more advanced options.

Imaginary Cloud and Eurofound met on a weekly basis to ensure everything was being developed as required by the client.

website development

With the main software completed, the next stage was to develop the website to access such tool. For this, our developer followed Eurofound’s style guide to ensure coherence across the client’s digital presence.

Although no designer was allocated to this project, our developer followed UX/UI best practices, since he was able to touch base with several of the designers at Imaginary Cloud.

advanced filtering and search

In order to improve the content navigation, Eurofound wanted to include an advanced filtering and search capability in their database. Having fully mapped the database content in the new software, our developer was able to create a set of category filters that allowed users to select the content of a given topic, and implemented a search element to the page, allowing the user to freely search any document.

research
1. Briefing
2. Benchmark
3. data Research

Our UX designers will target the users profiles and identify their needs when using your product, considering its usefulness and effectiveness from their point of view. Research on design patterns and the industry's most used technologies allows leveraging and understand existing players' knowledge and practice. Plus, it ensures your product/design is specific and different.

ideation
1. Ux assessment
2. executive presentation

We will conduct a UX review to set the product requirements considering the established usability heuristics in the field to deliver a consistent and fluid user experience. All information regarding insights and analytics will be summarised in a visual and compelling audit report that showcases the UX Audit's main findings, quick wins, and recommendations regarding your product's potential improvements.

Execution
1.Style guide
2. Graphic user interface

Together, we will baseline the style guide to ensure that your product's different visual interface elements' are consistent and coherent. Running a UX Audit allows us to solve the main encountered problems with the execution of end-looking screens. Plus, all recommendations that resulted from quick wins acknowledgement will be designed for implementation.

TECHNOLOGIES used

Swift
Swift
Node.js
Node.js
Ruby on Rails
Ruby on Rails

To develop the iOS application in order to launch fast, while still using a solid framework.

To write a set of microservices.

To write a set of microservices.

Working Model screen
Working Model and Team

We followed our Specialized Squad model, which provides a complete set of resources to deliver an end-to-end solution.

UX/UI Designers: Responsible for the design, architecture and implementation of all the experiences a user has when interacting with the Jinga Life app.

Front-end Developers: Responsible for ensuring that the app’s users can easily interact with it. They do this through the combination of design, technology and programming the app’s appearance, as well as taking care of debugging.

Project Manager: Define project requirements and outline the scope of the future app. After that, they provide a high-level project plan, and give the client rough time estimates.

key results

This project delivered an in-depth understanding of the customer persona and their interaction with the service.

UI

assured a clear and seamless user journey.

10x

easier to understand and use key features.

Clutch logo

5.0

5/5 stars rating
Jinga Life logo
Quoting
Dropdown caret icon