BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product...

25
BUILDING FIT@HOME FLUTTER APP FOR STARTUP

Transcript of BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product...

Page 1: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

BUILDING FIT@HOMEFLUTTER APP FOR STARTUP

Page 2: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

TABLE OF CONTENTS

Intro

Business needs and goals

Quality Assurance

Technologies

Challanges and solutions

Team

Outcome

Timeline

Product workshop

Testimonials

Prototyping

Design

Iteo’s sports experience

Contact

Development

Page 3: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

INTRO

We o!en work with startups that come to us with an idea or precise vision but without brief and specification.

At Iteo we specialise in comprehensive building digital products in

collaboration with the client. We start with consulting a business model,

technology stack and type of monetisation. In overlapping agile iterations we

create clickable prototype, product branding and UI design. Then it’s time for

our core service, so!ware development with quality assurance, and publishing

the final product to stores. A!er launching the product we offer maintenance

and further development works.

That was the case with Fit@Home. Our client wanted to develop a fitness

mobile application - and they wanted it fast. That’s exactly what we did. We’ve

started with our original method of working which is Product Workshops. This

way we could find out what are the goals and expectations, as well as what

needs to be done.

Page 4: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

During Product Workshops we determined the exact project assumptions,

target groups and concrete functionalities to be included in the app.

The main goal was to develop a modern app for buying workout plans.

What would distinguish Fit@Home from other fitness mobile applications is

advancement levels. That would allow users to pick the adequate training to

their condition and requirements. Also, the client wanted to upload seasonal

workouts like skiing preparations or getting ready for the beach.

BUSINESS NEEDS

AND GOALS

Target group was defined as adult women and men (+35 years old) who don’t

workout regularly and they don’t go to the gym - usually because they don’t

have time. Also, the product could be useful for older people who want

to stay fit.

Page 5: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

Good preparation before the beginning of the project was particularly crucial,

because the iteo team knew exactly what they needed to do. They also

suggested specific ways to develop certain functionalities but at the same time,

they were open for counseling from iteo regarding changes and updates.

The main functionality the app could offer

and provide would be a training suited to

personal preferences of the user.

Basic functionalities to provide included:

Basic functionalities to provide included:

Registration and logging in processes

Main screen

User account

Overview of workout plans and single exercises

Managing user’s workout plans

Trainer info

FAQ and tips

Uploading photos

Real-time workout with time-counter

Workout reviews

Subscription

The project also assumed adding notifications, language change,

unit change (metric / imperial) and more.

Page 6: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

TECHNOLOGIES

Because the client wanted to shorten

the development time, we

recommended Flutter as the

framework to build a hybrid mobile

application for both Android and iOS.

Flutter is a technology that is rapidly growing. It offers great tools

for development of robust, scalable products. All new UX and UI

standards are regularly implemented.

Creating impressive animated graphic interfaces is one of the main

benefits of using Flutter. What’s most important is that building an

app with a hybrid framework would make the process much faster

than using native solutions.

Page 7: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

2 developers - Flutter

1 QA specialist

1 project manager - depending on the actual project requirements

TEAMThe teams cooperated from the beginning towards the common

goal of development and growth of the app. The team consited of:

1 UI designer

1 UX designer

Product Owner - We were collaborating mainly with the CEO of Fit@Home who also acted as Product Owner

Page 8: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

Kick off

UX Workshops

Fixes

Design

+ Development

App Release

The app was supposed to be

released as soon as possible. We had a couple of months to finish

the product.

We organized Product Workshops

with the client

We also did some quick fixes and

updates

MAY

2019

JULY

2019

OCTOBER

2019

JANUARY

2020

TIMELINE

Page 9: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

During our original method of work that we call Product Workshops, we

usually perform concept evaluation. This way we can determine if product

requirements are understandable and if the project is feasible. With

Fit@Home we needed to determine personas and value proposition as the

client came to us with an idea for a product, but no other data.

PRODUCT WORKSHOP

We’ve started with pinning down basic business requirements. Then we could

start designing customer journeys within the app. We did that using well-

performing tools such as empathy maps and user flows. What matters during

this stage is product understanding - how will the users act with our final

product, what business value does it bring to them and what problem solving

solutions it can offer? Answering these questions would help us to optimize the

product so we could reach cost effectiveness and high customer satisfaction.

We also did a scoping session to break down the idea into small parts and find

out a solution on how to design each of them. We needed to find out what

should be the design spirit of the app, so we could give it a certain tone tailored

to target customers.

Proof of concept in a form of minimal viable product and minimum lovable

product was done at the stage of prototyping which is described below.

Page 10: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

PROTOTYPING

Because the client didn’t have any documentation or product structure in

mind, we needed to create the proof of concept - for quick validation of

the idea. During Product Workshops we mapped out the foundation for

wireframing and then building the MVP (minimal viable product).

Using Sketch and Invision, with lean UX and interaction design principles in mind,

we’ve created the minimum lovable product, which is similar to MVP but has

more functionalities desired by the potential customer. The whole development

handover could be done so fast because we prepared everything beforehand

and tested all possibilities with open mind.

When designing UX, we needed to provide useful information for the user at the

exact time they are requested. That required to go through all user paths and

build them in a clear, intuitive way. Each step tells the user what kind of

exercises can be expected, how long the workout will take and what will be the

result. Each training day can be personalized and with photo uploading function

the user can compare their before and a!er. Also, what distinguishes the app

from other similar products is workout review which automatically plans next

steps in the routine depending on the user’s progress.

The app’s whole content is based on photos and videos of exercises. The

interface displays them without distractions. We’ve added some sport-inspired

illustrations with dynamic objects to create the atmosphere of energy and

motivation. Also, to achieve that the app introduces transparencies, shadows

and gradients.

Page 11: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

The workout apps competition is fierce. Not only the big brands are racing to

create the best sports so"ware, but also a lot of athlete celebrities do. This

was one of many challenges we needed to face while preparing the design of

the Fit@Home app. We needed to create something simple and friendly to

use, yet with that unique style that would make it stand out among the

competitors.

We decided to base the entire UI layout on contrasts, to emphasize the workout

progress when users are surpassing themselves. The bright colors and white

typography were deliberately placed on dark backgrounds. We used elevation

to point out all the clickable elements. To give the app a so!er side, all

components were rounded, along with custom-designed icons and hand-

cra!ed illustrations.

The last-mentioned played a great role in the layout. They were inspired by the

app’s theme: exercises and sport. They portray the objects that would either be

useless, if we used the application (that clearly states to exercise at home) such

as skis and bathing suits or were simply surrounding us, like the home furniture.

We gave them a more dynamic and energetic look - something that resonated

with exercises that usually were done outdoors. The illustration complements

the UI design system in coloring, shadows and transparency.

Our client equipped us with professional photographs which were styled to

match the app’s look and were broadly used. We were also responsible for the

creation of the new Fit@Home logo along with social media materials.

DESIGN

Page 12: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

DEVELOPMENT

We used an open-source technology called Flutter. It’s the perfect framework for cross-platform app development and in this case (with time pressure and cost optimization) using a tool to develop a product for both Android and iOS was a must.

Why did we choose Flutter instead of, for example, React Native?

The development time with this rather new technology is much

faster, documentation is condensed and precise and it has great

native performance. Flutter is dynamically evolving but it offers

components and libraries that can be used in almost every project,

especially robust hybrid applications.

Performance is another factor we kept in mind while choosing

Flutter. It can achieve great FPS ratings because of solutions

implemented into it. And when it comes to UI design, using

compatible components makes the interface feel like native

solution and doesn’t give any signs of significant issues.

Page 13: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

During the application development, a series of different tests were

concluded. Our development team began with unit tests. These types of

tests are led at the very beginning of the development cycle. They are

determining if every individual unit of source code, sets of one or more

program modules with associated control data, usage and operating

procedures are fit for use.

The next phase began when our testers team started functional testing and

end-to-end testing. Functional tests are focusing on system functional

requirements and specifications to make sure that they are properly satisfied

by the application. The end-to-end technique is used to test whether the flow

of an application right from start to finish is behaving as expected and to

ensure that data integrity is maintained between various system components.

Because of the above mentioned time pressure, there was no time to

implement test automation since writing scripts is very time-consuming at the

beginning. It is beneficial to implement them in long-lasting projects.

At the end of the development cycle, we have done integration tests to make

sure that payment subscription systems in both Play Store and Apple Store are

working as intended.

All bugs and problems were reported, every app feature had to be tested and

confirmed by our tester before it was released.

QUALITY ASSURANCE

Page 14: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

CHALLENGES AND SOLUTIONS

Our work

A!er Product Workshops, we’ve created clickable prototypes of

main functionalities that helped us to verify the idea and our

workflow. The biggest challenge was the time frame - we needed

to act really fast. Fortunately, we managed that using Flutter and

organizing our work very precisely.

Page 15: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

TIME PRESSUREChallenges and soluitions

As mentioned above, we didn’t have too much time to develop this product so

we needed to pick several organizational tools and methods to make our work

as effective as possible. Agile was the obvious choice as we already knew how

to implement it into IT projects. The teams were working simultaneously on

both Android and iOS parts to shorten the development time.

Effective project management is crucial in projects like this. Many iterations,

ad hoc solutions to changing requirements and circumstances and awareness

of rapidly changing conditions helped us with time pressure without losing

quality of the final result.

Page 16: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

SUBSCRIPTIONS

Challenges and solutions

Working with subscriptions is always challenging in terms of keeping customers engaged and transforming them to buyers.

From the very beginning Fit@Home wasn’t supposed to be

a free-to-use product, as it is targeted to premium users that seek

personalised and seasonal workout plans. The only free exercise

sets its users could access would be during a 7-day free trial. A!er

that, each user would have to pick a subscription plan. Seamless

user experience is crucial in order to get as many subscriptions as

possible.

Since Flutter’s library from Google responsible for the subscription

module was still in beta, we needed to use our extensive knowledge

from Swi! and Kotlin frameworks to create a solution that is hybrid

but really feels like native. That resulted in creating different

subscription solutions for Android and iOS.

Page 17: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

LACK OF BACKEND

Challenges and solutions

One of the main challenges we had in this project was the lack of backend.

Developing a proper backend would take much more time and budget,

so we had to find a solution to store the app’s data without a standard

backend solution.

We used Cloud Firestore from Firebase to create a backend-like part of

the app. The only drawback is that adding any changes to the app requires

contribution of a developer.

Page 18: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

OUTCOME

In a very short given time we developed a modern hybrid

application for Android and iOS that helps its users to be fit at

home. Two language versions (Polish and English) helps our client to

reach customers around the world.

This app not only provides ready-to-use workout plans but it also

tracks progress, showcases statistics, analyzes the user's condition

and automatically modifies workout plans to get best results.

Fit@Home is an exercise hub for everyone who wants to work on

their body without going to the gym.

It’s a great alternative to fitness club memberships and expensive

personal trainer appointments.

The app was released just before the coronavirus outbreak. It is

definitely a product that answers the rapidly growing trend for

workout mobile applications that help their users stay fit at their

homes. The number of individual subscriptions rises every day while

the quarantine is ongoing. Also, big gyms and fitness clubs buy

thousands of plans so they can offer them to their clients as an

alternative to the ordinary memberships.

The app was listed among TOP10 fitness apps in Poland.

Page 19: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

Andrzej Hołub

CEO & Owner Fit@home

TESTIMONIALS

My business goal while creating Fit@Home was creating premium fitness experience for iOS and Android platforms with focus on speed-to-market and cost effectiveness. A#er 3 months of cooperation, I can tell that iteo is a reliable partner taking full ownership of the so#ware project.

Suggested technology set, including the Flutter framework, allowed us to meet demanding deadline and fit into the budget, despite quite a lot of change requests.

The iteo team was very responsive and flexible. A huge plus for product workshops, which allowed us to define the scope of the project and change features I wanted to ones I and my customers really need.

I can recommend iteo as a reliable business partner with extensive

consultant expertise for creating custom mobile applications. Our

collaboration resulted in a great looking application and I received

very positive feedback from my users.

Page 20: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

“Awesome!!! Great app for people who don’t have time to hit the gym. I have no excuses now

!

“My wife recommended this app and it is fantastic indeed. Diverse levels of exercises, easy-to-use interface, professional workout at home.”

TESTIMONIALS FROM

APP STORE

Page 21: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

“As a triathlete, I need not only swim, bike and run… For a long time I was looking for a solution to strengthen my body (core stability, especially).

Fit@Home gives me a plan which does not

overload my time too much, but I can make

additional workouts and improve what I need

in order to become better at my hobby.”

TESTIMONIALS FROM

GOOGLE PLAY

Page 22: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

DOWNLOADAND CHECK!

Fit@Home App is available in

Google Play and App Store

Page 23: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

At iteo we love mobile apps - this is what we create every day at work.

But a!er hours we are passionate about sports. We play squash together and

organize skiing trips every winter. There’s nothing unusual in seeing our co-

workers going to kickboxing class or playing football as a team. We run, swim,

ride bikes and do yoga. It’s so awesome we are able to connect two big parts of

our lives - so!ware and sports - while working on new projects with our clients.

Here are the apps we developed for the sport industry as well:

Multisport

Native mobile app for all Multisport members who use benefit cards on a daily

basis. It includes advanced objects searching (gyms, swimming pools, saunas,

etc.), QR code generator so the user doesn’t have to carry their physical card,

important news module and integration with Facebook and Google apps.

Connected to the client’s complex backend. The scope of work included

Product Workshops, prototyping, UX and UI design, iOS application

development, Android application development, Quality Assurance with

automated and manual tests and #PI design.

ITEO’S EXTENSIVE EXPERTISE

IN SPORTS INDUSTRY

Page 24: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

Ludmo

Cluball

A professional mobile app for individual footballers (soccer players) and teams

that want to track their progress while practicing. It displays the number of

trainings, distance, heart rate, intensity, speed and much more. Analytical tools

showcase all the needed data for coaches to know what is going well and what

needs to be improved. They can examine players’ movements based on

accurate representation of statistics for each individual - and also they can

compare them. GPS sensor and accelerometer units help to collect the info.

Our team was involved in iOS and Android app design, development and testing.

SaaS solution created to ease sport club management. Cluball is an all-in-one

mobile solution to make bookings, communicate with fellow members and join

club activities. For this Belgium based startup, we brought to life the idea of

creating an elegant, simple, and mobilized tool, both for club owners to interact

with their members and for members to interact with each other. We created

a native Android and iOS solution integrated with the client’s !PI.

Nabufit

A Dannish inspiration to a healthier lifestyle - this app is giving the user an access

to a wide range of workout videos and nutrition plans. Native iOS and Android

solution that supports wellbeing, offers exercises to do at home and enhances

workout by providing expert advice from highly skilled personal trainers and

sports stars like Neymar Jr, Peter Schmeichel, Michael Maze and more.

Page 25: BUILDING FIT@HOME FLUTTER APP FOR STARTUPDuring our original method of work that we call Product Workshops, we usually perform concept evaluation. This way we can determine if product

WORK WITH US!

We are a reliable business partner that uses innovative technologies and solutions to create robust IT products.

We create websites and mobile apps that improve

daily lives of thousands of people. Our clients include

enterprises and startups that want to digitalize their

processes while delivering positive experience to their

customers.

Together we can create something extraordinary!

Don’t hesitate to contact us and let us know what you

have in mind. We can work together to achieve your

business goals right now.