Published on <a href="http://ift.tt/2tdWqIV">| Prototyping: From UX to Front End &mdash; Medium</a> Topp Brocales 
<h4>One theme. Three hours to design. Ninety seconds to present.</h4>
<img alt="" src="http://ift.tt/2ubxcIk">
Right after work on a Wednesday, I met up with my teammate to compete at our very first <a href="http://ift.tt/2ovd9p6">Adobe Creative Jams</a> experience. Going inside Microsoft Vancouver office, we had no idea how the event was going to unfold. All we knew was that the theme would be revealed at the start of the event.
HOME? That was it — including the question mark. They left it quite open for us to create a visual representation of a mobile app. No other rules. The facilitator then changed her screen to a three hour countdown and we began to work.
I grabbed my notepad and wrote HOME? right in the middle of it. “Quick! What other words do you associate home with?” I asked my partner. Family, belonging, connection… and so it went. After spending some time exploring the theme, we both agreed there was something with dog, family and being away.
<img alt="" src="http://ift.tt/2ubzAPl">Home is where the dog is.
<h4>But how do we turn this into an app?</h4>
We reviewed our map and started looking for a possible problem that our app can solve. Then it hit me, owning a dog usually comes with countless numbers of I have no idea what I’m doing moments, sleepless nights and constant anxiety. These issues are a lot more apparent during the first few months of getting one. If only the person knew someone who can answer all these things when they arise…
We knew it was a feasible problem statement but before jumping into solutions, we needed to dig deeper into it. Defining the user was easy and biased to say the least — my wife and I have a <a href="http://ift.tt/2u3usg8">four year old shih tzu</a>.
<img alt="" src="http://ift.tt/2ubpSMP">It’s not easy owning a dog while having a busy career. How can the app make it easy for them?
In order for someone to keep using the app, we needed to build a habit. We discussed possible solutions such as utilizing chat bots for proactive notifications or offering tiered discounts from vendors, but we knew we had limited time so we diverted away from this path.
I glanced at the big screen and it had been more than an hour already. Panic arose but we remained calm. We knew that delving into the core user experience will save us a lot of time when designing the interface. Having the problem and the user defined, it was time for us to look at the main areas of the app.
<img alt="" src="http://ift.tt/2tdWXdT">Things are starting to make sense now.
We broke it down into three sections: build a habit, educate others and relieve anxiety. The first area focuses on training the owner to build their dog’s profile as it grows. The idea is to create a database of dog profiles that other owners can tap into for guidance. That’s where education will also come into play. Answers are catered to their dog’s specific needs. The last section is meant for when the owner has to leave their dog with a dog sitter. The profile is accessible by different social platforms via bots that an authorized person can chat with.
<img alt="" src="http://ift.tt/2ubXeuZ">All smiles here! No pressure, right?
It was now time to open our laptops and start researching the facts. We used Dropbox Paper to consolidate our ideas. We also started deriving features from the main sections and crafted possible user stories that can fit within the ninety second presentation.
<h4>Time check: one hour left before the deadline.</h4>
We stepped back and looked at what we’ve done so far. Problem statement? Check. User stories? Check. Features? Check. Design? Prototype? Pitch? Nope. We also realized we were working on this non stop so instead of burning ourselves to the ground, we stood up and grabbed a bite. Our backgrounds are both in interface design so we knew we got this.
Coming back from the five minute break, we started wireframing the onboarding process in <a href="http://ift.tt/1UxyZx3">Adobe XD</a>. As soon as the first screen was done, I built a styleguide from it and started adding colours and other patterns. We kept tweaking until it worked for all the screens. There was a lot of AirDropping involved since Adobe XD doesn’t have a collaborative feature yet.
<img alt="" src="http://ift.tt/2uc57Ro">These are the elements that comprise our entire app.
The last fifteen minutes were the most stressful for us. We had onboarding and two other scenarios fully designed but we were still missing the one that would bind them all together: the home screen. I quickly sketched it on paper and used existing patterns from the styleguide to design. Within five minutes, I came up with this…
<img alt="" src="http://ift.tt/2te2MrM">Given the time crunch, we opted for very minimalist styling.
<h4>Tick-tock. We’re on the final stretch.</h4>
It was time to sew them all together. We combined our working files and started building a prototype within Adobe XD. While my partner was crafting the interaction, I started writing our pitch deck. I looked back at my own experience of raising our puppy and ideas just started flowing.
Time’s up! Just like those home cooks in reality TV shows, we finished our prototype right on the dot. We recorded the interaction and shared the prototype URL from Adobe XD. We saved it in a flashdrive and handed it off to the facilitator.
We were the last one to go up the stage, so we were both so anxious while watching others present their amazing work. Finally, the past three hours all came down to this moment. Our team was finally called, we walked up and presented our app to a crowd of over three hundred professionals.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FsUMiRjWp5X4%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DsUMiRjWp5X4&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FsUMiRjWp5X4%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="http://ift.tt/2ubCS58">http://ift.tt/2ubCS58</a></iframe>
We didn’t win but it was quite an amazing experience. What made this event so vibrant and interesting was being able to literally create something from nothing in a short span of time, while meeting other designers with mind blowing talent. If given the chance, we’d gladly come back and compete again!
I want to thank <a href="https://about.me/lizign">Liz Schmidt</a> for inviting us to Adobe Creative Jams and the staff of <a href="http://ift.tt/1QdnYoC">Microsoft Vancouver</a> for hosting this amazing event. It was such a humbling experience to compete against top notch local designers. Congrats to all the winners!
<img alt="" src="http://ift.tt/2ubZiDp">We didn’t bring home the prize but still felt like winners
I also want to thank our friends and co-workers who came to support. It meant a lot to us! Lastly, I want to thank my teammate, <a href="http://ift.tt/2u3ykhk">Laurice Solomon</a>, for showing grace under pressure. Always a pleasure to work with you! 👍
<img src="http://ift.tt/2ubyvar" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2te7Yfo">Behind the Jam</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Behind the Jam

One theme. Three hours to design. Ninety seconds to present.

Top Stories