My web design process (real client project)

Key Takeaways

have you ever wondered what it takes to transform a company's brand and website to go from basically cookie cutter into an actually compelling digital presence so today I'm going to walk you through my process for that so we're going to start at an audit we're going to get into restructuring content going to get into crafting a cohesive visual system and then bring it all together on a website that is both functional and beautiful but before we dive in just some context subotica the client here is a food robotics company out of Vancouver Canada they have a patented ingredient dispensing technology and they deal with both the hardware and the software so when they first came to our studio find a lot of startups be in the same position where they have basically the shell of a brand where they have just the bare minimum of a logo a color a font Etc and then they have a huge knowledge of their business internally and they do their best to communicate that and their website is based off a word WordPress template and they do their best to communicate all their knowledge and they came to us to basically help bring all this stuff to life and package it all together so through mod my studio we essentially became their design and marketing partner and tackled the brand Evolution their website redesign the product redesign all their marketing Stuff Etc so we touch a lot of different areas of their business but when we talk about specifically their website it's important to know that it's not just an isolated process where like we want went away and did their site while we're doing this other stuff everything's very much a holistic process to make sure that we're communicating the best we can we're making a visual system that makes sense across these different channels that makes sense to their brand and the list goes on but everything is just basically done in in unison and in parallel so I'm going to do my best to walk you through the process building the website and how that extends Beyond just that scope so if you're ready let's dive in we started with an entire brand audit so every project starts with an audit of some level or at least with us and of course that could look at so many different ways depending on um the brand what they want how big their product is what they need from us Etc with subotica specifically their primary goal is to get another R of funding and their secondary goal is to get uh new restaurants as potential customers so since we were touching every aspect of the business as I said we brought into um become the design marketing arm we wanted to see everything from AP bird's eye view so we broke down their business into three areas that we could kind of audit and just get uh just well versed in so the first one is brand we want to get really close to all the decision- making that they had done so far as far as brand decisions we got an understanding of what they liked about their current brand what they didn't like other brands they admire basically what's working for them what's not working for them but also set the basically establishing the ground rules of like here's what is Untouchable here's what we'll need kind of convincing and here's what we definitely want to touch or change so this is important to us so we can one get on the same page but then two so we can actually easily rationalize all the suggestions that we made for brand um and not just hey this looks better trust us then we got into product as I said we did a product redesign so obviously we needed to fully understand the scope of everything constraints um understand how everything works so we could build the best product possible but in the context of building a website this actually really helped us because we could actually communicate well and that is a big problem that a lot of startups have um is not being able to communicate their benefits their Futures and put this in a way that is easy to consume for their two different acies for their funders to know that they trust that their product works and can bring the value and two for their restaurant owners lastly we did this for marketing so that's the third bucket we wanted to understand how they currently communicate their business to their two audiences um how that differs but also they have so many different touch points they have their website they have their marketing materials they have their pitch they have their video walkthroughs they have brochures one pagers uh whatever it may be we wanted to get all of it as uh intake and just understand how they currently communicate it and see where we can improve that so across all these areas we obviously documented what we thought was working what could be improved and a big piece of this also is just like how are other companies in the space um or maybe adjacent how are they dealing with this the same problem of communication how are they um talking about what they do and how they approach the problem how do they approach the solution so that was just getting familiar with the brand and that's super important especially when you're touching a lot of uh different aspects of it but for communication was really the biggest thing here so with all that information we got into website restructuring content planning copyrighting basically what does a site look like without designing it visually we absorbed all this information and we got dozens of conversations with the client we started to put together a structure for the site that made sense to us so you know we want to put them in a better position to clearly communicate um what it is they offering um communicate their business position themselves as Leaders set themselves up for funding um and also for new customers so we have all this information and then I also went and just took a bunch of screenshots of uh some competitors and just other companies that are kind of doing some similar stuff well this is for inspiration for layout and design the visual side of things but also for again for communication um and how we can better uh communicate from their website we took screenshots of every section and communication point we organized them into where I thought they belonged together in a structure so this is just like reorganized current content and grouping repeated items uh into each other so for example they might talk about a benefit or a future like three different ways or five different ways so just pulling that together be like here's all the ways to talk about it how can we better package this up and just be consistent and we got more organized and started to take these kind of areas and put them into sections and group them better then basically what started to form is a highle Content map or a site map of or what have you it doesn't need to be anything formal we're just understanding how these things belong together so looking at this this is a overall structure of what this site could look like from a structural standpoint and here this actually still the the first version of this we had the homepage and the product page as two different pages and that's how their current site or the site at the time was the this is the biggest structure change was we combined the homepage and the product page into one the initial reason why this is like this is because a lot of startups want to separate the company from the product because a lot of company's Ambitions are beyond their single product but I think it's really important for you know and this isn't a a catch all answer but for a lot of startups uh to start off just explaining here's the product and don't worry about getting uh people thinking that your company is just this one product um again there are use cases that maybe make sense but to start just like you're trying to get people's attention you're trying to explain what you do don't worry about uh separating those two things as you grow and you have more product offerings as you um are doing more things in just this one product you can expand and BR rearrange the page structure whatever but to start we decided to just have them uh together and have it on one page so we have this structure we have an idea of all the content uh from what the ex what they have already so we started working with our copywriter to basically bring this site into Google ducks and she's great because even the copy duck she basically is creating a wireframe she's using tables to like organize it so if there's like three benefits she can actually write to make them consistent lengths and like see how it flows which is awesome and it makes my li easier cuz basically this is a wireframe that's done for me obviously super f but it's great and of course after we got this copy signed off on we could dive into design so we have our site structure we have a good understanding getting into The Branding visual style we were obviously in a great spot for the website structure um but the brand of course as you can see needed some love too so we tackled it in parallel with the visual design of the site and just a note like 99% of the time when a company says they need a new website what they really need is a brand overhaul and then a new website um because otherwise it could be like putting lipstick on a pck so taking a look at the existing brand guidelines we know that there's a lot to do and after the conversations with the client we had a good idea of again of what areas we can improve and where we can take it so the initial requirements for the brand was basically to keep the logo uh keep the two colors of that dark Navy and the aqua as the primary um and then everything else they're kind of open to uh but again this is a brand Evolution not like a redesign so a big piece to our approach to the visuals was to make sure that we came across uh sophisticated Tech leaders but also super approachable so for the font for example we wanted to find a sense SF that again really bounces the was Tech Vibe along with being friendly and welcoming and work for both marketing materials and for product DUI so we explored a bunch of different options we landed on ionic and I love this font it really hits that perfect balance however they opted for a free font so we went to our backup which is aspecta which is gray font for the color palette we kept the original color Duo of Navy and aqua but we tweaked the values of it to play together more nicely and created two more versions of the aqua um to have sufficient contrast on the dark and light backgrounds then we added some accent colors were inspired by some fruits and vegetables um what they' kind of often see in the machines and some mut colors as well just add some diversity to the palette this specifically was important for the product um because we needed a handful of colors to deal with um but it translates well across marketing um we decided to use your blue instead of black just to keep things more cohesive and then use reduce opties for opacities for lighter Shades um same thing for the white that way it just takes in the color behind it whether it's on white or beige it's not going to uh conflict with it and we created uh shades of beige to use as we got into photography we identified four areas we could actually Source some stock photos from so the first one is food prep and Bowl assembly basically before and after the machine does its thing then we have the restaurant team so the people themselves and then we have close-up shots of food so fruits vegetables Etc then we got into product photography and we had a few photos to work with of the actual machine as well as some initial 3D renders but we wanted to make everything just feel a bit more consistent and more polished so what we did is we isolated all of them put it on that beige background and added a bit of a aqua gradient behind it and then eventually you get some higher quality 3D renders and then another visual SL photo style that we used is getting more into the fruits and vegetables so we have a style where we do kind of macro food shots but we also added another element to this where we can get um isolated shots of fruits and vegetables add a nice shadow to them have them kind of floating and add some depth to some specific sections when we're talking about the capability specifically around the kind of food You' put in this machine so this just adds another visual layer that we can use when we're talking about the ingredients that can go in the machine and we did a quick documentation just of what our icon style should look like and then lastly we get into our visual device that really is an extension of a core product uh feature so one of the key selling features to the machine itself is the fact that it's modular and it can actually fit into any existing space without having to redo any layouts or Construction in a kitchen for example so we took that concept and created this visual anchor that we can use across product marketing their website Etc um and really tie into the product product this is a key visual piece that um kind of ties the whole site together so to see how this could come to life we put together a few examples of different applications all right so at this point we've done a ton of work and we just got to put it all together to actually make this website so we have a copy deck We have basically a wireframe in that copy deck we have an idea of all the content we have great visual assets and directions so it's just again a design exercise to bring this all to life as I said before this process was not entirely linear so as we're doing the visual brand exercise for example we were still mocking up what the website could look like so we iterated um throughout that process and then as we got to this point of the copy deck done we could actually create more uh higher Fidelity designs and not just conceptual stuff so for example we started with a darker version which we eventually stirred away from so after a bunch of iterations and client feedback we got to a spot everybody was happy with so we were able to jump into framer and start building it and what I love about framer is that I can actually spend time on the kind of micro interactions scroll States hover States Etc so there's a lot of those little details on the site which is nice and then as time went on and the client wanted to iterate more get new assets there's a new video here for example um we were just able to jump right into framer to build this instead of having to go through uh the design process in figma again all right so that wraps up my walkthrough remember every site is different every process is different do what's right for you for your client for the project at hand and if you're interested in exploring more of my different processes or getting deeper into it and really elevating a website game I just put out the web design master class with Academy the link is in the description below I hope to see you guys soon