Last year I wrote a post that really struck a chord with the community. It was a candid walkthrough on a freelance project of mine. Since then a lot of designers have emailed me about how much value they gained out of it. So I wanted to follow it up with another behind the scenes walkthrough. Every project has it’s own unique challenges, intricacies and set of objectives. From large scale projects, to smaller projects to scrappy 1 day ‘just fucking get it out the door’ production jobs. But one thing that links them all together is a series of processes.
Across 10 years I’ve been the guy in the trenches doing minute detail work (designing buttons, cutting out photos), to design leadership, creative direction and to strategy for large organisations. I’ve seen the clouds and the dirt so to speak. Now as an independent designer it allows me the ability to seamlessly weave in and out of different phases in the design process. Where and when I can provide the most value to a client, or even on my own personal projects. So let’s hop into my studio again, grab yourself a beer or your favourite beverage and without further adieu let’s dig in.
NOTE: This project is the completed continuation of this post.
So first up, let’s snoop and let’s open up my Projects folder. (Other projects censored for confidentiality)
We’re going to go through a project that I did the design direction for. As you can see I have various folders to keep track of things, so let’s delve into what each of them mean.
1. Assets is where I keep all my brand docs, fonts, client imagery, source imagery and any ‘assets’ that assist or relates to the site design/production.
2. Backup is where I keep all my iterations. Iterating on a design is embedded as part of my design process. If I were working with a design team then I would use versioning software – something like http://folioformac.com/ (I don’t use sketchs’ internal backup, it takes up too much space, can be laggy and a bit clunky)
Storytime and TIP: When I was a junior and mid-weight designer the goal was to get designs approved on the first pass. I would vanish and go into my lair and design super polished designs for a few days and do a magic reveal. The goal was not to get feedback or even iterate, but to get it right the first time. (And even when it got approved, I would look back with regret as it needed more feedback loops to make the work even better) The problem was I would try to polish my designs to the max even when it was not the right direction. When you are trying to design a ‘hammer’ but instead you end up designing the ‘best looking spatula’ in the world. Despite how great it looks to you it’s not the right solution when your objective is to hammer nails.
Instead the goal is lots of lo-fi designs that act as a series of conversation starters - pie in the sky ideas, more common patterns etc. That uncover answers through testing and feedback loops from stakeholders and users. It’s easier to align visions as you go through the process collaboratively. When you have something lofi but tangible it’s easier to understand if your vision is in line with the clients and what users actually want/need. Allow your work to marinate and go through feedback loops.
Export: Has all the latest comps that have been sent to the client via invision and redpen. The development team can also see how the site is trekking along and if everything is technically feasible. Usually this is just images.
Inspiration: Where I keep references that can relate to the project and serve as inspiration. This can be mixed media. Either design patterns, images, videos, fonts or even copywriting, articles or good marketing patterns. These are generally sourced and saved at the beginning of a project. From here I will make a moodboard doc as a conversation starter. (These days I also use milanote)
Prototypes: This is where I keep my principle prototype files and exported videos.
Styleboard: This is where I keep my styleboards.
Root: This is where the latest main source files are kept. In this case they are sketch files. I tried to avoid the indexv3_FINAL or indexv3_FINAL_FINAL conundrum. If it’s not the latest it’s in the backup folder.
So that’s what everything in this folder represents. Most of my projects have this project structure – some may have more folders depending on the requirements and some will have less.
NOTE: I actually think the concept of designing in a static environment and then replicating that with code is a bit redundant and very prehistoric. It’s like double the work but that’s how it’s always been. Yes it gives us more freedom to treat it as a canvas. But I think design tools like webflow are step in the right direction. Design straight into the medium, of course that’s easier said than done.
So now that we’ve seen the folder structure let’s take a look at the deliverables and some of the processes that I went through with this project. The project schedule was settled on a 3 week timeline.
NOTE: I always ensure that I have ample buffer time for other projects that I also have running. Don’t work yourself to the ground and learn to manage your time!
This is the exact email that I sent the client. I like to work agile but provide a clear roadmap so clients can know what to expect. Bring the client into your world and your processes. Be crystal clear and communicate the process in a way that they can understand.
Develop styleboard/moodboard - get it over to you guys so we can settle on the Art Direction and move forward together with the vision. We'll iterate as much as we need to, to nail it.
Get all data and analytics from you guys - map out some high level user flows. (Different common journeys users will take, +user personas(WHO are your ideal customers?))
Start with the homepage and product page mobile designs (will send for feedback and iterations) Try to nail down a direction and structure.
Start building up the UI Kit/System concurrently
Finalise - homepage and product page mobile designs.
Finish building up UI Kit/System
Begin rolling out Mobile designs for remaining pages:
Build and test prototypes with users
Start desktop designs using UI Kit/System for these pages:
Keep iterating based on your feedback and user feedback. Finalise changes on Mobile and desktop designs.
Prototype different journeys.
Prepare any relevant dev notes.
Send off source files.
The start of every project is about mapping disparate pieces of data. And then trying to give meaning and form to this data based on user goals and business objectives. This will always be at the core of what we do. The purpose for the Intelligent Change was to improve the mobile experience and improve conversions by optimising the existing site, improving the sales funnel, improving the product presentation and a brand refresh. Before you touch a mouse or even sketch, try to understand these parameters first and foremost. Who are the people you are designing for? And what is the purpose? Deep dive on the brand values of your client and what they represent. I talk about this a lot on this blog and in the other project walkthrough so I won’t repeat myself too much. Think about people first, be human-centric, it is not just art and pixels on a screen, beauty is wonderful but it needs purpose for it to be truly valuable and impactful.
So once I’ve wrapped my head around the goals of the project I move onto the moodboard. This can be prepped with milanote, indesign or your tool of choice. The purpose of a moodboard is a conversation starter. It is a quick and efficient way to represent the Art Direction that you’ve envisioned for the project. You collate all that inspiration that you’ve saved and present it into a doc or board. And without spending too much time you can get buy in from the client. Here’s the moodboard I sent off.
Rather than wasting days working on comps - we’ve got a general consensus on the look and feel with only a few hours of work. The client gives me green light and I move on to the next phase.
NOTE: If we get a roadblock here. I will ask for more examples from the client and move the art direction in another direction. The key here is consistent and good communication with the client. Listen and collaborate on bringing a beautiful vision to life.
Next is the creation of styleboards. You’re thinking what the fuck is the difference Nguyen? Good question. Moodboards are existing examples. When we hit styleboards that’s when we give form to the type, the colours at a bespoke level and start building components that may exist in the site at an exploratory level.
NOTE: Do I do wireframes? Yes I do wireframes for complex apps, sites and experiences. Along with other user insight techniques. But the requirements of this job did not require it (and I quoted accordingly). The existing framework of the site was converting well. What we wanted to achieve was to improve the mobile experience. And as such I would totally feel comfortable extrapolating the areas that worked from the current site and building on top of that straight into the design comps. Sometimes I find wireframes extremely useful. Sometimes I find they are bureaucratic bullshit mocks so people can cover their asses and feel safe about and charge more for unnecessary shit. Once again context. I definitely find value in wireframes and love them for some jobs. But sometimes you're just doubling up on work so you can bill more or keep people busy. *end real talk.
So I delivered and iterated on a few styleboards. And then got the green light from the client. Concurrently to this I used what I had and worked on the structure of the site whilst also working on the user stories and user epics. What would the purchasing and exploring journey be like? Design and think in terms of people and stories not just pixels and bits.
I took a mobile first design approach for this project. Translating the visual language that I had created from the styleboards and extruding it from there. You can almost see some of these could be dragged and dropped directly from the styleboard to build off of.
Continually test how your designs feel natively and for their intended use. I kept referring to how it looked on various mobile devices using sketch mirror.
NOTE: The concept of designing mobile first has been around for awhile now, and whilst I designed mobile first for this project. It is not a one size fits all approach. It’s all about user activity, context and the variables of a project. If it is enterprise software and you are designing a webapp for example, without understanding the user behaviour and data. Going mobile first would be a huge mistake. If for example 80% of users will be using features predominantly on desktops then it would be a missed opportunity not to optimise for that experience. And to prioritise it.
So how do you present mobile screens to clients? In person is great, but the client was in London which is on the other side of the world from me. So not great to fly 18 hours each time to present and come back ;) That’s where our good mate invision comes in.
Designs and comps in sketch, photoshop, figma, XD or whatever have no particular meaning. They are static comps. You have to present work with context to how they will be used. So I shot the client an invision link. If viewed on desktop my designs are framed in a iphone that is interactive. But I always urged my clients to test it natively on their phones. It feels more tangible and tactile this way. The site is responsive but when presenting designs make sure your work optimised for the device the client has. (In this case an iphone 6) To avoid shit storms with things being cut off. How you present your work matters.
When designing a lot of things happen concurrently. It’s not so linear, like this happens, then this happens, then this happens etc. Everything amalgamates and creates a reaction for building pages, systems, prototypes etc. user behaviour and tests help us uncover things that we didn’t account for. They are touch points that can happen at any moment. And whilst that happens, what’s the bigger picture? What’s the point of all this? How will it make an impact?
TIP: That ability to zoom in and out of a project is an important skill to practice and build on if you wish to become a design founder, leader or entrepreneur one day. You need to be meticulous, but you also need to ship and iterate towards a vision.
Concurrently I start building a design system. A grid, a type scale and structure, a colour palette, a components block and sprites that can be reused. There are great resources out there on design systems, I like the full stack design system by intercom . Start using symbols to have consistency across your pages but also allow things to be dynamically updated. Concurrently to this I also roll out desktop designs. These things all intertwine so it’s great to do them concurrently as well.
Remember to not think in pages, but to think in user journeys and flows. How each page, feature or component supports a users objectives, supports a meaningful/delightful user experience, or helps reach a business objective. Remember what outcomes do we want? From here I start prototyping a bunch of stuff for testing and review. I use principle + invision for most of my prototypes.
Prototypes are great for testing, and they are great for experiencing how something feels. Animation supports meaning, so try not to use it too gratuitously.
I also get asked a lot about the imagery I use in my work and how I deal with that. For this project I shot some of the products shots in my studio. I used natural light and colour corrected the colours, contrast and did the postwork in photoshop. I also reused some of their existing imagery. For the hero lifestyle imagery I sourced images that can be used for art direction reference from their users instagram, unsplash and stocksy. There were 8 options in total and under each photo I had a spec for the mood and what we were going for. (Detailed for a photographer) There was a “the Drake hotline bling dance like no one is looking shot - capture little moments of ones authentic self”. ← Yes that’s what I actually wrote. You don’t always have to be serious and businessy. Read the audience and be yourself.
From here I iterated with the client, did some user tests on my end, and rolled out the rest of the design.
NOTE: You might be thinking why no tablet screens? Mainly because of time restraints and budget. But also the client have a great development partner who have implemented my projects in the past. Their attention to detail is fantastic, so I know that will develop the design with integrity and to use my grid system to break down content tastefully.
And then I handed off all files to the client and got paid $10,000. Not bad for a few days of design work across a few weeks. This is only the beginning in the lifecycle of a site/product. Clients will need support after the fact so be there for them. If they have questions about the design or need certain files or anything else, be available to help. Being good to people and caring about a project goes a long way.
Finally the purpose of this walkthrough is to shed some transparency on my processes and share some of my experience. Hopefully this has been helpful to you. If you are interested in learning more please check my course at process-masterclass.com which goes through these concepts in more detail. And finally if you enjoyed this article please share it with other designers. It takes time to construct these posts so I hope it can reach as much people as possible, that way I can invest in writing and creating more great resources.Thanks for reading.