Introducing

Sprinkle

Your home baking business organized.

casestudypic
My Role
  • UX Research
  • Brand and Identity
  • Visual Design
Deliverables
  • Concept and Indentity
  • Competitive Analysis
  • Survey
  • User Personas
  • User Stories and Flows
  • Wireframes (Low-High Fidelity)
  • Moodboard and Style Guide
  • High Fidelity Mockups
  • Interactive Prototype
Tools
  • Figma
  • Invision
  • Google Forms
  • Usability Hub
  • Draw.io

Overview

There are without a doubt some major industry leaders in the cloud based business management space. However there are many voids that are looking to be filled. Sprinkle began as a venture to set out to help a large but unknown sector, small and home baking business entrepenuers. As a part of the design team of Sprinkle, we set out to streamline the daily business tasks of running a home based food business so that owners can have more time to focus on delightful treats for their clients.

Problem

There are many software programs and apps that are geared toward home baking businesses and allow users to calculate and schedule their upcoming orders and keep track of inventory, but none allow the storing of important files along with running their small business nor keeping track of business tasks on the go via mobile.

Solution

smartmockups_kbmxnzsu

Sprinkle focuses on managing the daily business tasks for the home baking entrepreneur. Users can create and keep track of orders and inventory, as well as keeping notes about client preferences and allergies. Unlike other services for home bakers, users can even upload and store documents to have access on the go.

User Survey

0%

of users keep track of orders and business expenses via pen and paper

0%

of user run their baking business full-time

0%

of users use their software everyday

Challenges Discovered

  • Established software not user friendly
  • Extensive learning to use all features
  • Not mobile friendly
  • No ability to upload files
  • Price of software is expensive

The survey revealed a wide range of behaviors and preferences around managing daily tasks of a food business. From my survey data, I was able to identify behaviors, preferences and goals that funneled into two identifiable groups, new bakers and experienced bakers.

Competitive Analysis

Touted as accounting and organization software or home bakers.

Modern approach to CakeBoss; offers more customization and lower price point.

Large storage capacity; simple interface for doc storage

User Personas

I made 2 user personas that represented real-world users with varying degrees of frustrations and desires from data I collected from the user surveys and competitive analysis.

User Stories

Sprinkle business requirements defined some of the basic tasks new and returning users can accomplish with the software. I used the motivations, goals, and pain points represented in my user personas to create user stories – brief statements expressing the actions users want to take, and the goals they want to achieve with the platform. I divided the user stories by new and returning users, and determined which stories were already accounted for in the business requirements, and which I recommended adding to the scope of the project.

User Stories

Using the user stories, I created user flows to visualize the how users would interact with the software to accomplish their goals. These flows were critical in further identifying key functions within the software and setting the foundations of the design.

userflow

After establishing an understanding of how users would interact with Sprinkle, it was time to define the structure of it. I utilized my user flows as a reference to create all of the necessary pages for Sprinkle. I then organized those pages into a sitemap. The sitemap takes into account both the userflow and hierarchy of the pages in relation to each other. Once the pages and hierarchy were well defined, I created content requirements for each page.

sitemap

Wireframes

sketch1
sketch2
sketch3

With Sprinkle’s hierarchy and content reqs defined, I sketched a set of low fidelity wireframes. Skecthing these allowed me to base my design structure and quickly get my ideas out visually and quickly.

wireframe1
wireframe2

I then used Figma to create digital wireframes to further have the ability to iterate content placement on the page and see the visual hierarchy of page elements before investing time into a more refined design. Creating this digital low fi wireframe allowed me to conduct a usability test to analyze first interactions from users.

Usability Testing

usabilitypic

To conduct this test, I took 3 tasks: account creation, adding items and sorting files processes and had 3 users to complete these tasks. This test allowed us to gain a deeper understanding of the difficulties of these processes and how a potential novice would be able to accomplish these tasks.
Because I wanted to analyze how a newcomer would go through the process I tested 3 individuals with little to no baking experience. These users were able to get through each task fairly easily and quickly, however there were some suggestions in regard to the payment page. Users felt like they would like information was missing for credit card input and felt a bit lost during the account creation process. One of the user’s suggested a way for the user to see where they are in the process as well as asking for expiration date and zipcode. That feedback resulted in an iteration of that process and pages.

One of the participants noticed that the
payment page did not include the expiration date.

This is the payment page after the user suggestions were made.

Branding

Image_ Horizontal

After conducting the usability tests and before creating a high fidelity prototype, Sprinkle needed to establish a visual brand indentity. I created a logo, color palette, and typography guide to emphasize core aspects of the Sprinkle brand persionality: playful, fresh and simple.

 

I used the same color choices of the logo throughout the design. Shads of turquoise, magenta and yellow give a fresh color to the design but also helps to represent the industry this application is for.

styleguide

Style Guide Snippet

Typography:

Poiret One is a sans serif typeface with an Art Deco feel. The rounded and wider lettering compliments the Sprinkle brand. It features a minimal aesthetic and shows a playfulness yet sophisticated style. Poiret does not come in different font weights, however sizing is a good way to establish heirachy when using this typeface.

Roboto is a sans serif typeface with geomtric elements that play well with Poiret One without overshadowing. It features open curves yet a natural width that is easy to read and establish heirarchy for the content of Sprinkle. It comes in various weights unlike Poiret One.

Preference Testing

I conducted a preference test before the final usability test of the high fidelity prototype to help decide design variations that I created. I wanted to get feedback early so that I can adjust before the final touches were complete.

The initial design of Sprinkle featured a dark magenta side bar menu. I tested users in order to see if dark magenta was preferred over another color, dark turquoise. For this portion, dark turquoise was preferred over dark magenta.

sidebarcolor
menustyle

I also tested the menu style to see which style wa preferred. According to the results the style choice with darker varations of grey was preferred more than the lighter version.

I tested the highlight background on an information element on the app to see what was preferred. The choices were yellow and turquoise. Surprisingly enough the yellow background was preferred.

infohighlight

High Fidelity Mockup

With the wireframes and brand identity in mind, I designed 36 screens for Sprinkle which included both desktop and mobile versions of the software. I made the application clickable, so that I could conduct another usability test to see if the design adjustments that were made from previous testing were more appealing to the users. Similar to the first usability test, I gather users with little to no baking experience to complete 3 tasks. The feedback received was better in regard to the flow of the application, however I did receive some feedback on the illustrations on the sign up page in regard to the colors originally used.

usability2

Reflections

What I learned…

From this project I learned the importance of research and testing. This project taught me to make sure I have strong research as a foundation and the importance of testing. It is really easy for a designer to make assumptions about what the users may want but those assumptions need to be tested and proven valid.

  • If time we’re free, next steps for this project would be adding some customization choices for the users as well as effective micro-interactions and animation elements.

What I would change…

  • I would have spent less time on early deliverables such as my initial digital wireframes and trying to make them perfect. I quickly learned that testing and iterations are key.

Final Thoughts…

From ideation to completion, Sprinkle underwent many changes and iterations. This project started without a target audience, product name or even a specific problem in mind but ended with a solution. Taking a vague concept and creating a tangible website as a beginner was overwhelming but a great learning experience and tremendous for my career as a designer.

“Good design is about process, not product.”