A few days ago the LaLa Lunchbox app landed on App Store. Even after such a short time, it got some great feedback. Things like that happen if you have a client that knows what problems need to be solved, but is flexible enough to let the professionals do their work. This post is about the design and development process of the app.

Wireframes, prototypes and design

The first step of any process is finding out who the users are. In this case, there are two groups that use the app simultaneously – parents and children. Parents manage children’s accounts, food items and browse through a groceries list. Children use the central part of the application – the lunchbox – to prepare their meals for the week. The former part had to be efficient and organized. The latter had to be fun and engaging like a game. Those two requirements are not easily mixed together.

We had great and continuous communication with the client and used online wireframing tools extensively. The path between the client’s initial idea and a finished product is very obscure and if all situations are not thought through, it’ll bite you near the end. That’s why wireframing is all about problem solving.

During that phase the dev team was brought in. They checked the technical feasibility and brought a different perspective with good questions and discussions. This is also the best time to quickly prototype some new ideas (new types of selection, animation, etc) and see how they behave on a device.

Designing for grown-ups and children at the same time is not easy, but we’ll let the pictures do the talking.

About 40% of the total time spent on the app was on design and user experience before the first line of production code was written. It was a good decision.

Development and QA

Coding custom game-like consumer application is never an easy task. There are many non-standard technical requirements and if you want to impress your users, you’ll have to code like a boss. One of the examples is the custom scroll and inertia our dev team implemented because the out-of-the-box solution just wasn’t good enough for our specific situation. Small things like that and not cutting corners is the way to a great application and user experience.

As soon as the first usable builds landed on a device, QA team started tracking bugs and testing all edge cases. Finding those as early as possible saved us time later.

Complete involvement

In the second half of development, the whole team and the client were fully involved. The design team didn’t just said “OK, we did our part”. They used development builds to conduct user testing, sometimes very short, sometimes more elaborate. The dev team implemented the feedback from testing and QA made sure everything worked as planned without problems.

Waterfall workflows where functional departments do their work on a project and pass it on to never see it again are things of the past and should never be used if you want to create this type of consumer application. Be agile and respond to feedback.

If you have children and value the effort that has been put into the LaLa Lunchbox app, be sure to check it out on App Store.