SmallBite — Mobile Application Design
About the company
SmallBite is a food delivery start up operating in Pune. It sells quality food at a very reasonable price.
In India, there are many food delivery start-ups like Foodpanda, Tinyowl, Swiggy etc. and all of them have a very similar kind of model. They get food from already existing restaurants, and sell it to the customers. In the entire process, they take delivery charge from the customers, in addition to the commission from restaurants. Smallbite’s model is quite different from them. It displays the list of curated meals upfront on its application so that users doesn’t have to browse through the long menus of every restaurant before placing an order. Along with this, they have their own kitchens to ensure better quality of the food, and ultimately higher user satisfaction.
I was given the task of revamping their entire android application design and its experience.
- I started with capturing the requirements like idea, vision, and goal, end users etc. Once I had enough information, I noted down all the use case scenarios that the application was going to include. Then I started making task flow diagrams to make sure that each use case is addressed.
2. Once the initial research was completed, I jumped into making paper prototypes of initial screens. When paper prototypes were ready I sent them to the client for feedback. I followed this process for all the paper prototypes which helped me make sure wireframes are fulfilling the users as well as business goals. This process also helped me refine the design at an early stage of the design process. These are some refined prototypes after few iterations :
3. I translated all the paper prototypes into high fidelity wireframes using photoshop. I also created a prototype using an app called Marvels, that allows you to take photos of your interface sketches and link them together to create an interactive prototype. Check the prototype here.
I tested out the prototype with users to ensure that there were no major usability issues.
These are some wireframes on gray scale:
4. Final stage was to decide the visual design which includes selecting a color palette which creates an identity of the brand in the market and selecting a font to effectively communicate with the user and give a unique touch to the application.
Smallbite already had their logo designed which was using two colors and it is good practice to use the same color palette in both logo and screens to have a sense of association and a link between them. So, I used the logo colors as both primary and secondary color.
I used Open Sans in the entire application because of its legibility and friendly appearance.
Once typography and color palette had been decided I converted all the gray scale wireframes to colored one. Here are some screens :
With some perspective —
This is how I revamped the entire Smallbite application using the User Centered Design process.