We always keep our eyes peeled for new design tools that can evolve how we collaborate as a team, and enable us to deliver engaging, enjoyable products.
Currently we produce the majority of our creative work in Sketch. It’s been our go-to for nearly four years and suits the variety of projects we work on. Individually, we each dabble and explore other offerings out there, like Adobe XD and InVision Studio… which we think will continue to develop and become a brilliant and powerful piece of kit.
We’ve found Sketch’s ability to bolt into other applications—whether it’s for prototyping or version controlling—very useful. Equally we are excited for what’s next and what will unfold throughout 2019. Here are just a few of the production tools we’ve come across that we’re testing out.
Pete, Head of Design
Framer X
I think it’s pretty fair to say that over the years there’s been more than a few prototyping applications to choose from. Marvel, Proto, Principle (to name a few). Even the results you can achieve in InVision and Sketch itself have proved handy at times. InVision are also in the process of totally reimagining their prototype package, so we’re spoilt for choice!
Ultimately all of these applications work well to demonstrate more of a living, breathing interpretation of the design vision that static visuals will inevitably struggle to equal in impact. Static design, in one way or the other, no longer exists.
Delivering impact and insight
Prototyping is key to storytelling, conveying imagination and rapidly presenting user journeys. Clients often see a prototype as ‘the real version’ which is fair enough… which is why it’s an essential part to our creative process. The learnings gained from prototyping can progressively build a large or small-scale prototype that leads to a stronger end product.
So when we first got a glimpse of Framer X, which promised a lot and demoed beautifully, we were keen to test it out and get a real feel for what it can do. To me, it instantly came across a little more advanced and considerate of the users’ preferences than the applications I’d previously worked with.
After embarking on this maiden voyage around this obviously hugely powerful application, I have nothing but great things to say about it. In terms of usability, it’s surprisingly lightweight like Sketch in that it handles large files without providing a clunky experience. It even hooks up to Sketch, so I don’t need to start from scratch with bits that I’ve worked on previously.
Product design that evolves with your skillset
On opening Framer X, you’re relieved to see a relatively familiar landscape. The interface shares many similarities to Sketch, keeping things clean and simple, but advanced in the functions it offers you. These are neatly compartmentalised and cover off everything from the general layout tools, through to motion and journey flow wizardry. You’re able to get stuck in quickly and effortlessly, stitching your product journey together with slick transitions and behaviour effects.
Where I’d say it excels is with the ability to bring together more intricate, bespoke interactions, as well as being able to compose your own through the React ‘code’ component for those that like to dive into Creative Development. Framer X encourages you to think more like an Engineer. To build and deliver a fuller experience, with the transitions and gestures linking everything together, just as important as the visuals themselves.
Creativity is transferable
Initial impressions are that Framer X would slot in perfectly as the prototyping utility for Sketch, rather than a direct replacement. The partnership is seamless, and Framer X is just one of many applications we’re excited about that integrate with Sketch.
It’s very easy to latch onto that flavour of the week hype. It happens… the incredible marketing page has hit you for six, and you now want to use this random app as soon as possible. I’m sure at some point we’ve all been there. And it’s a good thing to stay in touch with what’s around.
Darby, Front-end Developer
Abstract
One tool in particular we’ve adopted recently is Abstract. Abstract is a tool that provides version control for Sketch files. It is essentially ‘Git for designers’. It has some killer features, and in the couple of months of us trialling it on some projects, these are some of the things we are already benefiting from.
Resolving conflicts made easy
Whilst highly desirable, version control is a complex thing. Abstract hides that complexity as best it can, so the process of managing conflicts and making sense of what has changed is made as user-friendly as possible.
One of the biggest wins is the visual comparison that is presented when you need to manage a merge conflict. The ‘Master’ branch with its current version of an artboard is presented along-side your changes. It’s basically a little “spot the difference” game. There’s also an option to overlay these on top of each other, which makes spotting subtle changes a little easier.
Yay, a master!
And as we’re always merging into ‘Master’, there is no question about which is the latest artwork 
We can do away with silly ‘Final’, ‘Final v2’, ‘Final v2b’ filenames.
Branches and commits provide a paper-trail of work
Working with branches takes a bit of getting used to, but it’s a good discipline and you soon see the benefits, particularly as a project evolves. Being as descriptive as possible with branches (eg: naming them after the component you are working on, or even a JIRA ticket) makes it really clear to look back over the project commit history and identify what has been done. No more scratching your head and making guesses based on file modified dates and email correspondences.
Guest access
Clients or PMs can have access to projects, which really works well with our agile approach to design and development. It also saves the requirement to keep on pushing to another tool like InVision or making exports for review.
We’re still scratching the surface with Abstract, but 2019 should see us really utilising it more as we are already finding it invaluable.
Will, UX Producer
Maze
With new and establishing processes taking form and place within the user experience realm such as Jake Knapp’s ‘Design Sprint’, IBM’s ‘The Loop’, and IDEO’s ‘Design Thinking’, we can all agree that we are now focusing, at long last, on the end user’s needs.
However, let’s take this with a pinch of salt. It may be a huge and positive step forwards for many people (to shift their thinking to focus on the end user’s needs), but how many of us adopting these processes are still making assumptions of what we think our end users needs are? And how many of us are actually validating those assumptions? More often than not, time will be the culprit behind many of us not practicing validation.
For us at Kyan, we understand how important time is for our clients and their end users. We are always interested in exploring new ways of thinking and new emerging technologies that can help us ensure that any assumptions made are always validated, no matter how big or small they may be. However, appreciating that time is a tricky beast to tame. That’s why we are getting a little excited about a fairly new emerging web tool call called Maze, which can help reduce assumptions in little-to-no time and effort.
Maze in a nutshell
Maze is a web service tool that provides analytics for prototypes. To clarify, a prototype is an interactive, clickable, visual representation of what the end solution could be. We create prototypes for our clients and their end users to help them understand visually how the problem can be solved, as well as observing their experience using them, without writing a single line of code.
What’s exciting about Maze is that it can help us (and you) discover how real users interact with prototypes by capturing data around the following actionable KPIs:
-
Direct success: Users who complete the tasks using the expected journey.
-
Indirect success: Users who complete the tasks using an unexpected journey.
-
Give up / Bounce: Users who unfortunately didn’t complete the tasks, ie: left or gave up.
-
Time spent: Average time spent by users for each journey and each screen.
-
Clicks heatmaps: Exact user’s click/tap position for every screen per task.
-
Misclick rate: Average number of misclicks for a given journey and screen.
Capturing this treasure trove of invaluable data is actually pretty easy and painless. All that’s required is to create a set of tasks based on the prototype you have designed around the assumptions made. This is then sent to either actual end-users who you know, or people similar to our end-users to see how they interact with the prototype when completing the tasks set. The data is then collected within a matter of hours to analyse and learn whether the assumptions made were correct or not.
Ultimately, Maze will be able to tell us and you how the design can be improved to ensure that we successfully solve problems.
In the New Year will be looking to test drive Maze in our Design Sprints (where time is tight) to help give us better insights as to how our users interact with our solutions and ultimately provide meaningful data driven answers to our assumptions.
If you have any experience with using Maze or another other apps, please do get in touch with us as we would love to have a chat and hear what tools you're using!
