Published on | Prototyping: From UX to Front End — Medium Laila Goubran

There’s nothing like having the right toolbox and process to help you do your best work.

Very frequently I come across articles and stories form all sorts of designers who share their process and favourite tools. Other also spend the time putting together amazing lists of tools as a gift to designers.
Many start their stories saying it’s a very exciting time to be a designer; There are lots of amazing tools out there, lots of updates and new tricks to try almost every week — I have to admit it gets overwhelming at times but( I have to say it almost feels a bit intimidating at times; I keep questioning if there are better tools I should be using or new tricks I should be learning to be as good as others)

Anyway I decided to do the same and share my own humble list of the tools I use as well for a few reasons, not because it’s that good, but just because it’s a good thing to step back and evaluate how you do things every now and then — maybe I’ll get some helpful responses about tools I should try out that could improve my process — and to have something to look back to when this has all changed in a not very distant future.

It starts with pen & paper

.. always should and always will. Even before the whiteboard, I have to write down my own thoughts and scribbles, privately, my own attempts in making sense of my thoughts, what I’m hearing and what I understand.

Inspiration

Next I go a little bit crazy with a Pinterest, Behance, Dribbble and even just google combo search. Basically whatever I can reach on the world wide web that could inspire or guide me to ideas or solutions.

inspiration attack

What do I do with what I find? Most of the time I end up with the old-fashioned thing of an awkward subfolder inside my project folder that I call “inspiration” or sometimes “insp” for extra laziness.
But it’s more about the process than actually doing something with those images. It helps to see how other designer have solved similar issues, understand what works and what doesn’t or even just get inspired for a new colour theme to try out.

Throughout the project when I’m stuck or need to refresh my ideas I repeat this step or refer to my “inspiration” folder. But in later phases more precise references like pattern libraries or google material design guidelines for interaction solutions and inspirations

White-boarding

I should say Realtime-Boarding.
Realtimeboard is a recent discovery for me, but I’m absolutely in love with it (I think my team is weirded out about how much I advocate for it). But how exciting is it to have a tool to whiteboard and brainstorm collaboratively, remotely, digitally!!!
Random brainstorming on post-its, information architecture diagram, user story mapping, kanban boards and even early wireframing (yes!!) it’s got it all and it’s so easy to learn and very powerful.
I’ve even used it for remote card sorting with stakeholders and users.

User research, planning and wireframing on realtimeboard.com

I ❤ Sketch

From here there’s a lot happening on sketch: The symbols, the nested symbols, the shared styles the style sheet and style guide, pages and pages in an ever growing precious sketch file.

I learned about sketch relatively late in the game (late ’16 — I’m not generally an early adopter), but it was love at first sight. The simplicity of it after adobe was just mindblowing. And the symbols — oh the symbols!

I still use photoshop and illustrator when I’m working on branding and graphic design projects. But I have to say for UX/UI sketch wins with me. My immediate thought that this was a tool made by designers for designers, addressing a lot of the things we’ve all been dreaming of — and it keeps getting better.

Craft — Invision

Once designs are semi ready (even with wireframes actually), there’s immediate needs to review, discuss and iterate.
Enter the sketch+Craft + Invision combo:

The Trio

I’ve been having a lot of fun with the immediate syncing option. Maybe too much fun actually. I enjoy making the quick changes on my sketch artboards during reviews and syncing and watching as the Invision preview changes as we talk. Makes me feel so powerful!

Craft is a pretty cool plugin. In addition to the syncing magic, I’ve used the craft data quiet frequently. I have to say though I did not find the library the most suitable tool for style guides.

More on invision though: The inspect feature has been super helpful.
I looooove that I haven’t added specs to any mocks or designs in months. and I hope that I will never have to do that ever again!!
The liveshare feature is pretty cool too; stakeholders have enjoyed scribbling on our designs and for working with remote teams and clients it’s been a great way to discuss designs and mocks.
We’ve even taken it further by using liveshare for user testing. It’s not ideal and we had to be recording with Quicktimeplayer, but it helped in desperate times where we couldn’t get users to have the right setup for moderated remote testing.

Lookback is another tool I’ve used for user testing. Loved using it for in person moderated testing. But it wouldn’t let me try a live test with my ipad- apparently its a too old for it (boo) and I guess I have yet to discover its full potential with other types of testing.

Lookback

Which brings me to the last part of this story:

What I’m still looking for

There’s so many methods and types of user testing, and there’s so many variables that would affect your choice of tool for it (budget, participant recruitment are just the start).
What I’m looking for is something that

wouldn’t require a lot of work and setup from a remote participant
and doesn’t have too many limitations (I’ll accept reasonable ones) on the types of devices to use for testing

Not asking for too much here…

What I’m also still looking for is tool for managing collaboration on designs and style guides.
We’ve considered github, but it seemed too advanced for what we need. Google drive has enough version control for us.

For style guide I’ve tried brand.ai and craft library but so far have ended up manually managing it and making sure the style guide files are up to date.

On UX Tools, Toys & Workflow was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

On UX Tools, Toys & Workflow

Cool stuff, every week

More Articles