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.
Related
Logging with Spring AOP
With Aspect Oriented Programming concept you can easily intercept method calls, and write a detailed log – method name, arguments, returned value and execution time. See how this works in Spring (Java).
Java code inside JSP page
Java Server pages technology allows us to combine HTML (or some other) output and Java code in a single JSP file. Although mixing Java code with HTML output generally isn’t very good development approach, there are situations when you can’t avoid it. Here are some of our guidelines for better code organization.
Qt development – screen area available for apps
A know bug can cause a Qt widget to take up a size that is larger than the screen area available for the application. It results with a part of the application rendered outside of the visible area. Here’s how to solve this annoying issue…