iOS and Android app
July – August 2019
Just me 🙂
This project is a continuation of the Chefy Alexa Skill project that can be viewed here: Chefy p. 1.
Based on my voice usability testing I learnt that some users saw a need of being able to access their recipes on their mobile phone too. They liked the idea of browsing through recipes first, purchasing required ingredients first, and then continuing to cook with the Alexa skill at home.
UI patterns that are commonly used boost familiarity in apps’ usage that is why I not only looked at most commonly used apps to see what’s familiar to users, but also looked at two competitive cooking apps. I summarised their pros and cons which I could later on leverage for my own project.
BBC Good Food app
- A great number of recipes available.
- Clear and crisp design.
- Helpful users’ ratings.
- Very long cooking instructions.
- The recipes saved in the app don’t synchronise easily with a website.
- Problem with logging in (to use the app users must close the app, and then revisit it again).
- A great variety of recipes: vegan, vegetarian, gluten free, etc.
- Simple instructions, designed for every level of cooking skill.
- “Tips” feature: allows people who made this recipe easier leave useful tips for other cooks.
- Logging in: the only ways of logging in are via Facebook or phone number.
- Impossible to change units of measurements.
- The app is imposing sound on users (via their instructions videos). The music is impossible to disable.
The objective for this project is to gain validation from target users that such an app (combined with the Alexa Chefy Skill) will be used to make meals and will be fond reliable.
- Clean. To convey trust and reliability, my design will be clean.
- Tasty. The imagery will include professionally looking pictures so to make users want to cook by simply looking at the pics.
- Friendly. The style of the app will be friendly and approachable. I want the app bring a smile on people’s faces when they interact with it.
- Fresh. I also want the design and the UX to feel fresh, i.e. animation will be subtle and unobtrusive
To represent a relationship between the pages in the Chefy mobile app, I created a sitemap.
Interactive high-fidelity prototype
You can preview high fidelity prototypes in the form of an interactive prototype by following these two links. Both of the prototypes were completed in Marvel.
iOS and Android comparison
Both Android and iOS versions of the app were designed to meet each platforms’ UI guidelines, therefore offering a better user experience for their users.
Basic brand guidelines
I built the basic brand guidelines document to help designers, marketers, developers, and other stakeholders present a unified vision of the brand to the public. I called it ‘basic’ with the idea that the brand can be developed further by other people who’ll be working on the app.
It is very important to follow the iOS and Material Design guidelines to make sure the users of these apps know how to navigate it intuitively. When designing Chefy, I wanted to both ensure I do that, as well as keep in mind that these guidelines can change overtime. For instance, Material Design used to keep the navigation bar at the top of a screen (not at the bottom as the iOS apps do), and that was due to the Android’s permanent “back, home and multi tasking buttons” that already were on the bottom of a screen. Now, looking at some popular apps such as Facebook or YouTube (on Android and iOS) they both have navigation bars at the bottom of a screen. The lesson I’ve learnt: always be up to date with what each guidelines require from you.