UX • UI
Sector: Hospitality
Tools: Sketch, Adobe Photoshop CC, MarvelApp, SAAS, Adobe Color, Jira,
The School Meal Ordering App is a SAAS based application designed for both the parents and the students to pre-order their school meals. There are two distinct versions of the app:
Applications of this kind are used by various schools all across the UK. So how did I approach the task of designing such an important app?
Since we are looking at an app that would facilitate food ordering, I wanted to perform some:
Primary persona – a parent.
A mother of two and a loving wife. As of the moment, she has her own little flower shop that she tends to daily, and that gets a lot of orders for personal ceremonies of her clients (marriages, birthday parties, etc). Besides all of that, she still does her part of the housework and takes good care of her children – therefore she is very busy, and does her best to stay on top of things. She especially cares about the dietary requirements of her children, and pays attention to the nutrients they consume.
She is not the best at technology – even simple chatting applications were a bit intimidating to her at first. Therefore, if she were to use a meal-ordering app, she would need something extremely straightforward and easy to figure out, without any overcomplicated ruffles. Additionally, she especially despises drawn out, complicated processes needed to achieve simple and necessary results.
Eileen Hayward (primary persona for the School Meal Ordering application) wants to order food for her children quickly and efficiently. She doesn’t have much time on her plate, so ordering meals in advance helps her manage her it efficiently and not to worry about kids lunches at school. She also isn’t very good with technology, and does not want to spend weeks figuring a new application out.
→ By creating an app that is simple to use, and that gets straight to the point with just a few clicks and tabs, I will be able to enable easy solutions and a quick choice-to-order pipeline for Eileen. Additionally, by making the wallets and children’s accounts easily visible and accessible for her, I will make it easy for her to top up, and let her choose meals for her children without wasting time. Finally, by making nutritional value of the meals available, I will be able to alleviate her concerns regarding dietary requirements.
Secondary persona – high school student.
The excellent eldest daughter of the Greys, Donna is calm and thoughtful, dedicated to her friends and good at studying.
There are few things she is stubborn about, but food is definitely one of them. She is very particular about textures and likes to know what is in her meal, and to control what she eats.
Additionally, she is extremely allergic to nuts of all kinds and peanuts – therefore, nutritional information and ingredients are very important to her safety.
Donna Grey is very particular with her food – some would even use the term picky. It does not help that she has debilitating allergies. For her to be comfortable eating something, she needs to know what is in her meal and how it was prepared.
→ By making ingredients lists and meal information available directly through the app, I will be able to make Donna’s life much easier when it comes to food, with no concerns for misinformation and/or allergen-related mishaps.
As I always do, I start my ideation process by channeling my imagination through a simple flowchart that is supposed to include all functions necessary without creating any unnecessarily complicated function intersections.
Both applications are to have incredibly similar functionality, which is why their flowcharts are almost identical.
To keep to the simple flow of this diagram (Figure 1.1 & 1.2), as well as resolve the problems presented by the personas, I would have to:
(Figure 1.1)
(Figure 1.2)
(Figure 2.1)
(Figure 2.2)
(Figure 2.3)
I developed brand guidelines and design systems for BlueRunner Solutions. When I start working on the UI design for an app, the initial design is our own. Therefore, the overall design system is based on the BlueRunner Solutions directives, which are:
This design system is not set in stone, meaning that later we change the colours, logos, type faces and images for the apps to make them fit our clients’ brands.
The testing process was done in two different sessions.
Session 1: QA bug testing. (Both SMO apps)
Session 2: timed testing session for parents. (Parent-oriented SMO)
Once all the sessions were completed, I looked at the time it took to complete each of the tasks and tried to make the tasks that took the most time more simple and straightforward.
Additionally, any feedback obtained from already existing clients from our vast UK-based schools database is counted as test data all along, and has been/will be used to improve the application and, possibly, eventually add additional functionality if necessary.
Thank you!