Web Design Process: B2B Startup Case Study

hey everybody and welcome to another case study this time it's a website for a b2b startups in the electronics industry super interesting stay tuned hey everybody what's up it's been a while since i did my last case study this is a project that i've been working on for the past three months super excited to share this with you because it's a really interesting process so i'm sure you'll enjoy seeing the ups downs the crisis everything that happened during this process before we dive into the process and the design i want to give a little context about the company and the challenge so the company's name is protantex it's a company in the electronics industry that was started by people who are super super veterans experts in the electronics industry they founded mellanox which is another huge company in the electronic space recently uh bought by nvidia so they are like really experts in their industry and this this new company is doing something very innovative i'll try to explain it for layman like me and you who don't really understand how microchips are manufactured and created and designed basically what they're doing on a high level is creating and implementing some kind of agents that are put down inside the chip and later on when the chip is going through its lifetime being produced and then later on in the fields they can help them um among other things prevent get alerts before failures and and get all these new information that wasn't accessible before so this is really groundbreaking for people who are understanding who are really deep into understanding how this industry works one of the challenges was here that their what they're doing technically is so complicated that to communicate that fast inside a website where you know that most people are going to you know leave if they don't understand something within 15 minutes that was a big challenge the second challenge which was very complicated to think about was the fact that they basically have four different types of customers in different industries and so you want to talk to everybody but each one of them has kind of a different value proposition and interest in the company and so one of the options was to create four different kind of home pages or landing pages for each of them but basically you still need to tell the story of the company and how do you tell a story of the company when you don't want to tell one story that's relevant only to one type of customer and alienate maybe another type of customer that was a lot of what we were thinking before we even got into the web project we did kind of a process about the story of the company i'm not going to go into that in this video but basically we gave that a lot of thought and that was one of the challenges when thinking about web design when thinking about creating a home page how do you communicate all those things very very quickly so let's get started with the process so when i uh first gets got started on this project with them i did a website kickoff with them by the way as you can see i'm presenting uh the presentation that i presented them is with their branding which i did on on a previous um on a previous project with them and they actually the ceo of the company actually told me when you present to us don't present with your branding present with our branding that that's how you we feel that you're part of the company so that's one tip i got from there so basically the first meeting always revolves around those three things um the goals of the website what content should be in the website and the look and feel and basically it's pretty short presentation it's just like discussion around these points so we're sitting in a meeting we're discussing what do you think are the goals um what do you want to achieve with the website as a company what you're trying to achieve here is it like getting more leads converting people so sales or awareness or hiring so every company might have different goals when they're building their website but also what do you think is the goal of somebody who's visiting the website why are they visiting what do they want to discover and learn about the company are we helping them to do that and also just defining what will be a success for this project in this specific case i can say that the high level goals were to create interest as i said previously because the the what they're doing is so technically um complicated they just wanted to create intrigue around what they're doing so that they can facilitate the discussion later on and also to look established look high quality and stuff like that because a lot of people they were talking with on the phone google's them and they wanted them to see something impressive in a way then we talk about the content and in this case this is basically a slide that i can show most of my client because it's general stuff that might go on a website but in this specific case i kind of change a few things to make it more relevant for them but um we go over this again those are basically top talking points so we we go through them and we think would you want to have blog on your website do you think that we should have show the team and have jobs and and each client usually says something else about each one of those points so this is basically to understand kind of the scope of the website the last thing is to kind of understand their look and feel whether they want to go in terms of visuals or not i also bring up some of my references that i think are relevant for this um for for this project again not in terms of let's do something like this but i want to see how they react to certain things and here in this case um let me show you a few of the examples so two two website that we really liked they really liked and i thought can be relevant were this page this is the on corpse um website actually this was designed by hiko um a studio that i really like and it was actually built on webflow i actually didn't know this when i showed this to them i only discovered this later but i thought this was really nice in terms of you know they use some abstract backgrounds and images to communicate something that is very kind of like data oriented also i like this kind of an abstract animation that helped to convey something like you know there was a mess before and now you can see the pattern i really like how they communicated this vague idea with animation so that was one reference that i used the second one um was this website of plethora which also kind of what i liked here is that they showed something very technical um happening and then notifications around that which is because as i said we're getting now alerts from the chip and notifications from the chip and from you know complex electronic systems i thought this kind of like something in the background that is more like wireframe or technical and with notification on top of that can be very interesting so those are two website that i kind of showed to them and they also felt like again there were a couple of more but those were the ones that i thought were relevant and they also figured out that they were relevant and so we said let's try to work with something around that area visually again we already have kind of a brand book in terms of colors logos and that stuff but what kind of we're going since we're going to use more visuals on on a website and more visualization what kind of website do we want to go i also showed kind of like their competitions which their competitions website which they didn't like because it was too complicated there was too much text on stuff so it really helped me gain the understanding of they were looking for something impressive clean nice and that helped kind of move the discussion along now usually this time we had to break it down into two meetings usually i do this on the same meeting so i also try to brainstorm the structure of the content based on what we were talking on here try to break it down into what pages do we actually need in the website so for the second meeting i i brought this page to show them kind of like i think that at this stage we need four pages later on when we did the discussion we figured out maybe this should actually be three different pages instead of one page so this might be kind of a category of pages but this is kind of like content architecture for the website um and again this is this is a discussion you know i bring this um to tell them here's what i think what do you think and then we kind of collaborate on that also on that second meeting i've presented what i think the timeline for like even more you know i when i did the proposal i obviously gave them a timeline but at that point where we kind of narrowed down the scope that was really like more with fixed date uh when do we think that um we're gonna have everything ready and you know what looking at it right now um development done in march 31. i actually we've actually hit the deadline in the timeline so that worked well after we did that after we kind of had the content architecture and all the content and pages in mind i moved to the wireframing stage so as a first thing i kind of sketch wireframes in my notebook and this is really just because i feel easy to test out different layouts and see how the content will will fit in the page after i did most of the all the pages actually in my notebook i actually move this into let me close this move this into figma let me open up my figma file alright so this is the wireframes that i've created in figma as you can see it's more or less what we have here in terms of structure it's more or less the same thing but when i do my wireframes i put in content even though it's not the final content and i'm not like an official copywriter and in this project we did work with a professional copywriter specifically because i'm not a native in english speaker i have a lot of mistakes in english as you can hear um so we work with a native speaker as a content writer but i did put in the kind of like fundamentals of the text in terms of what i think should be there and the reason that we're working on figma is because it allows for collaboration so i've created those wireframes i've gave access editing access to the content writer and to the client so they'll be able to maintain and update the websites while i'm starting to work on the design so that was the first stage creating all the pages here on um on figma starting to collaborate on them while i was starting to move the design further along so in the in terms of the design so that was one thing that was going on and during that phase i already started working on the visual development of the website so for the visual side i decided to collaborate with mike from creative mints he's a designer based in prague really amazing designer as you can see here from his dribble and he has a lot of he he likes to do a lot of illustrations some of them 3d some of them not and i thought this could be really interesting way to maybe illustrate some of the concepts that are really abstract not abstract but they're very very technical and we're trying to find an abstract way to tell the story of you know an agent in a chip what does that mean you know literally it's code but you need some way to tell the story of what happens once those agents are embedded in a chip so we started talking about collaboration and we decided we're going to be working together and what we wanted to do as an initial stage was to first design just a hero just to see that we have kind of an agreement between ourselves and later on with the client as well regarding the visual style of the website and then later on develop the rest of the website so um let me show you the first kind of round of iteration let me that's actually the first so this is actually the first thing that mike sent me um and so i we we decided together we we had some brainstorming sessions regarding should we do this kind of a vector illustration 3d illustration and we came up we decided we want to go with the 3d way i explained to him kind of like the abstract of what those agents do and how they communicate and you try to come up with this illustration of this microchip with three agents on top that are kind of like radiating and communicating so this was i guess a good start but there were a few things here that are the first one it was really off-brand in terms of you know their branding was mainly white with with blue and uh and orange so the first thing was to really dramatically change the the visual aspect and i think that this color scheme already made the website much more cleaner and and you know much more on brand but also much more lighter and i guess maybe tacky would be the right word um after we did this we started to iterate on this image which i didn't feel was good enough specifically here we have these kind of like radiating towers at the beginning it was something like you know very abstract like this um circles here then we moved into maybe those are kind of like radio towers um and we tried multiple ways of showing those communication um but eventually we said all right maybe this maybe this is these are the right colors and we'll try to stick to that so this is basically the first concept that we had for the hero design and i took this back to the client and uh to get some feedback and also think about how to progress from here now at this point of the process two things happen first one is that because they had um unexpectedly were giving uh you know the opportunity to present their company on a huge event um and we saw that it takes a lot of time to for them to finalize the text we decided to change the scope from launching with the website with five pages to just launching with one page change the structure a little bit let me go back to the figma so instead of having this here as a home page which is basically just you know telling here about three phases um in the chip design and then in the cheap life cycle and then a little bit about what they do and why it matters um try to change that into something that is a little bit more comprehensive but we all only are going to go with one page um at that point at lunch point which is actually today so we changed the structure of the website to this but the other thing is that we understood that we really have to tell the story of the whole um what they call chip lifecycle which is all the process from the chip from it being designed to being produced to being put into a system and then being out there in the world we have to find a way to tell that whole story very very quickly otherwise again if somebody from the the fourth let's say section um comes to the website it doesn't understand that this is relevant for them it might be very very confusing so i came up with the idea of hey let's do kind of an animation that's really going to show that this chip through his whole life's lifetime from it being designed to being produced until it's out there in the world find an abstract way to tell that story um and maybe kind of create kind of a timeline so that people that come into the website the first thing that they see is this timeline they realize that this kind of process helps with the chip throughout its life cycle and so we actually change the layout to this to something like this where we have kind of like the illustration around here a headline here and then we have this kind of a timeline that i imagine would be interactive and at that point i've asked mike look would you be comfortable uh doing an animation like that and he actually told me look you know i can do a little bit of animation but i'm more let's say strong on ui animation rather than full 3d animation so perhaps i'm not the best one to do the the animation as you can see he can model in 3d but to animate and take that into a really video production level it was a bit a little bit too much um so what i did was i reached out to my friend diamo who's really an amazing 3d production studio worked with like amazing clients as you can see here google cloud xiaomi a lot of like amazing projects we've collaborated before and i actually saw some works here on his website with that i thought might be like good references um except this one for example for this mobile device um i'm not gonna show you the whole video right now but there was a frame there where he kind of like abstractly showed the chip inside the mobile phone i was like yeah we can maybe we can do something like that so i reached out to yambo which you know he's always a great guy to work with i was like dude we're very limited on time this was about we have like two weeks to produce this animation that we want to have at the hero of the website and here's the idea so to demonstrate the idea i actually created this um this kind of a mock-up which i really fast fastly created pretty fast on uh on keynote just to show him what i want to do so basically the first step is maybe a chip during its production and you see some kind of notification about it um then it's being part of a wafer which is how you basically design how you produce chips then it's being added into kind of a board a system and then it's live in the field and there are others around it so this is very very abstract i guess maybe um storyboard for this animation that i envisioned um and i brainstormed this with yambo who was really really cool he actually brought up this project from microsoft which is really an amazing video i'm not going to show it but you can see some of the visual styles here um on their behance page this is a project that was done by tandril another amazing studio so he said maybe this kind of visual style would be fitting for the brand because i've imagined it also kind of like white on white and floating around in the air so we we looked at this visual and we said yeah let's try and do something around this so um let me show you how the first renders from yambo came out uh let me open that up okay so the first thing that he sent me were let's open this up all right so the first one is basically this is a chip with maybe some kind of uh agents on top of it floating on top of it and then we're kind of zooming out and this was basically initial idea and he sent me this alongside all kinds of explorations that he did regarding you know lighting and texture so this this is when maybe it's at the agent is actually a hole that allows you to see what goes inside the chip um some more tests visual for different textures and when i saw this i mean i said wow this looks amazing i mean it's really beautiful but it doesn't look like those agents are embedded in the chips and it's really not clear what their relationship is and honestly this this little hole that you did here um is actually more accurate in terms of the concept like what these are so let's try and think about how we can visualize this in this way so on the second round that he sent me um we showed the agent as kind of chips like colorful chips because there are multiple types of chip of agents and you can kind of see like what goes on inside like the electricity here and then you can see this is already when the chip is being placed inside of a board and then the chip is being kind of like this was supposed to look like something like a server farm but um for me so they were this was a good improvement but there were still problems with this design as well some of them were that you know first of all what goes inside here the electronic symbols i know that it looks right maybe like electricity to you but for people who understand chip design this is not how the inside of the chip looks like so that was a feedback that the client gave like we can't do that this way um and also they're not going to be look opened all together and there is many the week the client gave some feedback as to why this is not an accurate representation of what's going on uh in terms of this we wanted to show something a little bit more abstract not like they're being put in a closet or a server farm but really like they're out there in the world i've imagined kind of a fleet of ships like in space like everyone is floating um in different direction so that was the second round as you can see there's many more rounds to come um the third round let's see how third round okay so the third round we came to kind of the idea of putting like leads little leads inside as and then they would kind of maybe open up and you would see what goes in inside of them so that was kind of like the idea for that round let me see if we have that okay and then the fourth round let's see how that looks like okay so this is almost like the final iteration already i probably didn't show you everything but you can see that we have a lead here that opens up and every time you see something else then we see this is actually a wafer this is how you produce chips in kind of a circle thing and then it goes down here as you can see this is not a final render this is just so we can see how this goes and then we have kind of a bunch of ships rolling around so this is almost like the final thing we did we did have um a lot of iteration just to make sure that the layout is fine because i wanted some text here on the left and uh we had to make sure that the illustration is always within boundaries on the right side just to it makes sense on the website this is i'm jumping already to the last version and in the last version i've actually made some notification um this is yeah this is how they come up so those are the notifications that come up this was added in post-production um that actually shows kind of like the data that is being sent out of those agents so at every step you get different different notification different information and this is how the last iteration of the video looks like i think it looks pretty great and it actually has two loops with two different notification schemes and as you can see it kind of runs in a loop so one thing that was very important for us is that it would end on a clear screen so that we can seamlessly loop it into another loop so this was the the the whole process of creating the hero animation let's go back into the actual design so the next step was to take this new design from this the hero concept that we have into the new layout which is this is the updated design as you can see this is not the final renders because uh mike and yambo were working at parallel and i was syncing up everything and giving feedback to both of them so this is almost at the end of the process um mike did hear three types of illustrations here we um were thinking about putting some of the renders from the from the video and basically this was another iteration on the design um we had a lot of feedback on this not actually not a lot but um those icons had some changes both in terms of style and content um this this whole agent section we decided to basically a lot of the feedback wasn't around how the it visually looks but how you how it makes sense to read this so one thing that we decided that we want to do um this is the new version of illustrations here is to have kind of a fixed menu here on the left in this section where you're actually going through those four stages and have that fixed while you scroll through those uh images with notifications on them and the same thing happens here we wanted to show three different types of agents that you can scroll through now this is something that maybe you understand as i'm talking this to you right now but it was pretty hard for me to explain this to mike and also to mock this up in mike is actually working here in photoshop so it's really hard to simulate this kind of an interaction where you have a fixed menu and then the images changes and some interactions happen so this is kind of the limitation of designing with a software that is kind of fixed and i'll show you later what happens when i move this into webflow and how you can really see how this functions so basically this is the last iteration this is actually uh when mike finished he uh send the psd files to me and i actually did the final iteration myself when working with the client based on the feedback so um kind of make sure that notification looks good um put the notifications here on the on the images themselves as you can see and changed a little bit the illustration here and this is basically the same thing well this is but more or less stay the same so once that was ready once the design was ready and approved by the way to show this this static design with the video in the background so when i show this to the client i actually had to show them two different things i just show them the video and i had to show them the kind of the mock-up for the website and tell them imagine that this goes here with the text and with kind of a a timeline on top of it that was pretty it did require some creative imagination in terms of the client trusting me that it will look good when it comes uh together um specifically when i showed them this and it was still all work in progress it did require a little bit of imagination um but i have to say that the clients were super super cool and they were kind of like flowing with me and allowing me the kind of the creativity and the creative freedom to test these things out and make sure that it will look good at the end so at the last phase um okay so let me jump into webflow and show you the last phase where the website is first of all let me show you the website developed so this is how the website look like and what we have here as you can see while the web while the video is playing here i don't know if you can see this on screen but we have a timeline here that's running and shows you where you are in the production process at any any given time so this is pretty cool to sync that with the video is pretty cool challenge to do so those are the agent steps as you can see here as i told you before you can see that we have this kind of a sticky menu here that shows you where you are in the process at all times so this is sticky and those are kind of like changing and you can also use this to kind of navigate which which phase of the process is more most interesting for you also on this here on these agents um steps we have here now you can see that that we're talking about this layer and at this point we're adding this layer so all these things which were actually kind of easy to put together on webflow it was really hard to explain the client and also mike how this would actually work or how i envisioned this to work on the actual website um yeah basically all you can see here is like tiny little interactions but basically this is the website which is complete um also was a pretty fun challenge to optimize this for mobile let me pull up my mobile to show this to you um because the layout had to be very different um to make sure that it works and that you know we couldn't take the video as it is um so i actually had to change the layout to kind of crop i don't know if you can see here this but like crop the video in kind of a circle i had to remove the the timeline because there were not enough space on the mobile to show this um but the rest of the website looks looks pretty good on mobile as well so this is it and last week it was pretty intensive week you know i had to almost until the last day when we put the website live the animation wasn't ready yet the design wasn't finally so everything came together last week and we put the website live last week so that was pretty intense and exciting week to work on the actual building in webflow took between six and seven hours which was i thought were was incredible uh in terms of the result like to pull that off in like six hours it's true that it was six hours across like three days and it was pretty intensive because there were some things here that were kind of tricky to get right but i still think this is pretty impressive and i'm really really happy with how this work turned out i'm really happy to have been like collaborating with super super talented people on this project and with an amazing client that allowed us to do um really creative and and good work i think all right guys i hope you enjoyed this case study i really enjoyed putting it together and if you want to learn how to use webflow to build websites like the one i showed you right now within six or seven hours and making your design business super profitable along the way besides creating an awesome website please check my webflow master class there's a link below this video in the description check it out if you think this can be helpful for you i'll see you on the next case study bye

Channel: Flux

Views: 117,576

Rating: 4.9471889 out of 5

Keywords: design, freelance, tel aviv, ran segall, ran segal, רן סגל, work, life, vlog, startups, case study, web design process, b2b, webflow, proteantecs, process, graphic design, branding, israel

Id: Y1vfnYpOFD8

Length: 31min 6sec (1866 seconds)

Published: Fri Apr 05 2019