Web Design Case Study (SF Designer)

hey everybody today we have a very special episode it's a web site deep dive case study just like the ones that you love it's going to be incredible I'm sitting down with will will is a designer from San Francisco he used to work at Google until recently where he went on his own to become a web designer and he's doing super great he's gonna go over with us on one of his recent project we're gonna talk about everything from strategy wireframes visual design development you're gonna love this so enjoy this video hey everybody and welcome to a super interesting deep dive on a web design we're gonna go with will here super talented designer developer and he's gonna go through everything that went happen in this really interesting project so we'll let's get started give us kind of an intro to what this project is who the client is and what you are trying to achieve with this web design absolutely Ren thank you so much for having me it's a pleasure thanks for hosting us in your beautiful house me gustas tu casa nice great so this is a web flow project so they reached out to me because they wanted a brand new website designed and built in web flow dot and so before we go into the actual final result here we're actually going to talk about how we got to this and then reverse engineer it so at a very high level the company's called so far ocean and what they do is they build connected oceans through hardware and software technology so if we look at the actual beginning building blocks of any web site or any digital product we're like can I interrupt yeah so I pretty much understood what the company is about about why would they need a new website or why would they approach you like do they have a previous website or what was the reason for the project good question so the web site that they were currently working with was great it was functional it did what it needed to do from an aesthetic standpoint but from a user experience standpoint it felt short of what their goals and so what they hired me to do was to come up with a new strategy essentially a new way to highlight their product okay yeah all right so how'd you get started yeah absolutely so essentially what we ended up doing Chris and I actually he's the marketing manager the director level c-level guy who was my direct point of contact he came up to me and he said hey here are the things that were struggling with here's what success looks like and of course I had to open up with him and say hey you know we can make your website more beautiful but is that actually gonna return the results that you actually want like what is the ROI because we can hire someone more junior to make it more pretty right yeah so I needed to understand what the business value of it one year out was going to be for that client and did they have clear answers for that they did unfortunately I worked with a professional and I typically like to work with professionals that you know know exactly what their end goal is going to be and if they don't know we can unpack that together but I don't like to start projects unless we can define what success looks like do you do that as kind of a strategy session do you do that before you kind of send out proposals or only once you they've kind of hired you then you go out to figure this out I usually do that before okay because if I can't if I can't imagine myself doing this job for them and defining what you know the next three months are gonna look like then it's gonna be really difficult for us to work together got it all right so what was success in this specific project absolutely so they were coming up with a couple new product lines and so they said okay we're doing a new product line for sure a couple of new product lines but we also want to take what we currently have and then elevate the current products because as the site stood before it was very difficult to you know highlight or learn more about the product itself you got it all right so they've hired you you understand kind of the goals how you get started sure so typically whenever I get my hands into a project the client and I have already defined that you know you're the right guy here are the things that you're gonna do I don't like to take on projects that I don't know for a fact that I can deliver on the expectation set by the client and so the expectation for the client was well I know you're a UX designer and I want you to work on the whole new reimagined like architecture of our site from beginning all the way to the end that's not visual it's actually not web flow related at all it's mostly about what buckets go where okay so that way the users mental model matches that so how do you do that sure so we essentially what we ended up doing is we started out with a site map and typically that's the way that I like to start because once we define the site map we kind of know exactly what we're trying to do at a 10,000 foot view so it's kind of like building a home right we know that we have a bathroom we we know we have two bedrooms what's in the bedroom we know the bedroom has two closets or it has a bathroom that's kind of the idea here and so this metaphorically speaking is like the blueprint of a home so do you come up with this together with them do you do this and then present it to them how does this come to me to happen it depends on the client sometimes they have it already okay sometimes I have to do it for them okay and so in this case what we ended up doing is once we had the site map together we kind of collaborated and said you know what if we did this instead of what we currently have so meaning what if instead of doing static pages we can leverage web flows CMS which is extremely powerful and what that does from from a client's perspective is that they can focus less on building new pages and building more content okay all right okay so what you're showing I can see that you're working within figma do you create this thing with figma or do you just use it to collaborate on I can see comments here or what's going yeah yes so the reason why I'm showing this to you here is because this to me is one of the most meaningful experiences while working with me it's clear communication from the very beginning all the way to the end and so as you can see here once we define the site map there was a discussion around okay let's dig deeper you know what is the CMS collection actually doing here what are the edge case right edge cases because there's usually more than one and then from here we can unpack the project a little bit more and this is the part of the communication strategy that I was referring to earlier okay so let me see if I got this right you've kind of brainstormed this structure together you went ahead and put it together visually and send it over in figma so that you can guys start a discussion on this and in common yeah this is by the way I didn't ask this project was done remotely or is it you're based in in California where's the client based on the client is in California as well in San Francisco okay got it so you were working face-to-face or remotely or along remote or remotely all got it okay yeah so essentially what ended up happening is when I create a project with the clients with a potential customer I say here's a link from this moment until the very end of the project all you have to do is click on this link and you'll never wonder where you are everything everything happens within figma yep okay got it all the documentation all of the low fidelity designs high fidelity designs all within figma all right so you have this base structure for the website do at some point get an approval for it how do you know that this stuff is done and you can move to the next step right so this to me is a clear indicator that we're doing things right so if something is documented and we're saying we're gonna move forward in this direction now there's a clear anchor in the ground that says this is a stamp of approval we're ready to go into the next phase and so I work in phases with clients okay as they say guesses make messes and professionals have a system or a process that they follow this is the first step 10,000 foot view the next step which this is what's helping us move into the next step is you know the low fidelity based off information architecture and the taxonomy of the information and how everything will live together so we don't by that you mean wireframes yeah yeah basically saying okay you know we have a home page but what's gonna go on the home page it's not so critical to get into that here okay but we do need to know the technical aspects of you know what we're doing here and at what point do you kind of align on the visual direction I saw that you have here on board for inspiration at what point does that come into the discussion yeah good question so immediately after I've kind of architected the system the 10,000 foot view what I like to do is say okay well now that we have a clear direction on scope of work let's talk through what what inspires you as a company what are the sites that you love internally that you're like this site this company does it so well it can you ask them to send you references later or you bring them on the table I do booked ok yeah because it's it's naive to assume that you as a designer have all the answers at times the client may say hey like we know the look and feel and the client knows themselves better than I you ever will yeah and so they kind of shed light on that got it yeah all right and so that's what this is they kind of put together a list of you know websites and customers like for example here's an indicator of you know an underground mechanical object that you know has text on the right-hand side well we didn't copy this it was enough for me to influence you know the next step which is the low fidelity design essentially right that all right yeah ok so what else do you do you take on from this inspiration is it callers is it you know typography the visual types what do you use this for that's a really good question all of that okay all of that so to me the way that I look at design it's it's a language especially visual design and it communicates an emotion at the end of the day so whenever someone looks at this screenshot for example does it communicate enterprise or does it communicate consumer consumer based products like these are the types of discussions that you should have and so they wanted to move away from like you know these types of like abstract shapes over in the corner these are popular but it's not their brand it's not their character that persona that they want to communicate in the market by the way I did not ask you a lot of clients sometimes come up or when they come to you they come with a baggage of the brand language colors and kind of they already have something that they work with in this case did they have something that they wanted you to keep in line with were you free to do whatever you want fortunately for me I did have brand guidelines okay yeah with colors typography so wasn't a complete redesign of their brand but it was it was the type of thing that was flexible they weren't so stuck on their current brand I got it yeah okay that's sounds ideal yeah all right yeah and you know one more thing I'd like to point out during these early steps I like to talk to the client about you know how do you imagine this relationship to work well and typically I ask questions like do you want to be the person that tells me what to do or do you want me to be the person that decides everything is that does that go before you get started within the relationship before you that goes during the visual design because visual design is so subjective I can create a a you a user experience that is amazing okay and we can associate a number to that this site converts X amount of users more or people were able to find the information 10 times faster than they were based off the previous design but aesthetics is more of an acquired taste okay right and so for that you have to be able to say you know I don't want to step on your toes if you know exactly what you want let me know okay and we can figure it out got it so what was the relationship like in this case it was definitely a mutual agreement that we were gonna do both a little bit of both yeah they know that I'm the professional but they know that they have a vision and you know typically that's the right way to go okay so what were the main takeaways from this inspiration phase I mean you you talked about not using those little abstract shapes or absent decoration what what were they excited about well what did it say yes this is what we're gonna go with yeah for sure so you know there's no project that's perfect and I'll be honest with you there was a little bit of friction during this phase because some of the inspiration that I pulled together was not in line with what they wanted to do moving forward as a company okay and that's totally fine that's part of the process for sure right and so what they came back to me and said was you know these are great but it's too animated it's it doesn't communicate you know sophistication in a way that we're trying to do and it's it's really about the core value of the company they wanted to go more enterprise and something like this as it is you know a visual designer might look at this and say this is amazing this is a great aesthetic it didn't and it didn't go in line with what our goals were and you have to respect that as it is I got it okay yeah so did you end up having a reference for what they were looking for or did they come up with something yeah so they sent me several examples of sites that currently exist in the market and while I'm not someone to copy I did get influenced from these sites got it all right okay so what's the next steps you've got this covered you have the site map how do you get on to the next step to the wireframes what happens there for sure so very quickly once we kind of define you know here's the idea around potential looks and feels that we can do here then I like to go very very quickly into the actual components the building blocks and typically I like to start with typography the main reason why is because clearly you know web design or design in general as a profession design is trying to sell things or trying to make things more easier for the user and a huge part of that is communication it communication falls down to I mean at the lowest level communication is typography how do you communicate some and you know everyone understands that you look at a big headline clearly you know what the company does right and so that's why I start with typography and make sure that that's in line you got it okay but but this is I mean to me it looks a little bit out of context like how do you know that this is good versus something else I mean you said that font wise like they had something to work with so how can you I mean how do you know that this is good right at this point yeah sure so different ways to explain this so one of the most important ones is search engine optimization what are the headlines right or going a little bit further from an an accessibility standpoint clearly a screen reader when someone uses that who has a visual impairment they're gonna tap through or they're gonna use certain keyboard shortcuts that allow you to only focus on the headlines and from from a person who has that type of perspective while navigating a website that's how they use the site and so it was very important for me to define from an accessibility standpoint first what are the headlines and how do we communicate that with different visual hierarchy the font has to be smaller larger and so these I would consider the building blocks from an SEO accessibility and purely communication standpoint got it all right so the good question is all the wireframes yeah let's do it let's do it what's going on and wow this looks intense there are quite a bit of wireframes here let me get out of the actual commenting here and let's go straight into to me what a wireframe is or and what it should convey so while I do appreciate paper prototypes or paper wireframes I've learned that not all clients understand what that means whenever you have a you know a square and so what I try to do is I try to get closer to the high fidelity while still maintaining you know clear balance of you know this is not an image this is going to be an image at some point but it's not gone through just great shapes okay and so what that allows us to do here is really focus on the navigation layer which we talked about during the site map right and so one thing as I mentioned earlier in the conversation they had this idea to bring in you know two more products and the idea here is that that's a great how do we highlight it how do we make it accessible for whoever is landing on the site and so instead of going with this solution which is data and hardware we decided to go with data and hardware under a products tab and that made the most sense from a hierarchy standpoint from a business side what can you because I'm not super familiar with products with the product in the company why did you make this decision why was that better absolutely so for example let's say you hover over data with the solution yeah now you're only seeing data in this solution when you hover over hardware now you're only seeing hardware why not just have a solution where when someone hovers on it that okay so exactly by data you mean solutions that are related to data correct got it okay so I think it's much clearer when it's under the title of products because otherwise data for me that's a little bit out of context right exactly okay but at least we can kind of create these two solutions that made the most sense do you show them both and have a discussion about this I was like okay yeah we have a we had a lot of discussion around this because essentially this is how someone will navigate their site right and find the right information okay and cool so moving on from you know obviously from the navigation layer you also have to have the footer and we tried different solutions for the footer one that made the most sense was this one one thing that they really wanted to highlight was the sign up for newsletter they wanted to get more people in there and while we could have moved this down to the bottom I figured you know we read from left to right unless you're from Israel and you read from right to left so I figured you know might as well do the branding on the left and then immediately hit him with the call to action to keep the people in the loop right yeah it makes sense well yeah that wasn't the first option that we explored this was another option mm-hmm this one was a bit aggressive in terms of you know a call to action he had the call to action was a bit aggressive and it's also very cramped so the solution made the most sense for them mm-hmm that's great yeah I love it that you always show do you always show to options or sometimes even more than two options yeah sometimes I show three sometimes I show five depending on the complexity of the the work got it I think like two options is easy to kind of grasp so it's really easy to see this versus that where the key benefits are or worth I mean I feel that when I show too many things they I get lost within too many options this is very clear to me when you do wireframes for pages like the home page and stuff like that what is your process for for that do you actually write the copy or can we go over the home page order yeah actually that's probably the best transition here so I don't write copy okay yeah typically the people that I work with are either founders of the company or some kind of marketing manager who has a dedicated copywriter in-house got it yeah and while I do like to write copy don't get me wrong that is part of what I can offer I've learned that going back to what I said about the company the company knows who they are way better than I ever will and so I give that that ability to really you know architect that language but yet are the content writers part of the process or they're they're joining later on only in the development what at what stage do real content goes into play such a great question I've worked with copywriters that say give me the design and then I will create content for that design and typically I don't like to go in that direction mostly because the copied the information is critical that's the that's what design is right the communication aspect of it and then we can figure out the best way to tell that story so you don't go into a film and then start recording right where I have a blueprint right you have the actual script and then we shoot the film so I try to communicate that early on because design is intentional and if I don't have the copy or if I don't know what they're trying to communicate it becomes art and I'm not an artist and the designer okay so you do are they kind of shared like are they watching the the the wireframes and participating like how does that collaboration looks like exactly yeah so I give them access to figma okay and sometimes they'll just say hey like I don't know exactly what the design will be but here's this thing and you know I'm just trying to communicate it visually you know the reason why I love figma so much and I'll show you I actually work with this gentleman the the guy at so far ocean and he didn't go as far as creating designs but he actually went as far as putting his thoughts in a visual way on the canvas and so as you can see here this is an visual design it's information architecture and this is important this is the step that I'm talking about got it so you can use those caught this this type of content to copy and use it within your wireframes or yeah or helps you structure the content correct got it it gives me this your client did this within figma yeah that's pretty cool right yeah he was he was a really great partner and we had a very tight deadline which was you know it's admirable that we were able to get as far as we did between just the two of us that's cool all right so back to the wireframes yeah do you do you do also multiple versions of pages like you showed us for the footer and the header like how how deep do you go in exploring different different options yeah so typically what I like to do during these phases is define what the problems are with the current solution that they have and one of the things that they mentioned is people drop off people don't know where the products are or how to get to the product pages and so I had an idea I said okay what if we highlighted the products immediately above the fold and they were like you know what that's that's pretty aggressive but let's try it let's come up with several solutions so I tried this solution but then it hid these other two right yeah so that doesn't make a lot of a-salt is where the the gray line finished yeah it's about that like over here all right so above the fold is an old term with like print in magazine it basically means what is visible whenever some someone lands on a home page and so with this solution clearly these two products are hidden and then I tried another solution where you know the products are a little bit more visible but you know this was still not strong enough so I started moving into this type of direction where all of them are visible at the same time and they're clearly defined by a category and this solution started moving in the right direction and so I started thinking a little bit more and I was like well if we just simply say you know try dance pottery is being grid that doesn't communicate what the product does right right and so we added a little bit of subtext to further tell that narrative and we finished it off with the dot dot dot for the people that wanted to learn more we can you know create a link that would essentially scroll down into that product view got it okay so these actually do not take you to a separate page they scroll you down into a specific place within the homepage correct got it but if you if you click here yes it'll scroll down to the to the home page but if you click on the actual product or anywhere else on the card it'll take you to that home page of that product okay yeah okay I can see that you have the in the press below this mm-hmm and I find this really interesting because I feel like a lot of times you know there's kind of a common knowledge that you need to get the kind of social proof and that kind of thing immediately at the top or maybe even above the fold and I think that's interesting to see that because you understand there are strategic goals to highlight their products you understand that this needs to be above the press or social social proof even though that's kind of like what a lot of people do by default so I think that's really interesting to see right exactly Wow continue uh yeah yeah sure so this was really instrumental but again these are just concepts right so which one did we go with we ended up going in this direction mostly because of what we mentioned before we wanted to highlight the products more and so I had a discussion with Chris and you know obviously the founders of the company were fond of that solution and then you know obviously once we kind of define a direction it doesn't have to be fixed we can always change it as we go but this is kind of the direction that we started to move into and it worked really well while we were creating all of these low fidelity designs and you know highlighting okay what else can we talk about here explore what you know what you can do with the product that was really important because it's not important just to show what the product does but how are others using it you know so that way you can feel like an extension of what you can use it for in the future I got it yeah this is like what we usually call the benefits section right like what does it help me achieve if I use the product right exactly god yeah and so moving further down the page here these are just concepts at first clearly we needed to really focus on the information again low fidelity designs are not about aesthetics they're mostly about information architecture making sure that the right information is there yeah but we can see a pretty good layout at this point I mean I think this is pretty well laid out you know that at that point hmm yeah right I don't want to zoom in too much into this did you have any other questions around page yeah what's that like what's the next day how do you turn this into do you by the way do you also have a commented discussion around this stage we do are for instance yeah we do as you can see here we kind of go in here and sometimes he'll leave me a comment so he'll say you know I don't think adding some additional or do you think adding some additional visuals on this page you know would be beneficial and so what I did was immediately after I added some imagery right yeah and I agree with that before it was it was not visual at all so this helped communicate that message more got it all right so how do we move into the next stage how do you take this and turn it into something beautiful visually appealing right yeah so I mean wireframes are great but as I mentioned before we have to get to the next phase there are phases to this thing and so the next phase is naturally my way a quick question yeah I know you guys hate me for interrupting people that's just like I want that interviewer it's okay do you actually because you mentioned the milestones and the steps of the project often you also kind of divide the payment in terms of these things or it's just like I know it's out of line with what we're talking about but how do you use the structure of the famous of your project yeah so it depends on the size of the project so typically what I do is 25% up front that means there's a commitment yeah 25% after the third week got it without without any consideration to what milestone you are it's just by by date yeah okay got it so 25 percent deposit 25 percent after the third week and then the last 50 percent once we're done okay yeah all right back to the visual awesome so there's a lot here we won't talk more about you know the low fidelity designs but you know as Ron wants to know how do we then translate this information which is really what it is into something that's aesthetically pleasing that further tells that narrative and so the next phase is the high fidelity phase the high fidelity phase is my favorite no offense to you know the web flow process or you know the strategy that's always fun to but man there's so much joy in making something beautiful you know I feel yeah yeah yeah yeah for sure and so typically what I do with this is you know going back to the wireframes what does that look like what what's the color of the hero image how do we show this information and then very very quickly right we move into the imagery what is the essence of the imagery that we're trying to convey where you what type of imagery did you end up working with is this stock imagery that you have to create something custom how do you go about doing that yeah for sure so I had some pushback from the team they had a set of images that they wanted to use and so I respected that it's in line with their brand and they've created images that they've created that I made okay yeah that they that they took so they probably hired a photographer at some point yeah for sure okay so basically you had the images you're just tasked with what's the best way to present them correct got it yeah but you know before we get into the final result I like to show a little bit more about the push and pull that happens yeah because I don't want to be that does that says you know here's the best thing and here's the final result no it's not like that there are pushes real talk here on this channel oh yeah no we're gonna get real so to be honest with you guys I showed them these solutions and you know I thought that this was a clean solution the logo is in line with their product color or in in line with her branding color and they they didn't like it oh and I was like no this is you know as a designer you're in the business of look what I can do and when you show something that's not fully completed you're vulnerable right yeah it's tough that's tough it's always painful yeah and to me that's that's the number one thing that I've learned is the designer from working at startups to recently working at Google for the past two years you have to be comfortable putting yourself in a vulnerable state every single day it's important yeah so what happened yeah so I showed them a bunch of different solutions like here's another one and then here's another option they didn't like any of these and I was like oh no okay back to the drawing board that's okay so we very very quickly within like a couple maybe like two hours I came up with a ton of different solutions because as a designer when when you show something and the client pushes back you want to immediately show that you're still engaged you're someone that can take feedback and iterate very quickly you don't want them thinking oh no is this the right person for the job you know yeah it's tough right so immediately I said okay what what can I do to improve the experience so they wanted to go with a darker look and feel that was I was very clear in so I thought okay what if what if we had iconography for the products that we have or that they have and then you know leverage some of the imagery that was already persistent on their website they kind of like this direction and they were like oh you know what what if it looked you know a little lighter what if we had white backgrounds with like a gray you know background and in the cards to kind of offset the information we ended up moving completely away because we didn't have at the time honestly just create icons yeah we just didn't have the time we had we literally had one month to do the strategy the low fidelity high fidelity and all of the web flow implementation okay yeah this would take for me I think like three months the sounds like a three months project so it was in months as a tight deadline it was pretty tight yeah yeah so very quickly we moved away from some of these like you know wireframe or more iconography base designs into a more realistic like here are some product shots of the product actually in the wild life because again as we mentioned in the beginning the whole strategy of this is to surface their products to get more people involved in learning more about their product so why would we hide them behind icons yeah right alright and then you know from there it was all about okay now that we have the hero section how do we actually show the product section in the best light well I presented an idea where you know you clearly have someone using the product that's kind of cool and this is imagery that they already had at this point yeah yeah but I see that you still had icons going on around here right so these are more I guess secondary icons more to to offset the the text because you work with ready-made icons or did you get them somewhere or you create them yourself what's your yeah sure I I con strategy so Mike you know he's another youtuber he would tell you I don't like to spend time making icons I just go to an icon pack and you know I use it yeah I am the same way yeah yeah same here by the way yeah right right got it unless I absolutely have to make something custom so what's your favorite icons by hmm good question I'm biased because I use material design icons for a long time so I typically leverage material design guys oh yeah they have a lot of great icons all right so continuing you know obviously this is an exploration phase of high fidelity solutions how do we you know define what that product section looks like and you know we went through several solutions and I'm only going to show you a few do are all of these sketches with the client all these different iterations whenever we're talking about something as important as a product section yeah got it all right yeah and this is you know obviously very very important to get right and so it's important to look at how far can we take this what is like you know as far as we can go to like the the lowest effort right we ended up settling with this solution yeah this was not my favorite this is another part of being a designer no one talks to you about in school you know the client may choose a solution that's not your favorite and that's okay sometimes you just yeah you know I think it looks good I mean it looks really good awesome thinking yeah I'm you know after a while it grew on me okay continuing on to the later stages of the high fidelity designs as you can see here we're still pulling the same type of essence which is the dark background allowing us to use tabs you know and and bringing in some of the functionality in mind as we do it as well so here's another example where we were thinking about the actual technical side a little bit because you know as you can see here there's an image on the left hand side and then we have some bullets on the right hand side with webflow you can do things like sticky right it's a sticky position where as you scroll the user doesn't scroll past this image so the image stays fixed and I can show you how that would work but do you communicate that to your client at that point do you tell him this is going to stick when we scroll down or yeah yeah all right so during those phases where it's hard to communicate it without actually building it out I like to tell the client hey you know this is something cool that we can do I know this isn't you know something that you told me we should do or something that you know is super popular but we can't do it what do you think and that's that's kind of how I like to work I'm not an order-taker all right but when it comes to visual mobile responsive versions and stuff like that do you actually design them out in figma as well do you just implement them in web flow what's your process for that yeah so I don't design tablet or mobile designs as a designer once you do this enough you can as you're designing this in your mind you can unpack what that'll look like yeah and my fella same way yeah and you know while I'm doing the web implementation and web flow in my mind I'm already 10 steps ahead I know how this is going to cascade I know the percentage of the container so it's gonna be flexible this is going to collapse into a smaller view you know conversely speaking the same thing for this this is two columns at the moment but the smaller the screen gets it'll just wrap right and using flexbox it becomes extremely easy to get that type of behavior so how about we jump into the implementation can you show us how this was built out and what was the structure for dynamic content how does that look like in web flow absolutely this is another one of my favorite parts by the way web flow is amazing if you guys aren't already using it you need to hop on web flow I didn't get him to say this he just said it by the way I've been using web flow since 2014 or so and i've been on the web flow experts program since gosh two years ago so I'm all-in on web flow got it all right show us show us how this looks like yeah I love to start with talking about the database the collection view like do you also structure that before you get started with a visual side or do you just start like what's your process for from building in web slow yeah good good question the database and the information going back to what I said before is the most important thing so I like to start with that architecture first I was fortunate enough to not have to build the backend okay from scratch they already had a team who worked in web flow yeah their old website was in web flop yeah oh that's interesting yes so they were already familiar with web flow so they said here are the current back-end solutions we want to do more stuff with it more sophisticated filtering can you add more logic to it and so what I did is I you know similar to a developer you may not start from scratch you may use a framework that already exists and then add on top of it so technically speaking did you you worked on their existing project within webflow you did not create a new project I did create a new project but I still kept the back end everything else was wiped clean got it okay yeah see what you imported the the items the CMS items is that how it works or so I duplicated the project gone deleted all of the pages hey that's interesting yeah it was a very unique experience I'm not used to doing that I'm used to the being the person that you know builds everything from the very beginning all the way to the end until lunch okay that's interesting I was fortunate the the developer that worked on this was is really smart and knows what flow really well so thank you I actually met him at the no code conference I ran these Matias I Medusa nice nice all right so show us how this works cool so I don't know how technical you guys are in terms of you know the CMS collections here but just a quick recap if you're not a web flow user or collections is basically the kind of a database for the dynamic content if you want your clients to be able to add new content themselves or edit things besides just titles then you create collections which is basically databases so as you can see here they have Tim of team members or or blog posts which they can just create and add new items to their website themselves exactly okay right so team members make sense what is live dives live dives are individual basically pages like case studies consider them case studies essentially where they actually show the live dive of the product being used in the real world setting so it's not like here's an image of a product no they actually take the product and put it underwater and show you what it looks like which i think is brilliant so the structure for this is something like a youtube video and some links and a thumbnail rat it exactly and because this site is already live I'm able to show this to you guys if it was not I wouldn't be able to so this is actually live as we speak now so you can test it and how long how many pages are on the website oh gosh let me check it out yeah oh man oh man how many pages there's a lot so let's talk about how long it took you to actually implement this and and actually the whole projects yeah for sure so the entire project from beginning to end was four weeks four weeks four weeks and that's incredible how how is that divided between the different parts of the project yes so I was very aggressive about setting definitive deadlines we have to be done with a low fidelity by this day we're not did they come up why did you do it so fast like what they were they were limited yet so they had a deadline of the 27th of October and so this was it was very critical they had a presentation or a conference to go to and so it was imperative that they launched a new site with their new branding and everything along with it so that was not negotiable god we had to do it so in order to do this as a designer I had to let them know from my previous experience if we're not done with this phase by this time it's impossible to hit our goal and so that's part of a consultants role which is to create you know walls in terms of what's realistic so that way you can better manage expectations so how is the project divided low fidelity design was about one to two weeks during that time I was also a little bit working on high fidelity because it was very quick I typically don't do that I typically do low fidelity than high fidelity and then the web flow implementation I cool actually the high fidelity implementation was about one week so low fidelity two weeks - ality one week and then one week for the development that's incredible that's incredible well thank you so much first of all incredible work well done Congrats on on a wonderful project and thank you for being so open and transparent and showing us everything even the things that didn't end up working yeah thank you so much absolutely thank you so much for having me it's been a pleasure see you on the next line oh yeah [Music]

Channel: Flux

Views: 64,000

Keywords: Design, designer, ran segall, flux, startups, startup, freelance designer, web design, web designer, web development, web developer, web development freelancer, web development tools, freelance web developer, web flow, how to start freelancing, web design business, how to freelance, start freelancing, freelance web design, Freelance, freelancer, freelancing, graphic design, graphic designer, web designer career, web design tutorial, website design, case study, sofar

Id: 8NyQ3UUabUg

Length: 44min 18sec (2658 seconds)

Published: Mon Nov 18 2019