sourcebits 8 step design process: creating a mobile app for ing vysya

18

Upload: sourcebits

Post on 23-Aug-2014

1.098 views

Category:

Mobile


0 download

DESCRIPTION

Our tried and tested mobile app design process is a huge part of our success. Here’s our 8 step design process to create successful mobile apps with a case study featuring our client ING Vysya, the 7th largest private sector bank in India.

TRANSCRIPT

Page 1: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya
Page 2: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

Our tried-and-tested design process is a huge part of our success. How do we consistently produce such amazing results?

!Let’s run through the process for a Sourcebits client.

!ING Vysya is one of the largest financial institutions in India. This is how we designed

their innovative new mobile banking app for iOS and Android.

Introduction

Page 3: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

!We start with a product meeting - part brainstorm, part innovation, part refinement, part strategy - between the client and Sourcebits team. We bring designers, developers, sales, and marketing to foster a collaborative environment and get different ideas and perspectives flowing. Find out more about our innovation workshops.

1. Concept Ideation

Page 4: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

In these innovation discovery sessions, we poke and pull at concepts, break down assumptions and discuss possible features and experiences. Our goal: find the BIG idea of the app.

1. Concept Ideation

Page 5: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

Sourcebits now tackles two issues: the user and the marketplace. Using mind maps, use cases, and mood boards, we aim to fully understand the motivations that drive our intended user demographic so we can build an app that appeals to them.

2. User and Market Research

Page 6: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

We also gain a deep understanding of the current state of the market to figure out where the new product will fit, disrupt and compete. We study our potential competitors so we can stay ahead of what they’re doing.

2. User and Market Research

Page 7: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

This in-depth research also helps solidify the branding of the app.

2. User and Market Research

Page 8: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

Now we design the app’s functionality. We consider the main features of the app and understand the relationships between them to create a user experience map.

3. Wireframes

1.

2.

Page 9: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

The Sourcebits design team then draws the layout of every screen and figures out the placement of each element, leaving nothing to chance. Doing this establishes the cohesive flow of the app.

3. Wireframes

Page 10: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

4. Prototype

Much like Mark Zuckerberg’s quote “Move fast and break things,” we believe in “failing early.” This means we like to do a quick-and-dirty prototype early in the process - then test it on a small group of users.

Page 11: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

A prototype actually saves time in the long run by helping us figure out if the particular concept we want to do is effective, or if we should pursue a different avenue.

4. Prototype1. 2.

Page 12: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

Next, we move into the visual design phase of the process. Our team adds the aesthetic elements to the screens and matches the visuals to the branding we’ve established to put the final polish on an app.

5. Visual Design

Page 13: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

6. Development

Development of an app happens in tandem with design. At Sourcebits we ensure the engineering of the app (outlined in a detailed specification document) matches the quality of our pixel-perfect design.

Page 14: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

When the prototype is ready, users test the application, bring their experiences back to us, and we evaluate their feedback. We also make sure all the stakeholder’s opinions and goals for the app are valued and taken into account.

7. Testing

Page 15: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

Once we have a solid idea of what needs to be done, we make the changes and then test the application more intensively.

7. Testing

Page 16: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

8. Iterate and Refine

We continue to iterate and refine the product design until the user feedback is positive, the client is happy with the results, and our team feels the app lives up to our high design and development standards.

Page 17: Sourcebits 8 Step Design Process: Creating a Mobile App for ING Vysya

“There has been a lot of focus on making the app secure, and keeping the

design and interface intuitive.”

Results

“Everything is tightly integrated and

updated…it’s very interactive and visually

delightful.” !!

- Intellect Digest

“The mobile app offers quite a few additional features which make it stand apart from other mobile banking apps.”

WP Central !- Digit