My First UI/UX Challenge
By: David L
Tags: Ui Ux Design, UI, UX, Ironhack, Bootcamp

As part of my admission to the IronHack Bootcamp, I had to pass a technical test, which consisted of solving an open brief. At first I found this quite daunting as I was unclear as to what exactly a UI/UX designer did. I quickly realised that the learning by doing approach is the best way to understand the role. Here is my first attempt…

The Brief:

“Create a tool for designers and creative people, so that they can safely save pieces of inspiration and trace them back in an efficient way when they need to.”

As a former illustration student, and user of sketchbooks, I immediately had an idea for an app that would solve a problem I personally experienced during my student years. The problem of collecting, annotating and reordering images (and sometimes notes) to show your inspiration, working and progression of your visual ideas.

In retrospect I already made a huge error by glossing over the User research part of the project. I went wholly with a problem I personally identified and went full tunnel vision.

The (my) Problem:

During my study in illustration I researched projects using a combination of google, Pinterest, books, magazines, film and more. Getting inspiration wasn’t the problem, it was organising and cataloguing it. When it came to submitting the sketchbooks for grading, there was an extra stress of having to reorganise, annotate, print, cut out, stick down, reference all of the photos, quotes, sketches together into one cohesive book. I would use my mobile phone to take photos of my progress, inspiration, etc anyway so it wasn’t a stretch to have a mobile app to solve the problem.

Pages of my Sketchbook

My Solution:

ArtBook

ArtBook is primarily a mobile app used to collect, store and annotate inspirational photos and notes, which can then be organised later in a desktop/tablet version of the app to create an ‘ArtBook’. The ‘books’ created can then be shared, printed or saved.

Mock up — made using Figma

User Profile:

Creative student or professional who need to organise and curate their inspirational content.

Looking for paperless, functional, simple solutions.

Tablet and stylus user, they enjoy using technology to make their lives easier.

Smartphone users

They crave order in their creative profession and want a place to keep notes, quotes and images together and separate from their personal life.

The main solution of ‘ArtBook’ is easy storing and recalling of images and notes with the ability to annotate the images/notes at any time.

Wireframes — made using Balsamiq

With the annotated content, the user can easily collate it together into a ‘book’ which is simply a PDF page or pages that the images (with annotations) and notes can be placed and arranged for sharing, printing or saving.

The app also allows an image (or note) to be tagged with a ‘genre’ allowing a user-created method of organising their images/notes.

Wireframes — made using Balsamiq

By default the images and text are organised by date and this will be the default view of the app when it is opened (if the user has added content).

Smart phone users already use their phone to collect photo and image information for their inspirations so this app would allow them to keep it in one place and more importantly, separately from their personal/family photo albums and notes.

Tablet version

The main difference between the mobile app and tablet/desktop version is the ‘Desk mode’ which allows the user to drag and drop the content (previously collected and annotated in the mobile app) onto a blank page, allowing the user to freely move around images and notes, further annotate or reference, add arrows, draw directly on to the page (with stylus)and save (as PDF for example) for forwarding or printing.

Mockup of ipad ‘Desk mode’ — made using Balsamiq showing the split screen view.

This will be made easier by an adjustable split screen view. As you can see in the mock up, the top half of the screen shows the collected content which can be filtered and searched to easily find what you’re looking for; while the bottom half of the screen is your working area where you create the ArtBook page.

Mock up of how an ArtBook PDF page might look

Competitors:

During my research I discovered many great apps. The closest to ‘ArtBook’ would be a combination of a few: journalling apps, scrapbook apps and inspiration apps.

Magpie, Milanote and Day One — just a few of the great apps out there

What I learned:

During this challenge I learned a lot about the role of the UI/UX designer, the tools they use and the skills they need.

On reflection, I probably wouldn’t have spent so much time on Balsamiq and Figma trying to make wireframes. At least not until I had a solid layout on paper.

Personally, I was surprised to find that I enjoyed the problem solving part of the challenge more than aesthetic side of designing the interface. Working out the steps the user has to take to make the experience simple, intuitive and effective was a really fun challenge and I’m looking forward to more challenges ahead.

I’ll leave you now with my first prototype!