The event lasted two days: the first was packed with presentations (#web, #design, #mobile, #gaming, #performance, #opensource, #community, #art), while the second represented the workshop itself.
For this season’s edition, we decided to go on a different, funny and “wtf” approach: challenging ourselves just like the participants and design a mobile application for contracting “hitmen”. To keep it “legit”, there is no killing involved. Our dystopian vision involved only to taunt, steal intel and sabotage. We called it: HITS.
First of all we started laying down our ideas on paper. It didn’t matter if they were right or wrong, absurd or pure genius, we knew we are going to do something unique so we tried to fill in all the gaps.
Of course we couldn’t have left the whole idea of the project just on paper full of scribbles and doodles. We centralized them and linked them in a more visually appealing way. We used simple shapes (rectangles, circles, squares) to pin point the main interactions and controls.
The actual flow goes something like this: You enter your credentials, then validate your existence using a retina scan. Once you login you view the current missions you started. From here you can view the current progress (and location) of the Hitman (each mission has a list of milestones to be checked). Or you can start a new hit depending on what you want: taunt, steal intel or sabotage. After you select the type you view the list of hitmen available for the mission. After you choose the one you prefer, you are forwarded to a form where you send the offer. Here the negotiating part begins – you need to choose which budget, how “loud” the hit should be etc.
As a final touch thinking that this app needs a certain level of “intimacy” when you receive the final call from the contractor to confirm the hit… you get a masked message from “HunnyBunny” stating: “Dear, do you want some milk for tomorrow morning?” (Yes/No).
Next up we detailed each screen on sketches. Here at Grapefruit we use gray markers, highlighters, thin liners and small black markers. We believe that the gray marker is a UX Designer’s best friend. We sketch a lot because it allows us to make mistakes and recover fast and most of all you don’t have to be artist extraordinaire.
Testing the sketches
With the sketches drawn we went out and tested them internally. It may look naive, but it’s a very fast, efficient and cheap method to validate the layout, the controls, the interaction and behavior of our ideas.
Without further delays we started working in the visual language for the application. This included colors, fonts, controls, bars, buttons, animations, patterns and of course errors. We recommend to design even the worst case scenarios. For example, if a title is too long, will I trim it and add “…” at the end or will I organize it into two rows? The same goes for errors and how the user will recover from them.
The mockups validated with Skala Preview
The visuals helped us a lot to gain time and finalize the mockups. It was a matter of applying the visual style to the sketches. Moreover we used Skala Preview to get the designs synced on our devices to validate the whole layout. Every time we saved a PSD file, the screen updated itself on the device.
Testing the mockups
Once again, with the screens intact we printed and tested them internally. We wanted to make sure that the app looked, felt and behaved just like we need it.
Updating the Flow
With the mockups finalized, we mapped the new screens and updated the flow. We used gesture icons to highlight and document the final behavior of the app.
We didn’t stop here and we ran the app through several prototyping tools. Our first pick and one of our favorite and requiring options is Invision because of its simplicity and collaborative use. You can play with the prototype at invis.io/CN1LNB7P8
We also experimented around with Marvel to test out their library of animations and transitions. It’s similar with Invision, but it lacks several key features – no collaboration on this one. You can check our prototype on marvl.in/2j9ghd
Our biggest surprise was Pixate. It allows you to add conditional complex animations. Think of Tinder shuffle cards or Path-like menus.
Its only downside stands in the lack of educational materials. Yes, there are some tutorials available, but sometimes you need more than a few videos if you want to grow a proper user base. Nonetheless… it’s cool. If you have Pixate installed on your phone… go check our demo at pixt.io/p5ail4oeqv8.
The first day of the event was a full-house fiesta of interesting and diverse presentations. It sparked the attention and curiosity of the participants and each talk managed to distinguished itself one from another.
The following day, the marathon started with the challenge to pick a random feeling (anger, happiness etc.) and design a concept that will make the user live that certain feeling. The contestants put a lot of effort into finding the right idea. Afterwards they started sketching on paper certain concepts and finally mixed them all into Photoshop mockups.
Surprisingly (in a good way) all those who wanted to present a working demo chose inVision as their main prototyping tools. Personally I was a bit disappointed that all of them went for a mobile application solution rather than thinking outside the box like wearables, projections, holograms etc. It would have been interesting to see such solutions. Maybe I’m just a bit pretentious. After all most of them were High Schoolers.
To conclude this experience, we had lots of fun being part of the event and we will continue to be involved in our local design/IT community.