So what’s this game about then?
Multiplayer Online Battle Arena (MOBA) videogames are a hugely popular competitive genre, matched only by their steep learning curve and complexity.
Paragon is the new MOBA from videogame studio (and childhood heroes) Epic Games. In Paragon, players team up and fight others in a battle arena using Hero characters. You upgrade your character as the game goes on by using equipment and item cards.
Planning out which cards to take into battle was a complicated process that needed simplifying to encourage beginners to pick up the game and pros to stick with it.
OK, sounds pretty confusing. What did you do?
We made a web app that teaches the game mechanics to beginners, but allows experienced players to quickly assemble, test and share new deck with the community. These decks can be saved online and then used in-game.
I'll walk you through it. Players start building by choosing a Hero and a Prime Card.
Players browse their card collection and start assembling their deck depending on a desired playstyle — are you Lane Supporter with a focus on Physical Armor, or a Jungler with enhanced Crit Chance? I told you it gets complicated!
We provide information-rich overlays on hover and strong visual cues to help players sort through their collection of cards. (Which can range in the hundreds!)
Setting up your card upgrade paths can mean the difference between success and defeat. It’s a complicated mechanic, but you essentially upgrade your equipment with various stats as the game progresses.
Speaking to gamers in user testing revealed that beginners don’t want to make tough decisions in-game around which upgrades to use, so prefer a fixed upgrade path decided from the start.
Experts like to have the flexibility of keeping a few ‘floating’ upgrade cards handy so they can upgrade equipment based on the flow of the game.
We saw this screen as an opportunity to educate players on when and where you should use specific upgrade cards, and whether it’s a popular choice for your chosen Hero.
What was the most successful part of this project?
The deck simulator. From user testing we learnt that it was the community’s most wanted feature.
It let’s players test their assembled decks without having to boot up the game and play through a 30+ minute match. The simulator is our way of emulating in-game conditions. You can see how strong your Hero will be at any point during the game with any selection of cards.
This one feature alone got the Paragon subreddit really excited, producing comments like…
Just checked out the new deck builder. Awesome job guys I love it. Spent quite a bit of time going through all my decks.”
An entirely new way for me to avoid work and do paragon things instead, thanks Epic!!!!”
This is what is needed in game as well.”
Once you’re done assembling your deck, name and save it out. Visually, the deck cover page switches from dark to light to indicate that you’re out of edit mode. From here, you can publish your deck for other players to see.
Published decks live on the official Paragon site. We were told that the best way to learn is from other players, so we made community a core pillar of the experience. You can view decks by popularity, player rank or compatibility with your current card collection.
What's all this about?
Philz Coffee is a beloved name on the West Coast, known for the large number of unique coffee blends, relaxed atmosphere and friendly staff.
Until now, they relied on an off-the-shelf product to serve customers who like to order ahead and pickup their coffee in-store. They wanted a branded experience that would make this process quicker and easier than before.
What did you end up doing?
We made a proof of concept prototype to show to the CEO, Jacob Jaber, to get him excited enough to sign off on a detailed design phase.
We looked at extensive user data from the previous order ahead app to see that 90% of users always order the same couple of drinks.
With the primary aim being speed, the project would be a success if you never had to open the app. We took advantage of some of the built in features in iOS like 3D Touch and Rich Notifications to reorder your most recent drinks.
But if you absolutely have to open the app, we’ve got you covered. You’re greeted with your recent drinks, ready for quick reorder, as well as a full menu and profile section, presented in the Philz conversational tone of voice.
We were playing around with a way for the app to recommend you new drinks based on flavor profiles, but it had to be scraped early on for scoping reasons.
Seems pretty simple. What’s so special about that?
We might have the quickest order flow ever, maybe? Don’t quote me on that though. The app is so focused on speed, you can order your favorite coffee in 2 taps. Stripping out all the things extraneous to that process, we don’t even have a shopping cart until you order more than 1 item.
Also I’ve never worked on a project where we’ve had such extensive user data to back up each and every design decision made.
Mastercard provides the framework for hundreds of credit card loyalty programs, from smaller unions to larger national institutions.
Currently, setting up a simple ‘spend x dollars, earn y points’ program involves a Mastercard technician filling in loads of different forms strewn across a really badly organized system.
The goal was to make these poor technicians lives easier and cut down training costs for the company.
This is what the old loyalty system looked like…the result of 10+ years of adhoc development with no design oversight
How did you do that?
We looked at the 2 main flows that technicians find themselves repeating time and time again — the creation and editting of programs — and make them as simple as possible.
The work involved nothing less than a complete overhaul of the information architecture of the product. What was once a disparate collection of individual forms with no hierarchy is now a series of landing pages with associated attributes, linked together in a clear parent/child relationship.
The user now doesn’t need to know where a specific form is located, only the partner, program, promotion or product that they wish to edit.
For program creation we introduced a step by step guide that groups all the required form pages together.
Looks…riveting. Anything special to mention?
Seeing that the users of this product use it day in, day out, potentially scrolling through endless lists of attributes and entities, we designed a keyboard-only control scheme similar to a MS-DOS terminal.
Search became an integral part of the experience and less of a secondary function, helping to reduce the time spent scrolling around pages, looking for specific entities or attributes.
This decision informed the design of the combination breadcrumb/searchbar behaviour, search results pages and focus states.
So…banks. Not the most loved of places.
Millenials really, really distrust existing financial institutions. Startups are using technology and a clean reputation to drive a new breed of spending and savings services to this demographic in ways that big banks like Chase could only dream of.
First off, this is quite a difficult project to showcase, as my role began after an earlier scope of work which involved a lot of user research and exploration.
As part of the target demographic, I found myself at odds with the decision to focus on receiving rewards, or ’Swag’, as a main pillar of the experience, instead preferring to serve relevant financial education and product offerings through usage of the app.
We eventually pivotted away from swag to focus on education and the idea of your app being your trusted financial advisor, but due to internal shifts, Chase shelved the project just before the detailed design phase was due to begin.
Alright ya bloody snowflake, sell me on it.
Well firstly, imagine if your banking app looked cool and wasn’t just a list with scarily small numbers.
Inspired by the work of Massimo Vignelli, we created a 3 panel framework with bold typography which elevated your money, rewards and challenges to the front page.
Another framework experimented with using Emoji and friendlier language to add some character to the transaction pages.
Visuals aside, we imagined a world where you could complete challenges designed to guide a total beginner on the path to financial fluency.
These challenges could start with opening a savings account and depositing $100, to signing up for a credit card and paying off the whole amount in the first month. Promoting financial literacy soon became a reward in itself, rather than offering a free coffee at Starbucks.
What if money and I aren’t friends?
You’d really like the Stash feature. You can feel like you’re saving towards something, rather than being told there’s some abstract number you should reach.
Using a combination of contextual advice, action and promotion of relevant Chase products, saving for a rainy day, or even a vacation, isn’t a daunting task anymore.
It’s all about reducing the friction to transfer money to a savings account. Had a big night where you spent too much money and feel a bit guilty? Another idea is to absolve your sins by tapping to MiniStash a dollar at a time into your savings account.
Even though the project died a death, it inspired me to take a look at my own finances and create a system for budgeting and organising income and outgoings.
I created a Google Sheet Template (download here) which takes your monthly income and subtracts outgoings and a savings goal, then divides the net result into days of the month. This gives a fairly accurate representation of how much I can spend daily without cutting into that savings goal.
If you don’t spend a lot on any given day day, that ‘play’ amount gets carried over into the next. I started to quickly see when I wasn’t on track for the month, and more importantly, how many days of frugality it would take to get back on track. After 6 months of using this simple system, I’ve learnt the value of keeping track of every purchase. It helps to instantly see how a decision today will impact the future.
Nokia…Nokia….hmm, nope, doesn’t ring a bell
Oi, the 3210 was a classic. Cast your mind back to 2011. The iPhone hadn’t completely taken over the world yet and Android was still building momentum. Microsoft had just bought an ailing Nokia, rebranding them to be the flagship Windows phones.
There were plans to open brick and mortar Nokia Shops, akin to the Apple Store, and have some cool interactive experience where shoppers could look at the variety of phones, accessories and apps on offer.
Nokia approached Method to design such an experience.
So what did you end up doing?
We designed a series of concierge apps to run on touchscreens in-store. These apps took visual inspiration from the Windows Metro design language, and accomodated a large variety of phones and accessories.
A conciege service helped retail staff provide one-on-one advice to help the customer identify the right mobile solution through interactive filtering, comparison, and demonstration. Sadly the stores ended up just being a glint in the eye of some Nokia exec, but the apps actually made it to Nokia World 2011 in London, where people could browse through.
That’s a shame :(
I know, but this was my first project at Method, and my first digital platform. It was a great learning experience (I learnt what UX was from a guy who used post-it notes and string to plot out the information heirarchy. Madness.)
Facebook Blueprint is an online education platform targetted at teaching small to medium sized businesses how to successfully market themselves on Facebook and Instagram.
Blueprint provides courses, typically ranging from 30 minutes to 2 hours, on everything from creating a Business Page to using Messenger to directly communicate with customers.
Prior to creating this app, Blueprint only existed as a fairly outdated website. A lightweight, self-contained experience with the ability to take courses offline was required.
What did you do?
As the target audience is primarily small-to-medium sized businesses in developing nations where phone data might be limited, it was important to make browsing and adding courses to your list as lightweight as possible.
That meant no uneccesary images in the app. We brought brand character to the lesson tiles by adding the bespoke Blueprint typeface to the background.
Scrolling through a course reveals modules designed to handle a variety of content types like step-by-step slideshows or interactive Q & A widgets. If the user finds a particular paragraph interesting, they can highlight and bookmark it for later reference.
At the end of a course, the user is encouraged to take a knowledge check as well as rate the content. This helps improve the quality of the courses and improves Blueprint's recommendation engine.
User progress is tracked in the profile section where light gamification elements aim to encourage progression and promote a sense of achievement.
Anything special that you had to consider?
Sometimes the hardest thing is just getting started. With a rapidly expanding number of courses, and the varying degrees of experience levels Blueprint caters for, we had to make sure we serve the most relevant courses to the individual straight away.
The onboarding experience has a Messenger-like chatbot which guides the user to the most pertinant content in a simple and friendly way.
Who, what, where?
SourceMedia owns a bunch of top media properities in banking, healthcare and accounting, both in print and digital. Some properties, like American Banker, date back as far as 1836, and are considered an authoritative opinion in their relevant fields.
Unfortunatly, with age, comes a loss of beauty, so these properties needed a fresh reimagining to bring them up to the standards expected of top news sites nowadays.
The challenge was to create a product flexible enough to handle the different business and design requirements of each property, with the ability to easily apply individual branding to each.
25 websites? Isn’t that a bit excessive?
Well, yeah, but it just means you have to design everything as a smart template. There would be minor differences between each site, like typography and color, but the structure would remain the same.
We used American Banker as the one property to lead with, the most popular, and has some of the most diverse content. If it worked with AB, it would work with all of them.
We designed these fully responsive, day-parted sites that could handle a variety of articles, slideshows, listicles, infographics and adverts.
Honestly, that was the most interesting part for me. Trying to design around the business requirements of ad placement and time on screen was a fascinating jigsaw puzzle.
Sometimes the requirements were a bit insane (3 large ads on one article page), but trying to come up with an elegant solution — often using scroll tricks to get them out of the way at the right times — was pretty interesting. Gotta keep the lights on after all.
So this was a pitch for Beats by Dre?
Yeah, we were asked to reimagine what the Beats website would look like if they became serious content producers.
Don’t they already make content?
Yeah but it’s currently just short videos, usually attached to new product campaigns, hosted on their YouTube channel. We imagined a unified space where video content could exist with curated articles and playlists, organised and released around the concept of frequent ‘Drops’ (like new mixtapes, clothing)
How’d it go?
Unfortunately, we didn’t win the pitch, but I’m proud of the idea. There’s something nice about being intentional with the amount of articles you release on a digital platform at any one time, being somewhat opposed to the endless stream of content available in most other places.
You’re telling me there’s more to hotel television than watching binge watching Gigolos?
Not too much more. Marriott wanted a brand new interface for the thousands of LG set top boxes plugged into TV’s across the nation.
What makes this worthwhile?
Above all else, we had to make watching TV the primary use case — either browsing live channels through a slick EPG, or by connecting to an on-demand service. The interface also connects with the hotel you’re staying in, offering concierge, food ordering and relevant notifications pertaining to your stay.
What were the challenges?
The ‘attract loop’ gave us nightmares as it rapidly grew from non-existance, to a small consideration, to becoming the centerpiece of the interface. It’s a way for Marriott to introduce some advertising revenue by showing sponsored content seperate from the main TV watching experience.
An earlier concept which dialed up the brand and brought notifications to the welcome screen. This was a favourite until we learnt that the attract loop had to take up a more prominent location.
A lot of work was put into the functionality and the motion design of the notification pop. It had to be noticable and clear, but never feel obnoxious or outstay its welcome.
As a christmas gift for clients, Method wanted to make a cookbook app which focused on the experience of dining beyond just taste.
Each person in the studio submitted a recipe and a story relating to that recipe, whether it was a cocktail on a first date, or a childs failed culinary experiment.
We tried to make this as immersive as possible, and avoided using a traditional navigation — which always ends up making things a bit of a nightmare. The visuals were created through combining Method's colour palette and penchant for bold, playful UI.
Even though the design was completed within a few weeks, this languished in development hell until it was eventually put out of its misery.
A big ol’ juicy e-commerce site huh?
Yup, Aldo wanted to be brought up to date with a fully responsive commerce site paired with their brand ‘wink’.
Brand terminology daahling, you wouldn’t understand. Not really, it just meant that the designs had to exude this cheeky irreverance mixed with a clean, contemporary aesthetic.
Clean design we can do through beautifully spaced serifs and judious use of white space. The wink came mostly through how the site moved. Extensive motion studies were made, ranging from loading bars to page transitions to illustrative demonstrations.
Designing to a AA Level in W3 accessibility can really suck the subtlety right out of design, but I think we did a good job of balancing stylish with legibile.
Anything else to know?
We spent a lot of time making sure the checkout page was as quick and seemless as possible, to prevent dropoff – a problem with Aldo’s previous site.
You’re way too poor to be dealing with the opera!
Ah, that’s exactly the image that The Metropolitan Opera in New York wanted to shed. Opera shouldn’t be some stuffy thing just for the elites – the timeless stories are relevant for young and old alike.
The Met approached Work & Co to design a new site that would address this problem, on top of providing a smooth and enriching experience for those who are already fans.
How did you do that then?
Extensive user research was conducted to see how people discover, selected and viewed opera. We designed a visual system inspired by the Opera House itself, where white is used for informational sections (mimicking the lobby area) while black is used for lights down experiences like the ticket-booking flow and watching videos.
Tickets can now be purchased on any page using a persistant event calendar, and the booking flow helps surface the best ticket available for any budget. The Met had such a huge archive of video, so we designed an on-demand service so people could watch previous seasons from the comfort of their own sofas.
So would you actually go to the opera now?
I did! I saw Aida a few seasons ago. I used the production page to check the story of each opera. The sets looked cool, and the story is pretty timeless, but it was good to know the duration and language it was going to be sung in as well.
This must have been a designers dream, right?
As type foundries go, DaltonMaag is one of the most revered and globally recognized ones around. Their work includes custom typefaces for the Rio 2016 Olympic Games, Intel, Lush and Nokia, as well as 20+ retail fonts available for direct purchase.
This new site should be a place to test and purchase typefaces from their library, grant a behind-the-scenes look into the studio, as well as draw attention to their extensive body of commissioned work.
So what set this apart from any other type site at the time?
DaltonMaag was serious about being the first place a large company looking to create their own unique tone of voice should go to. We designed an in-depth detail page which goes into the making of each typeface, showing off those (bezier) curves with glyph sets and in-use examples.
We also made an immersive typetesting tool, which in one tap transports you into a fullscreen canvas with every DaltonMaag font available for you to try.
What’s your favorite feature?
We worked extensively with the client to come up with a system where anyone with an account can log in and actually download the font files, free of charge. Typetesters are great and all, but nothing compares to using the real thing in your own designs.
The purchase flow had to allow for some fairly complicated licensing options. Each typeface can have a seperate desktop, web or app license, each with their own quantity and duration.
What’s this all about?
As part of a big push to promote the design studio, Build, to larger clients, we shot brand new photos of the best work and created a beautiful look book.
You can’t go wrong when the work looks that good
Nope. The book has all the design-porn features you’d expect from a studio like Build — multiple coated/uncoated stocks, Pantone hits, subtle embossing and a meticulous approach to detail and craft. Cat photos by Jazon Tozer.
Was it succesful in attracting new business?
I’m not sure, I wasn’t around for much longer after completion. It had been featured in a ton of design press though!
The kind lot at Spin let me work on these flyers for exhibitions happening at the Middlesbrough Museum of Modern Art. We tweaked the fonts Le Corbusier and Gravur to create our own subtle variations whilst keeping the design simple. Three pantone colours and a subtle embossing completed the look.
It was a great lesson in precision and craft, taught by some of the best guys around.
A brand identity for fashion laboratory Studio Nancy Tilbury. Nancy's work revolves around highly futuristic techniques and concepts – and her practice ranges from teaching, to experiments with 'living fashion' for global technology brands, to costume design for major pop acts such as the Black Eyed Peas and JLS.
The logomark was derived from 'stitching' together the letters S+N+T and flowing a curve through the letterforms, like an oscillating wave.
Typographic exploration and branding for the final year degree show in London where the theme was 'In Progress'.
A zine with an essay on what nation-state borders mean in an increasingly interconnected world. This stemmed from my borderline (gettit?) obsession with maps and how countries get their outlines.
I was asked by Forage Press, a site which asks people to create original artwork inspired by a musical subject of their choice, to contribute.
I did a piece about my love for videogame soundtracks old and new, and how technology at the time influenced how they sounded. The main piece of work is a 40 minute mix, it’s a love letter to my childhood. Read more blurb about the piece here.
An exercise in data visualisation. The consumption of 2 days of food was documented, with the resulting excretion captured, moulded and cast in polyurethane. A collectable toy for all ages.
By photocopying one Bachelors degree in Graphic Communication (2/1) from Bath Spa university onto itself several times, the artist attempts to recoup the financial losses sustained through aquiring a university education by applying transformative processes to the official certification, obscurring its original meaning, and converting it into a commercial object.
‘Voided Value’ is available to purchase at a cost of £7,052.29. Price is subject to rise in accordance with UK interest rates.
The parks, tree linings and fields of London, Edinburgh, Cardiff and Belfast were traced, CNC-milled into concrete, where moss was then planted into the recesses. What was left is a living celebration of green space in our inner cities, with London being the greenest city in the world for its size.
Over time, the moss would gradually grow, closing up concrete gaps and serving a reminder of the power of nature.
Art catalogue for the Fine Art students of Bath School of Art & Design.
A newspaper format with a twist. We purposely grouped all the artists statements together on the cover spreads, which gave the reader the option to remove it at a moments notice, leaving behind a lovely, large image-based newspaper. Because lets face it, who isn't embarrassed about what they wrote last year, let alone as a student.
Poster for a lecture at Bath School of Art & Design by artists Jurg Lehni and Alex Rich. The artwork features strings tied to the hammers of a typewriter, alluding to a manipulation of machinery common in the artists work.
Poster of a crumpled up piece of A4 paper screenprinted on a clean sheet of A4 paper.