Video explaining how the product works. It was made a few months after we launched the MVP.
When a start‐up project is only an idea, it’s easy to speculate about what it may become. What will be its feature, its market, its public, etc. During my apprenticeship, I was taught the first step to take is to identify the core value of the product and start prototyping it in order to ask questions. Having a prototype, even in the roughest form, is helpful to focus on usability and functionality rather than staying conceptual. Therefore, my first mission for Meal Canteen has been to understand if adding visual elements to the dish options would prove useful in overall experience. The project owner wanted to use photographs to get people interested in the application. From my point of view, I was wondering how to gather and integrate all these pictures. We searched for image banks, but it seemed either too expensive, or the quality was too low compared to what we had in mind. So my boss asked me to find alternatives.
I made two proposals. The first one made use of colour illustrations to draw the users’ attention. But a problem quickly appeared: how to create illustrations for every single possible dish.
Some illustrations for proposal №1.
In response to this problem, the second proposal was to generate an icon library where elements would be combined in order to create a custom icon for every dish. I then used HTML/CSS to implement these two proposals along with a third one with no visual elements, and adding each of them to the prototype using Git.
Some icons for proposal №2.
Afterwards, we organised a testing session with several children registered to the school canteen. The sample group was pretty wide, but all of the kids were living in town. Some kids had no choice but to eat in the canteen whereas other had permission to have lunch in town. Interviewing them helped me understand their vision, their opinion and their habits in relation to lunch. We approached topics such as their favourite food and their parents recommendations in terms of diet. Then, I launched the A/B testing session with the three proposals I had created.
The two proposals shaped as a component of the web application.
Asking the kids to comment on their actions and feelings using the app, it appeared to me that, for them, visual elements were more disturbing than anything else. They were trying to identify dishes, but not always managed to do it. The experience became sometimes frustrating because of it. Eventually, I wrote a report gathering my observations, recommending to not use any visual element for this specific component at this stage, in order to improve readability and make the choice between dishes easier for the users.
My second mission was to wireframe the iOS app based on Apple guidelines. It was the occasion to use iOS guidelines and resources as well as to train myself to use Sketch.
Wireframes to which I applied iOS guidelines.
After I wireframed the MVP, we started to turn screens into UI. We made several versions, but finally, we implemented a minimalist UI. We decided to do so because we thought it would be easier to add branding elements once they would have been defined.
One of the UI concept we have given up.
A few key screens of the very first version of the app.