Mogo mobile site

Mogo, an innovative and fast-growing financial services company, approached our team to create a seamless, logical and aesthetically pleasing mobile rendering (e.g. mobile site) of its desktop website to retain new customers and build loyalty amongst existing customers.

Mogo’s CEO seeks to make the company a ‘mobile-first’ organization with the core functions on Mogo.ca to be performed on mobile devices: Mogo's team views out team as instrumental and pivotal partners in making this transition.

As we continue our partnership with Mogo, our next step is to develop a series of branded native mobile applications for the financial services company.

BRIEF PRODUCT DESCRIPTION

Mogo has evolved very successfully as a financial services company and a real solution for customers looking for a way to be financially responsible and keep control of their spending. Mogo does this by providing pre-paid Visa credit cards and short-term loans.

Our team was responsible for developing a mobile version of Mogo's

Customer portal

and

Marketing portal

Customer portal

For the customer portal, we ensured that customers could easily and seamlessly

Apply for a pre-paid
Visa card

Manage their
funds

Add funds to
their account

Apply for
a loan

Get notifications
by SMS

And much
more

Marketing portal

We developed a mobile-friendly version of Mogo’s marketing portal, including its beautiful gallery of artist-designed pre-paid Visa cards, which we updated on a regular basis.

Challenge

Statistics showed that a significant percentage of Mogo's customers were using mobile devices to carry out key financial transactions but the desktop version of the site was difficult to use and the development of an effective mobile site required a strong understanding of the user's mobile experience

In creating Mogo’s mobile site, the key challenges included:

This involved making Mogo.ca suitable for mobile experiences, where small screen sizes limit the type of
complex actions and transactions that can be done.

Solution

For Mogo's Customer Portal and Marketing section, we needed to develop a website that was capable of adaptive rendering a.k.a. viewable on various mobile browsers and multiple devices in a logical, aesthetically pleasing and appropriately sized way. Ultimately, we developed a high performance 75+ page mobile site that allows customers to:

Be compliant with all
legal and financial
regulations

Add funds
to their
account

Add funds
to their account

Get notifications by
SMS when their
balance is
running
low

Get notifications by SMS
when their balance is
running low

Manage their
funds

Apply for
a loan

Seamlessly apply
for a pre-paid
Visa card

Seamlessly apply for a
pre-paid Visa card

Choose among the
forty beautifully
designed Visa
cards

. . . and
      much
      more

. . . and much more

DEVELOPMENT PROCESS

1. Analysis

Our lead Developer and Analyst started by analyzing
Mogo’s desktop site's technological framework, server
software and other key features.

2. Workflow
Development

With input from Mogo’s development team, we developed
a workflow and business logic schema for the mobile
version of the client's Customer Portal and Marketing
Portal.

3. Interactive
Prototype

Our team, in collaboration with a usability expert,
identified and outlined all interfaces, a.k.a. screens, that
needed to be developed. The final product was an
interactive prototype of the mobile site.

4. Front-End Design

Upon approval of the interactive prototype, our Developer
and Designer, in tandem with creative and usability
experts, produced a front-end design for key pages of the
mobile site. We made recommendations on how to best
structure the site visually, use icons, drop-down menus,
slidersand other aspects to make the mobile experience
as intuitive, intelligently designed and aesthetically
pleasing as possible. For the design we adhered to Mogo's
detailed design guidelines.

5. Technical Front-End
Design

Once the front-end design was completed, we started
developing interface layouts using CSS3, HTML5 and
JavaScript.

6. Integration

Our Lead Analyst and development team prepared and
integrated the web client's system with the mobile version.

7. Quality Assurance
(QA) and Testing

Quality Assurance (QA) and Testing – Working very closely
with Mogo's cteam, we performed a rigorous and
methodological QA testing phase on Android, iPhone, iPad
and Windows devices and six different browsers (e.g.
Chrome, Opera, Firefox and Dolphin), testing over 75
pages and functions on the site.

8. Deployment

Once the site passed all QA tests and procedures, we
deployed the mobile site.

9. Ongoing Support

We continue to work very closely we Mogo’s design,
marketing, development and QA team to update key
pages of the marketing and customer portal, develop new
functions and perform QA to test new features.

DEVELOPMENT PROCESS

1. Analysis

Our lead Developer and Analyst started by analyzing Mogo’s desktop site's technological framework, server software and other key features.

2. Workflow Development

With input from Mogo’s development team, we developed a workflow and business logic schema for the mobile version of the client's Customer Portal and Marketing Portal.

3. Interactive Prototype

Our team, in collaboration with a usability expert, identified and outlined all interfaces, a.k.a. screens, that needed to be developed. The final product was an interactive prototype of the mobile site.

4. Front-End Design

Upon approval of the interactive prototype, our Developer and Designer, in tandem with creative and usability experts, produced a front-end design for key pages of the mobile site. We made recommendations on how to best structure the site visually, use icons, drop-down menus, slidersand other aspects to make the mobile experience as intuitive, intelligently designed and aesthetically pleasing as possible. For the design we adhered to Mogo's detailed design guidelines.

5. Technical Front-End Design

Once the front-end design was completed, we started developing interface layouts using CSS3, HTML5 and JavaScript.

6. Integration

Our Lead Analyst and development team prepared and integrated the web client's system with the mobile version.

7. Quality Assurance (QA) and Testing

Quality Assurance (QA) and Testing – Working very closely with Mogo's cteam, we performed a rigorous and methodological QA testing phase on Android, iPhone, iPad and Windows devices and six different browsers (e.g. Chrome, Opera, Firefox and Dolphin), testing over 75 pages and functions on the site.

8. Deployment

Once the site passed all QA tests and procedures, we deployed the mobile site.

9. Ongoing Support

We continue to work very closely we Mogo’s design, marketing, development and QA team to update key pages of the marketing and customer portal, develop new functions and perform QA to test new features.

FURTHER DEVELOPMENT

We provided recommendations on how to structure the mobile site's main menu where users can see all options available to them in a way that suits the mobile experience and does not overwhelm the user.

RESPONSIBILITIES

of involved develoment teams

INFININIUM DEVELOPMENT TEAM

One

Project manager

One

Analyst

One

UI Professional

One

Designer

One

Lead Developer

One

QA professional

Two

Developers

RESULTS ACHIEVED

1
2
3
4

Since the mobile site launched in
December 2013, visits to Mogo
web properties increased by

92.08%
and

The volume of traffic from
phone devices increased by

111.54%

Of the total  804,441
page views on Mogo web
properties since the launch

15.56%

occurred on the mobile site

On average, the mobile website
generated a

37%
and
10%

lower exit rate than
the non-mobile site.

In total, 328 loan applications
were submitted since the launch of
the mobile site, totalling over

$157,150

in requested funds.

Statistics provided by Mogo Finance
Technology Inc. (2014)

CLIENT REFERENCE

Eric Miles

CTO, Mogo Finance
Technology

CTO, Mogo Finance Technology

Mogo Finance Technology is an online financial services company requiring a
mobile website to satisfy the viral mobile access world. We partnered with
Infinium Systems for this mobile website development process. Results have
been tremendous. Deliveries of function are always on schedule, high quality
and economical. Mogo plans a continuous expansion of this partnership to
fulfill our mobile strategy.

"

Mogo Finance Technology is an online financial services company requiring a mobile website to satisfy the viral mobile access world. We partnered with Infinium Systems for this mobile website development process. Results have been tremendous. Deliveries of function are always on schedule, high quality and economical. Mogo plans a continuous expansion of this partnership to fulfill our mobile strategy.

PROJECT FACTS

Type: Mobile Site

Industry: Financial Services

Methodology: Agile

Team Size: 7 then 2-4 individuals over the next few months

Duration: Three months until the launch of the initial mobile site and two updates thereafter

Current Status: Development, support and QA.

Technologies: HTML5, CSS3, Javascript

screenshots