Today I’d like to share a snapshot of a project I'm working on. I want to share it as a real slice in time before it’s complete, polished and looking great as a case study or a final product. I want to show the messy process of realising and executing on ideas. Things always look perfect or great when you show work in retrospect. Like a cool shot on dribbble, or behance. Or working like a great site or product that users enjoy. But way before any of that occurs the reality is design is a messy process, riddled with a lot of junk before reaching anything worthwhile.
So I wanted to share some things that I use in my own processes with you. That moment when it’s “oh shit I have nothing, omg I’m fraud. To “aha, this is looking and working great. We’re going to hit the client's goals and their users are loving it”.
So let’s start from the beginning before we get into the actionable stuff so you have some context. Because hey context is important. This is a redesign project for another business of one of my existing clients who’s an absolute legend. The great thing about freelancing and being an independent designer is you can choose which clients you want to work with.
First step is to collect as much data and insight as possible. I requested and received analytics on the site, user personas and some reference sites/brands that the team liked. The current site is performing well and were looking to tighten everything up across the board, from a visual standpoint whilst trying to boost and improve other key metrics further. When you work with the same clients it’s great, because it’s not your first rodeo together and you really trust each other. The focus is on creating great work and not on other BS, which is awesome. Making stuff is what brings me great joy, not planning and all the other admin stuff.
Be exceptional at what you do and be good to people. That way people remember you and want to continue working with you, or will recommend you to others. Stand out in a sea of everyone being the same, go the extra mile for your clients and in your work.
From this point I created a moodboard that I sent off. The purpose of a moodboard is to use it is a conversation starter on the Creative Direction of a project. Get quick buy in from a client without spending too much time and to allow quick iterations. Moodboards are a collection of references such as images or videos that capture the essence of the end result that we want.
From here I get feedback from the client and keep evolving the work. So this is where we’re it at now, this is where our snapshot begins. Post this I start playing around with a style board. Style boards display the look and feel at a more detailed level than a moodboard.
When I start this phase, it’s filled with uncertainty and a blank canvas. It’s raw, it’s ugly and messy, with bits of potential scattered throughout, waiting to be explored, refined, tested and polished. It looks like shit to be frank.
Side note: I get a lot of questions about tools, so I just wanted to say tools are just a means to an end. Use what you are most efficient with and what is right for the project. Outcomes, thinking, efficiency and execution is more important. So use what is the best tool for you and the entire project team. Photoshop, Sketch, Figma etc.
So before I get started I immerse myself with the data that was provided. When designing alway remember to think what are our clients goals and what users goals? I then try to really get in the shoes of the users I’m designing for. What I would do is look over the personas. And then I would go to the brands social media accounts. In this case instagram, and will click on followers and customers who have tagged the product/brands. These people are the brand advocates and promoters and I try to view their profiles, understand a bit more about who they are, what they do and how they see the world. Any of these users that match the characteristics of the personas I screenshot different frames to make the personas more realistic. And to not forget that this is who I am designing for. I screen shot these and place it on my artboard. This is your reminder that these are the people that matter the most, that you are trying to delight, connect and create a wonderful experience for.
A great way to get the wheels turning is to think loose and not fixed. This might not work for everyone but give it a go. I start out with referring to the moodboard references and start playing around with some type lockups. Don’t fall into the trap of just running with the first concept and polishing the shit out of it straight away. You've got to let it simmer. Take a break and come back to it a few times, if your work doesn’t look like trash the next day, that you don’t hate it so much you want to beat it with a stick you might be on to something and explore it further. Play around with different options, and use the moodboard as inspiration to push yourself and do things you wouldn’t conventionally do. The styleboard doesn’t deal with structure or user stories yet. At this point it is merely getting the right direction and visual palette together.
If you are adhering to a styleguide you can use the specified fonts but can explore different variations on how it can be implemented with your project.
If you have no set fonts you can start exploring different options. Choose key fonts that you are pairing with, test different options and what best achieves the goals of the project and the outcome you are looking for.
Play around with different use cases and locks ups for the type.
My artboard looks like this.
Not neat, super loose and more of a diamond in the rough. We are looking for clues that can lead to answers. And not necessarily answers of the right direction immediately. It's not pretty I know! The best design process isn’t neat or perfect, it’s iterative.
Then expand on what we have to more solid modules.
Then I’d extend out key modules that are working and then move in different directions and repeat internally.
This project is still in the works and it’s all I have so far. From here I will keep refining a little further and then iterate with the client. Sometimes I’d scrap full directions to see where else I can take it. I try not to be precious at this stage and use it as an opportunity to go wide with potential directions.
So what are some key takeaways.
1. Be clear on your goals. What are your clients goals? What are users goals?
2. Immerse yourself in the shoes of users.
3. Keep iterating every step of the way. Even if you think it’s good, don’t settle and keep going.
I want to highlight that design is an interesting process, it’s messy, riddled with a lot of failures and constantly chipping. There’s that part in between where you have some data, a bit of information that you are trying to weave and connect together as a solution. This is that snapshot and I few of the little ideas that I use to advance to the next step. I hope some of these can help you with your own process.