Cupcake Savant
CONCEPTION, DESIGN DIRECTION, UX/UI DESIGN & PHOTOGRAPHY
The Cupcake Savant App was created for the 2016 build as a sample to help teach developers and designers how best to leverage and design using the tools, controls, patterns and templates of Windows 10 Universal system.
Deconstructing the patterns
When tasty treats and design comes together it can be a perfect pair. The same goes for the right type of application on Windows 10 system. Cupcakes Savant was created to inspire developers and designers in how best to build and create within Window 10.
For cupcake savant I wanted to create something that was extra special that had a distinct personally to it and that most people would enjoy. So there it was… Cupcakes! I spend some time researching for other iOS and Android applications around cupcakes but found none. Which at the time surprised me because I assumed there might have been a market for sweets? Guess not. I then broaden my research to general food in order to find applications within the spectrum.
Defining a taste
The style and aesthetic I went with was a twist of modern with a little bit of personality. I chose to go with colors that were subdue for the overall style of the app but added punches of color where needed to create a fun feeling. I changed the default typography in key areas to show the flexibility within the Windows 10 ecosystem and also encourage people that you can have a little bit of style and personality when representing their application.
More than just a pretty picture
Beyond just coming up with the color scheme, brand and mood of the actual application. I decided to take it a step further to make it really fun and create a unique representation of cupcakes, by ideating the types of cupcakes I wanted and baking/decorating the cupcakes myself (making two examples of each). I then found the right types of props and set up the environment for a cupcake photoshoot and shot the photography for each one of the cupcakes in order to achieve the end result that I wanted in pictures. It was a ton of fun and a lot of hard work but I enjoyed it a bunch and I think the end results really did create the unique personality for the brand, making the photography a lot more fun while illustrating great example of what quality app can be for Windows UWP.
Always ready to bake
The template was not only designed for one device but for all devices within the Windows ecosystem ranging from the phone to tablet to laptop to desktop and then all the way up to Xbox and surface hub.
When creating templates like this I put into consideration all of the things you have to think about when designing for Xbox for example, and also for hub as far as touch ability, larger screens and the little nuances that are definitely important pieces that need to be incorporated in. The templates were created to really help jumpstart someone when creating an application by not having to think necessarily through all those additional steps, if using the templates as is.
Making something tasty
The application template itself consisted of five primary areas. Home consisted of showing different ways in which content could be viewed in featured areas along with scrolling list. For the other three primary template pages they were created to feature different ways in which content could be viewed and displayed from filtering a list with prominent header and content description below to just more of a gallery view or a mix of vertical and horizontal content list. One was used to illustrate the cupcakes you could order, one for social cupcake sharing and one for recipes. The map page was created to feature the map view itself along with a ride along list panel for searching and also deep diving into selected content and ordering through the actual list view.
UX FLOW
UI
Adding a helpful hand
After the initial templates were created, I started to think about situations when a user might actually want to have a hands-free baking experience. Hmmm...And logically what would be a better way to do it than with your Xbox?
The flow through the actual experience was designed to be clean and easy to use. It consisted of basically three different template areas. One that highlighted the actual ingredients with the option to modify as needed than your actual steps through the baking process and finally a screen to set your baking time, or for an indication for baking notifications.
UX FLOW
Just how you like it
Continuing on with the style of the Cupcake Savant branding, the Xbox experience had a few additional elements added to help through the experience like: illustrations for the different elements within a recipe as well as the use of color to indicate prominent call outs like: 350 degrees in the instructions to give an emphasis to what mattered most.
XBOX UI
It was also extremely important for instructions to be easy to read and follow from a distance or up close. As well as giving the user cues to the items that they changed and the option to still change as they went through the process. To make it even easier, as I know sometimes when cooking it can slip one’s mind, I added in reminders for the oven to preheat or set a timer as those seemed like good additional pieces to help anyone as they would be baking.
Baking with everyone
The initial template was introduced in build 2016 in a presentation for designers and developers to help them better understand how to design and think about Windows Universal Language when developing.
