• Design

Designing “Killer” Mobile Apps: a prototype story

On October 31 - November 1st, me and Ciprian presented and mentored at Design Jam 2014: Autumn edition - a design hackathon held at the Faculty of Computer Science from Iași.

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.

Mobile app logo design for the prototype application Hits.

The brainstorm

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.

Mobile app design ideas for the application Hits written on paper.

The flow

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.

Mobile app flow with user experience interactions included.

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).

The sketches

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.

Mobile app design sketches with colours and various details.

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.

Mobile app design sketches testing and proof of concept.

The visuals

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.

Mobile app design style guide with colours, interactions, buttons, images and various icons.

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.

Mobile app design welcome screen and login page.
Mobile app design mission screen with details, map and tasks.
Mobile app design screen to setup the details for an assasin job with slide and button to complete the offer.
Mobile app design screen with assassin status and slide left menu.
Mobile app design notification screen with the final go of the assassination mission.

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.

Mobile app design mock-up with colors on paper and life size images for better interaction.

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.

Mobile app design flow with detailed interactions and color screens.

Prototyping

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

Mobile app design prototype in Invision. Interaction buttons and areas are highlighted.

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

Mobile app design prototype in Marvel with transition and actions screen.

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.

Mobile app design interactions using Pixate. Screenshot of screen while setting up an animation.

The Workshop

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.

 

Conclusion

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.

You can also find our full presentation on Slideshare.

Just to tease, we will present a Sketching Mobile Apps Workshop hosted by The Grape (Business Hub, Iasi, Romania). So stay tuned… there’s more to come.

Last, but not least we would like to thank you prof. Sabin Buraga (Faculty of Computer Science from Iasi) and Andreea Popescu (Mozilla Representative) for organizing the Design Jam. You guys rock!

 

PS: some images are used for presentational purposes only due to their original content (e.g. Hitman, Assassin’s Creed, Breaking Bad etc.). No harm intended whatsoever.

If you liked what you read subscribe to our newsletter to get fresh articles and a list of curated links about marketing, design, ux and business.

If you have an interesting web project sends us a message and let’s get in touch.

 

  • Tags: apps, design, grapefruit, mobile, process
  • How is Grapefruit seen through the eyes of an intern?

    Have you ever thought about getting an internship at Grapefruit, but didn’t know how? In this article, I am going to tell you what method I used to get this internship and how I feel about the whole experience.

  • Our Photoshop study group

    A designer’s skills can come in handy in other departments, right? I developed a Photoshop Learning Beginners’ Course for three months, in which a Tester, a Front-end Developer and two Content people participated.

  • What is persona and why you have to do it?

    In the following article I will tell you what the persona is, why it is so important, how you do it, what problems you can encounter even when you already have a persona.

  • (OPEN) We Are Looking for an Experienced Social Media Professional in Bucharest

    We are searching for a “holistic” Social Media Specialist. Leaving the fancy word aside, this means that you know and worked with both the organic and paid areas of Facebook.

  • (OPEN)Delivery Manager Wanted in Iasi

    We need a Delivery Manager to act as a little leader who manages the delivery of services, not individual team members.