Web Design Case Study: Lusha (Sketch + InVision)

[Music] hey guys and welcome to a website case study I know you guys love those design case studies but you know it's hard putting them together you're working on a project for months then it's in development for months until it's all approved and live and I can share it with you but here it is I'm super excited to share this with you it's been a project one of the biggest projects that I've been working on last year and it's finally live and published so I want to show you everything how we got started how I did the research how I worked in sketch in envision and how we brought everything back together again process of a few months and working together with the client so the company name that I was working with is called Lucia it's a data company which means they're there helping their clients to find contact information for for the people that they're trying to reach it's very helpful for recruiters and salespeople and so even though they did not invest in design very much before they they've started working with me they were already super successful and had a lot of sales because people really need their product and so here's here's what I what they have would they kind of reach me they had this website really really simple website with kind of a gif of their Chrome extension they had a product that they were still working on but that's it basically just a landing page with a little bit of testimonials and a pricing page that's it super super simple and they wanted to create a bigger website with lots of content since they were working on four more new products and they wanted to create like really a large website and also update their brand now basically it wasn't a branding proper like a proper branding project otherwise this would take even longer they came to me because they needed a website but obviously when when I looked at this and when I look at the you know at their logo and if their character design and everything I told them if you want this to be like really high quality like you're aiming for we're gonna have to reward those things and so I put an effort into that and I'll share that as part of the process but it wasn't like the main focus of this project so I did it quicker than when I'm actually doing like a proper branding you know branding projects so I want to show you how I got started so I got started after talking to them understanding their goals and what they're trying to achieve I started with some research basically kind of like a visual research to try to see what what kind of a visual direction they're into so here's what I did basically I have here all the folders I have a research folder where I created and I kind of created categories like 3d and so I can show them website that use like 3d for example or something a bit more artistic like these or something like let's say graphic you know that uses graphic or that uses illustration and they actually pretty much like the character that they have of Lucia so we've decided to go with something something around this which is like graphic illustration not like hand illustration with graphic illustration so this is basically the direction that they were they were telling me that they're in too and so I took this in mind when thinking about you know redoing the the illustration redoing the brand character and everything so this was kind of like I've prepared this research for kind of like our preliminary kickoff meeting and then I actually got started into working so I want to show you the first presentation I did for them after my initial my initial work the goal of this presentation was to get an OK about kind of the little bit of brand update the the new color scheme I wanted to use and and kind of just show them a home page with with a visual direction and see if they like this if they would approve this then we move on into creating all you know all of the website so here's the presentation that I present it to them oh I'll try to get this done quickly so yeah this is what we're this is the agenda for the for the meeting all right so I started with the logo that they have I explained to them why I don't think this works but I told him that I do like the reference of kind of like 50s kind of secretary things so I wanted to stay there but I try to see what's a Connick about this and I came to realize that the glasses are a pretty kind of iconic symbol and perhaps this can be the actual symbol of the company and so I've updated the font and suggest that this as a new logo again this is super super quick for a logo but this was my updated suggesting I showed them this would work in small scale they had a problem where they had the illustration of evolution of the character and what was really really small you couldn't see anything so I wanted to go with something a little bit more iconic and demonstrate how the glasses would work in that direction so the color they were using like a generic blue and I wanted to set them apart from competitors and so I suggested a color scheme that uses gradients and a little bit more to the purple area still uses a little bit of blue which is kind of coporate they're still kind of a b2b business to business company which sells to like big companies they're you know they're our clients include Google Microsoft companies like that and so they still need to be a bit of you know a bit call pray but a little bit more fun so I suggested this color scheme and show them how this would work with the icon and then okay let's start talking about what's the problem with the with the character by the way I have a video specifically dedicated to the illustration process that we did on this project so I will link it here if you want you're interested I went in depth about how we did this and I worked with with a designer illustrator from Ukraine on this which was super helpful and also helped me with some of the icons and visual on the website but this is how I present it to them and then I suggested an updated version of the illustration and then putting it all together showing them kind of an idea for the homepage so this is the updated version of the homepage this already includes a little bit of a new kind of a new content that I've already created for them so talking about their different different product that they have they had a Salesforce integration an API integration zapier integration and so the purpose of this was to show them the new visual language how illustration might look like how the color would work and how the content will be presented so basically yeah a redesign of the homepage and I show them this this was my first presentation and it went super well they were excited they said we loved it but of course just like in every client they had mmm like a lot of feedback feedback on the character or feedback on the logo feedback on you know on the design itself and so the next step was to actually I started doing wireframes for the rest of the website which I'll talk about later I shared it with envision with them to get feedback and and I actually did the duration so let me show you the the presentation of the iterations all right so this was kind of rhyme from two of the design so yeah rework the logo the illustration Chrome extension I'm not gonna show you this in the home page all right so the logo so one of their comments was that one of the founders said I'm not sure that glasses will work for a data company maybe doesn't look too I don't know technical or data so that was his feedback he wasn't really sure about this so I told him okay I did a little bit of data icons research and that's how they look like so if you notice there's kind of a like a pattern of circles that are connected with a line and so perhaps instead of using this we can transform this to a different type of glasses but that are also very very similar to kind of the representation of data or databases or connection between data and you know what people are used to seeing in icons in that type and so it also has the meaning of you know we take a person and we connect the data to that person that's part of what they're doing and so I showed this to them also showed how this look that actually looks even better with the typeface because as you can see the a is almost a round circle so it actually looks much better like this so this was the updated suggestion for the lava which they did like then went to the feedback that they had about the illustration that we suggested and then showed them how we updated it so we replace the glasses with the new glasses that represent the the new logo that we have we replace the shirt then we replace the smile then we replace the hair and reworked it until we thought it looks much better as you see before and after and so and that's actually the final illustration for Lucia there are lots of it you can watch the video on on the illustration process so that's basically kind of the the beginning of the project after I did this I actually started to design the whole product the whole website on one she just want to show you how big it is so here's here's my sketch website sketch sketch file for the website just see how many pages there there on the website so let's just quickly go over it and that's even without the mobile versions so that's the homepage that's a page for the Chrome extension that's there that's the page for the API as you can see lots of icons lots of images to create for this website this is the integrations page I'm going super quick because there's so much paint just to go over so this is the Salesforce integration this is the pricing page super important page on the website those are pages that are actually for SEO purposes this is the customers page with lots of testimonials Terms of Service and more and more pages a whole research Resource Center with with the blog and everything so and also a page for API anyway there's lots lots of pages this one I like this is the about page kind of like the illustration that we did for this I'm talking about connections their values the team they even put me here as chief design officer such a great client it's such a great client okay so basically this is the sketch file I try to work with with symbols but I'm not sure that I did it properly because I was working in collaboration with the other designer and every time she send me back a file and I try to copy stuff they duplicated the symbol and so that was a total mass which suck about working with sketch but anyway this is what we did I did try to create finally they were asking me for a kind of a color scheme and I try to use envisions kind of styles creator but that did not work well because we had so many kind of illustration in different colors than when I try to create style guides using using envisions craft plugin it just created like gazillion of of colors and it was like totally irrelevant so finally by hand I created this kind of a like a page with with the color scheme of the website and kind of a bread with a little bit of kind of an indication of of a name so we can talk about the colors and and how to use them and when to use each color so this is just something that I did to work along because they will keep working on the website you know when on advertising and on ads and banners and other stuff along the way so this is kind of like not proper a brand book because again this wasn't like the proper branding project but they still needed this in order to work so basically this is the schedule so did mobile version 4 for the website which was also a lot of work mainly the whole communication for the website together with them was through envision and that wouldn't work that worked super super well so let me show you the envision project so basically we have here all of the pages as you can see but for each page let me just go here and see the history mode here let's just load up the first time that I uploaded this so as you can see this is the first so the first time I created the envision project it was actually just a wireframes so this is how it look this is the actual wireframe that I created also in sketching sank this and then they could add comments here and manage all the comments so I can see this and then just update the version so just see how many updates on every page there is like 14 or 15 versions until we reach the final the final page there were lots and lots of rounds of iteration on this project basically if a contract said it's three rounds it was actually much longer but I was tracking time and seeing that we were still doing good on time and you know I wanted to give them good service and so we did like a lot of iterations until finally you know like I just told him arrived we finished the delivery and from here on it's extra but but you know what I didn't care because I they were so nice and it was really a great and super efficient product process you know working they left comments as to what doesn't work on on the envision I fixed it in sketch just clicked you know sync and it's ended to to envision so that was really an efficient way to work what else what else what else alright so development of this website so this website is not alive you can actually see it here at Lucia Coe initially I suggested them that I would develop it in web flow but they chose not to do it they wanted to keep it in-house they wanted their own developer to work on it this also kind of the web marketing web site syncs with their you know their back-end and then and for SEO purposes they generate pages and so they would rather keep it on the on their own servers and so they use their own developer and I we use also envision and envision assets and inspect to move the assets and to communicate how the website should look like but that's still you know takes a lot of guessing you know it's super hard to show animation overstates and how things should react I and it took a lot of time and honestly I'm not like 100% feel comfortable with the way that he implemented some of the design so I'm I don't like it 100% of the way but it was developed I feel like if I was developing it in what flow it was much more you know subtle interactions and the way that it resizes and and the whole responsiveness how it works but uh you know it is what it is I think and I told them that next time even if they want to host it on their own server I would probably better off doing the you know the front-end and web flow myself exporting the code and they just take the code and connect it to whatever they want because I feel just like design wise the the quality of you know of the website would be higher in my opinion all right so that's basically sums up working on this project with the Lucia theme I really really enjoyed working with them just because they're an awesome bunch of people to work with and I think the result is it's pretty cool I first time I'm doing like a website with illustration and working on brand character so it was really really great experience for me and a lot of fun to work with um one more thing I wanted to share with you like last week or two weeks ago I share with you that I was helping a friend to create like a crowdfunding video for his upcoming movie so that video is now ready I will put the link in the description if you want to see that how the video turned out I did the drone shots and help directing them a little bit you can check it out and see if you like it or if it's interesting for you it's about an ex-soldier with post-traumatic here in Israel it's super interesting just check it out alright that's enough for today my voice is like I hope you guys have a great day and I will get tomorrow [Music]

Channel: Flux

Views: 115,461

Keywords: design, freelance, tel aviv, ran segall, ran segal, רן סגל, work, life, vlog, startups, case study, sketch, invision, web, ux, ui, process, how to, presentation, client, illustration, brand, ui design, web design, how to design a website, sketch to html, web design process, web design project tutorial, web design professional, ui ux, sketch app, how to use invision

Id: F26Noqj-XGg

Length: 17min 25sec (1045 seconds)

Published: Tue Jan 16 2018