UX Planet — Medium | CanvasFlip

Disclaimer : I’m not a designer!

Apart from playing with numbers and strategies, which I always do at CanvasFlip, I love cooking. Had I not been a marketeer, I would definitely be an amazingggg chef 😉 And that why I decided to throw up a tiny little but really impressive burger shop at the left end of my street.

Well, the idea of this gave me goosebumps (with excitement), but in today’s world everything ultimates has to make it up to the internet. And that was exactly the plan for my burger shop too!

The shop was functional for a month, with and without me and we had some jaw dropping response from it! Just as you guessed it, it was time to move digital as well. Having a dearth of knowledge about designing, I was a bit doubtful if I could do it.. But, then I began. And here’s how!

1. Setting the expectation from the design

Unarguably this is the most important step of the process. For my burger shop app, this was my expectation — “A customer lets say Joe, aged 25, may seamlessly place an order for one of his favourite burgers on his mobile phone”

Visualising my user and setting expectation from the design

I’m guessing as designers this is one thing that you might be often scribbling on the front walls of your offices! Because it IS truly required to stay aligned to the goal of the project (What….. truly required to scribble? No, stay aligned to the goal 😉 😛 )

2. Brainstorming the steps

Now that I freezed my expectations from the app, I wrote down the steps my user would take in order to place an order. Now my app, I agree, is pretty basic and writing down steps took just around 15mins…. Brainstorming for apps that are bulky and deep along length and breadth, take much longer, may be even a day or two. But after having done this exercise myself, I totally vouch for brainstorming the steps. It’s like setting the direction of your journey!

Here’s the journey I built –

So here’s my hypothetical user, Joe, who wants to order 2 burgers, one of which he is cottage cheese burger, and the other one, he is just browsing through options.

1. He gets onto the app, searches for “cottage cheese burger” from the search bar on the top and adds it to the cart.
2. Next he is again on the main feed where he is scrolling through options, and seldom applying filters as per his taste and needs.

3. Just as he finds the burger of his choice, he adds it to the cart and then moves to the cart page.

4. From the cart page, he verifies the order, feeds in his delivery address and mobile phone, and then moves to the payment page

5. On the payment page he selects the option of payment and goes ahead

6. At the end I just want to thank him for placing the order.

I have to admit this, with enough experience on goal setting and strategy planning, I swam through the first two steps, but the next step was designing, about which I had minimal or no knowledge. A friend suggested paper sketches for the start, but honestly I an no good with sketching either..

3. Paper prototyping

But that really doesn’t make a difference! Paper sketches aren’t supposed to be beautiful or perfect. It’s just a visual representation of the idea and the artistic merit of the sketch is totally irrelevant.

So I just picked my pen and sketched out the screens for my app. I believe this is THE best way of putting across your ideas. Explaining and pitching ideas usually mess up. Don’t you agree? I have done it both ways and I know paper sketches are farrrrrr better than talking your lungs out trying to explain your mind.

Sketching out my thoughts

Just after this was done, in order to present it in the way an app would be presented, I created a prototype out of these designs. It took some 15 mins to snap, upload and connect screens, but it was totally worth the time. I used CanvasFlip’s free trial account for creating the prototype.

Sharing the prototype

4. Validating the designs

Being distant from the design fraternity, it became all the more important for me to validate my design. It’s not like I was making an out of the blue app but I had to be sure of acceptance. I could not afford to spend money and time on something that might not be as good enough.

So here’s what I did — I grabbed the link and QR code of the prototype I created on CanvasFlip, and printed it on the bill. Every time a customer demanded the bill, they got this QR Code with a request note beneath asking for a small favour.

Scanning the QR code and using the prototype

I repeated the process with around 30 customers. All their sessions were recorded on CanvasFlip, also analytics such as time taken, no of interactions, drop-offs etc.

For a layman like me, these reports made total sense and based on these reports I iterated on my paper sketches.

After a couple of weeks I was quite sure of my sketches, and analytics showed that users were quite comfortable with the app. I tried and made it a point the the process wasn’t repeated with the same users.

Handing it over to the designer and developer

After this point there wasn’t much that I could do, so I forwarded these prototypes to a designer friend. Again it was so much easier to hand it over to the designer. Communicating the idea becomes really smoooooth..

I hope this experience helps you in the initial stages of your app development if you too aren’t a design folk. In the process, I have learnt a lot about the tool CanvasFlip, few tips and tricks too. Would love to share the same with you — Let’s chat!

Designing an app for my burger shop was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.