17
May

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 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 apps valance the crisis is everything that happened during this process before we dive into the process and the design I want to give you a little context about the company and the challenge so the company's name is pretend text 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 electronics base recently 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 laymen 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 in 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 among other things prevent get alerts before failures and get all these new information that wasn't accessible before so this is really groundbreaking for people who aren't understanding who are really deep into understanding how this industry works one of the challenges was here that there what they're doing technically is so complicated that to communicate that fast inside a website where you know that most people are gonna 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 interests in the company and so one of the options was to create for a 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 gonna 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 homepage how do you communicate all those things very very quickly so let's get started with the process so when I first gets got started on this project with them I did website kick-off with them by the way as you can see I'm presenting the presentation that presented them who is with their branding which I did on a previous 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 presented with our branding battle 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 the goals of the website what content should be in the website and the look and feel and basically it's a 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 what do you want to achieve with the website as a company where you're trying to achieve here is it by 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 defining what will be a success for this project in this specific case I can say that the hilum goals were to create interest as I said previously because the the what they're doing is so technically 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 day we're talking with on the phone Google's them and they wanted them to see something impressive in a way then we talked 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 in this specific case I kind of changed 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 hire 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 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 let me show you a few of the examples so – – website that we really liked they really liked and I thought can be relevant where this page this is the on corpse website actually this was designed by hiko a studio that I really like and it was actually built on web flow 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 used 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 was this website of plethora which also kind of what I liked here is that they showed something very technical 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 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 gonna use more visuals on on a website and more visualization what kind of website do we want to go 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 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 and again Lisa's this is a discussion you know I bring this 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 present what I think the time line for like even more you know I when I did the proposal obviously gave them a time line but at that point where we kind of narrowed down the scope that was really like more with fixed date when do we think that we're gonna have everything ready and you know what looking at it right now development done at March 31 I actually we've actually hit the deadline and 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 wire framing stage so as the 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 English speaker I have a lot of mistakes in English as you can hear um so we work with a native speaker as a conscious 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 on figma starting to collaborate on them while I was starting to move the design further along so in 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 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 likes to do a lot of illustration 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 a 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 gonna 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 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 and so I we we decided together we we had some brainstorming sessions regarding should we do this kind of a vector illustration of 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 he 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 an 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 and you know much more on brand but all much more lighter and I guess maybe tacky would be the right word 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 circles here then we moved into maybe those are kind of like radio towers and we tried multiple ways of showing those communication but eventually we said alright 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 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 unexpectedly were giving you know the opportunity to present their company on a huge event and we saw that it takes a lot of time for them to finalize the text we decided to change the scope from lunching 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 in the chip design and in the cheap life cycle and then a little bit about what they do and why it matters try to change that into something that is a little bit more comprehensive but we all only are going to go with one page 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 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 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 out an abstract way to tell that story and maybe kinda create kind of a timeline so that people that come into the website the first thing that they see is this timeline that they realize that this kind of process helps with the chip throughout its lifecycle 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 my look would you be comfortable 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 animation as you can see he can model in 3d but to animate and then take that into a really video production level it was a bit a little bit too much so what I did was I reached out to my friend Dee ombo who's really an amazing 3d production studio worked with like amazing clients as you can see here Google Cloud she owe me a lot of like amazing project we've collaborated before and I actually saw some works here on his website would that I thought might be like good references except this one for example for this mobile device I'm not gonna show you the whole video right now but there was a frame there where Hugh kinda like abstractly show the chip inside the mobile phone and I was like yeah we can maybe we can do something like that so I reached out to young beau which you know he's always a great guy to work with I was like dude were 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 web site and here's the idea so to demonstrate the idea actually created this this kind of a mock-up which I really fast fastly created pretty fast on 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 then it's being part of a wafer which is how you basically design you produce chips then it's being added into kind of aboard 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 storyboard for this animation that I envisioned and I brainstormed this with Yambol who was really really cool he actually brought up this project from Microsoft which is really an amazing video I'm not gonna show it but you can see some of the visual styles here on their behinds page this is a project that was done by tendril 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 let me show you how the first renders from yumbo came out let me open that up okay so the first thing that he sent me were let's open this up alright so the first one is basically this is a chip with maybe some kind of agents on top of it floating on top of it and then we're it's kind of zooming out and this was basically initial idea and he send 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 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 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 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 was still problems with this design as well some of them were that you know first of all what goes inside here the 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 and also they're not going to be look opened altogether 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 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 in different direction so that was the second round as you can see there's many more rounds to come the third round let's see how third round okay so the third round we came to kind of the idea of putting like LEDs little LEDs inside as and then they would kind of maybe opened up and you would see what goes in inside of them so that was kind of like the idea for that round and we 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 a lot of iteration just to make sure that the layout is fine because I wanted some text here on the left and 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 this is yeah this is how they come up so those are the notifications that come up this was added in post-production 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 whole process of creating the hero animation and 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 Mike and Yama 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 I did hear three types of illustrations here we were thinking about putting some of the renders from the from the video and basically this was another iteration on the design we had a lot of feedback on this not actually not a lot but those icons had some changes both in terms of style and content 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 would that we want to do this is the new version oral 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 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 web flow and how you can really see how this functions so basically this is the last iteration this is actually when Mike finish he send them the PSD files to me and I actually did the final iteration myself when working with the client based on the feedback so kind of make sure that an efficacious good put the notifications here on the on the images themselves as you can see and change the little bit the illustration here and this is basically the same thing mom 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 showed this to the client I actually had to show them two different things I had to show them the video and I'd 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 timeline on top of it that was pretty pretty good it did require some creative imagination in terms of the client trusting me that it will look good when it comes together specifically when I showed them this and it would still all work in progress it did require a little bit of imagination 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 okay so let me jump into web flow 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 looked 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 time 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 agent steps we have hero now you can see 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 web flow 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 yeah basically all you can see here is like tiny little interactions but basically this is the website which is complete also was a pretty fun challenge to optimize this for mobile let me pull my mobile to show this to you because the layout had to be very different to make sure that it works and that you know we couldn't take the video as it is 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 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 look 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 web flow took between six and seven hours which was I thought were was incredible 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 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 web flow 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 full 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 bye

Tags: , , , , , , , , , , , , , , , , , ,

34 Comments

  • Dave virt says:

    Awesome stuff. Thank you for allowing us to see the process and progress of your work flow

  • HemaThinnakaran says:

    how much do u charge business for this ?

  • Daniel Barbour says:

    The presentation slides:
    1. Goals
    2. Content
    3. Look & Feel

    1. Goals
    What is our goal for the website?
    What is our visitor's goal for the website?
    How do we define success?

    2. Content
    • Solutions -> Customer Segment
    • Product
    • What we do/How we do it
    • Value (Explore each point)
    • Company (Team, jobs, vision)
    • Updates (News, blog)
    • Resources (White paper)
    • Our Customers/Testimonials
    • Contact
    • Sign up for updates/Newsletter

    3. Look & Feel
    • References to things you love?
    • References to things you DON'T love?

    Great content, loved the explanation of the iterations of the video!

  • Jose Manuel G de Rueda says:

    What was the overall budget/deadlines? @flux

  • Dan Davi says:

    In safari on the privacy policy page, footer menu items not working 🙁

  • M R says:

    Beautiful, wow!!!

  • Magdas Mircea says:

    8:10 busted ! 🙂

  • Parth Sharma says:

    you make me feel so good with colors right now. I hit suscribe before this video ends….amazing work

  • Jeslynn H says:

    Thanks for showing us the process. Looking forward to know more videos as such!

  • Nishant Bilkhiwal says:

    love this fresh new intro Ran!

  • Lionel T says:

    Hey @flux . That's a great videos . Thank you for sharing it . Interactions in the websites are just magnific …

    I've a question … how do you handle all the scroll interaction on the website !? is it a library or …

  • Bazzi says:

    I absolutely love your process! How can potential clients contact you?

  • Diogo Pacheco Pedro says:

    Extremely Cool video and very interesting approach on case studies. You have gained a new Subscriber

  • vigilantezack says:

    If that took 6 hours to build in webflow, is like to watch the whole recording! Lol
    I find page builders to be so opinionated and u fight with them about everything. Then bump into some design need that it can't do, like add data attributes to some container etc.

  • Roberto Maddaloni says:

    This is amazing content I'd be interested in how you create a story in the beginning process.

  • Spak Santonil says:

    goat! so awesome!

  • PostMaloy says:

    do you have resources for how to get good at doing this on such a professional level? i mean Learning the tools (like webflow) is a smaller,easier portion. Its one thing to know how to use the tool, its another to be able to bring out a vision of a companies project to this quality – I want to learn about THAT – the presentation portions, the relationship building,etc.. where do i start with that?

  • Noor Faiqah says:

    A really helpful video for a computer science student like me who's learning how to build websites. Do you agree that web development is a job best suit a person who is both artistic and conventional? These two traits are rarely dominant in an individual and I am one of those few

  • Tristan Bailey says:

    Great job, and nice to see the progression with a clean who worked with the iterations

  • Bartosz Andrzejewski says:

    What's with the logo? Some legal problems? It don't show up on the production site

  • Hui Lin says:

    Great job! I usually present a simple prototype animation to my clients using AE.

  • Fabio Maier says:

    Brilliant!

  • Jaime Carrasco says:

    Amazing content. You're the freakin best man!

  • nikanj6 says:

    Excellent presentation. Thx

  • Ingmar Kühn says:

    Great, helpful video. Thanks a lot for all the insights. Just one question: Could you talk a little bit about pricing a project like that? Not in terms of numbers but how you recalculated after the changes in the project. And how you communicated this to the client.

  • neuemage says:

    FIGMA or LIGMA?

  • Jonnycpic says:

    Nice Video. Thank you very much. You just earned a sub 🤙🏽

  • Sébastien Arbelet says:

    Thanks for sharing! Sorry how long did you work on the project?

  • Kemane Bâ says:

    Wonderfully clean presentation, many thanks! The site seems to have no OpenGraph data yet, is that on purpose?

  • Riley Jones says:

    Love this. Thanks for sharing!

  • Clement Darmadi says:

    So much inspired me as start up web agency… Good luck bro

  • Miltersen says:

    Fantastic work. Thanks for sharing

  • Hallucination revoked says:

    How annoying are your youtube advertisement you have no idea..

  • yc ppp says:

    amazing content! subscribed 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *