Visual design of Bounty Hunter: a productivity app
Motivation for the lazy man
--
Overview
Week three at General Assembly was all about visual design. The challenge was to take the prototype from project 1 and add a visual design to the screens.
In my case, project 1 was a productivity app called Bounty Hunter. A quick recap of the concept: The app enables you to add a task and freeze a certain amount money for that task. The task needs to be authorised by a friend/flatmate/… in order for it be added to your calendar. When you’ve completed the task, that friend/flatmate/… needs to validate that you’ve done the work so you can get your money back. The validation is done by the Touch ID feature on iOS.
Process
Since the visual design process isn’t that vastly different from the UX design process, we went about it more or less the same way. By learning about creative thinking, colour theory, branding, typography, and design languages, we were able to use that and put it into practice the prototype from project 1. Using the double diamond in this process helped with structuring and designing.
Brand positioning
By using mood boards I tried to structure what the brand would be of Bounty Hunter. The concept was that the app is just very ironic. I wanted very soothing colours, soft typeface, but strong language. The reason behind this is that my main user Max needs a little nudge when it comes to getting his work done. The way it is talking to him, the app is basically saying: “Cut the crap Max, time to get your shit together.” It was a way to enhance the external motivation. The reason for the soft colours is because I liked the fact that it feels very ironic. The app is meant for a younger audience, so I felt it was quite fitting.
Bounty Hunter is direct and motivational but never aggressive.
Feedback
The initial feedback I got from Max was overall positive. He really liked the tone I was trying to set with the language, that resonated with him. The items separately were positively received, but he only had some questions as to how I would bring them all together since they are quite conflicting.
Mid-fidelity wireframes
The mid-fidelity wireframes were a digital translation of my paper prototype. At this stage, I didn’t change anything in the design.
High fidelity mock-ups
Time to add some colours and typefaces to the prototype. Choosing a colour scheme turned out to be more challenging than initially anticipated. The colours I chose either didn’t go with my brand personality or were too clean/cold. I tried to work with gradients to make it softer. That didn’t work. I tried to soften the screen another way by adding hand drawn boxes. That didn’t work either.
It was too clean. So I decided to start over again. Go back to my mood board and test out different colours.
The typeface in the initial designs didn’t fully translate my brand image. It needed to be soft so that the irony of the language used shined through even more.
Feedback & iterations
After settling on a colour scheme with a soft teal and rusty red I got feedback. Most of the people I tested with had positive responses to the design. I managed to get the right message across. But something still felt off. After speaking with one of my instructors, the reason behind that feeling became clear. Because of the red, I used as accent colour, it was a bit aggressive. She suggested using a more positive colour, namely an orange hue. After this final iteration, the design finally came together.
The drawing is the personification of the ‘bounty hunter’. He is the ‘condescending dude’ that urges users to do their work without being aggressive. This really resonated with the younger people I tested with.
Some of the boxes in the weekly overview are filled and some are not. In days you have tasks planned, the boxes are filled. In the days that don’t have scheduled tasks, the boxes are not filled.
Some last pieces of feedback I got from my classmates:
I like your logo & the use of colours. I would maybe put the writing in the middle of the screen (cf. the screen with gradient and motivational text), as it looks a bit empty. Overall very good.
Great balance between tone and colours, this really comes together.
It’s a simple design which is great. Would benefit from some pictures on screens with less info.
