The 8 Steps to Sourcebits Design: Creating a New Mobile App for ING Vysya

Mobile bank app for ING Vysya case study and the 8 steps to Sourcebits design.


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

Here at Sourcebits, we’ve worked on 550+ mobile, web, and cloud solutions. We’re renowned for our design-led engineering, and our app designs have been called “achingly beautiful.” More than 30 of our apps have hit the top 10 in their categories, and Apple has featured our apps more than a dozen times. So how do we consistently deliver great products?

In the past 8+ years we’ve developed a tried-and-tested process for mobile product ideation, design, and development that we use with our clients. During a recent presentation for a tech event, I outlined the 8 steps we take at Sourcebits to design a successful mobile app. From ideation to fully finished product, this slideshow, offers a quick, clear view of how we work and what our clients can expect.

It also provides a design case study featuring our client ING Vysya’s mobile banking app (check out their app info here), which has recently generated praise in various publications. ING Vysya, the 7th largest private sector bank in India, has 547 branches and 2+ million customers. ING Vysya has been ranked the “Safest Banker” by the New Indian Express and among the “Top 5 Most Trusted Private Sector Banks” by the Economic Times.

1. Concept Ideation

We always start with a product workshop – part brainstorm, part innovation, part refinement, part strategy – between the client and team. We foster a collaborative environment so different ideas and perspectives can flow freely amongst everyone. In these innovation discovery sessions, we poke and pull at concepts, break down assumptions and discuss possible features and experiences to find the BIG idea of the app.

After meeting with ING Vysya in our Bangalore office, we identified our goal to meet their business needs: redesign their mobile app architecture to create a compelling user experience which would redefine mobile banking for their customers.

2. User and Market Research

In this phase of the design process, Sourcebits 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. 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. This research also helps solidify the branding of the app.

For ING Vysya, we wanted to make an app that would fit in with the target demographic: ING bank account holders, ages 25-45, who were smartphone users.

Tweet: App design steps @Sourcebits: 1. ideate 2. research 3. map 4. prototype 5. visual 6. develop 7. test 8. iterate

3. Functionality Map and Wireframes

Next, we consider the main features of the app and understand the relationships between them to create a user experience map. The Sourcebits design team then draws the layout of every screen and determine the placement of each element, leaving nothing to chance. Doing this establishes the cohesive visual flow of the app.

We knew we wanted ING Vysya to offer a more interactive experience that’s very different from other mobile banking apps in the Indian market.

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 – and test it on a small group of users. This actually saves time in the long run and helps us figure out if the particular concept we want to do is effective, or if we should pursue a different avenue. (Our Chief Innovation Officer spoke at the 2014 Launch Festival about agile prototyping. Check out the SlideShare and video.)

For ING Vysya, we experimented with different features that could be in the app. Focusing on the user experience, we designed an Automatic Bill reminder, the ‘speedometer’ (or balance meter) to visually show your funds level, a branch locator, and mobile check deposit.

5. Visual Design

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.

ING Vysya already had successful long-standing branding. For a cohesive visual brand experience, our team used the bright orange from their logo and contrasted it with black to make the app stand out. The visual design was completed before the rise of flat design in 2013.

6. Development

When we build an app for a client, engineering development 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. Our collaborative, agile development process – working in 2-week sprints – allows us to build quickly and iterate rapidly.

For ING Vysya, we only handled the front-end design.

7. Testing

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. Once we have a solid idea of what needs to be done, we make the changes and then test the application more intensively.

With ING Vysya, our team took to the streets to discuss the proposed design and user experience to ensure a positive response amongst ING Vysya’s 2 million+ customers throughout India.

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. Then Sourcebits helps with launch strategy, marketing, PR, analytics, app store optimization and long-term product roadmapping – but those are different posts.

Want to know how our process can help you bring your app idea into reality?


Contact Us