Stripe Head of Design Katie Dill Reviews Startup Websites

Summary

Highlights

• Katie Dill shares insights on effective website design alongside Ain Epstein at Stripe's office 🎨.
• Meo Health receives critiques on user engagement and first impressions 🕵️‍♂️.
• Signas discussed the importance of clear call-to-actions for better conversion rates 🚀.
• The creative use of visuals at Amino Analytica aims to infuse fun in B2B, but usability remains crucial 🤖.
• Emphasizing the importance of user feedback in iterating and improving website design 🗣️.

Key Takeaways

• First impressions matter: Ensure your website conveys the right vibe and message at first glance 🎨.
• Clarity is key: Be clear about your product's value and target audience immediately 🕵️‍♂️.
• User-friendly design: Don't make users work hard to understand or navigate your site 🚀.
• Consistency: Ensure design elements and calls to action are consistent and intuitive 💡.
• Gather user feedback: Regularly test your site's usability with real users to improve further 🗣️.

Overview

Stripe Head of Design Katie Dill Reviews Startup Websites Transcription

• 00:00 - 00:30 I'm Ain Epstein and welcome to another episode of design review today I'm going to be joined by Katie Dill who is the head of design at stripe and we're going to be taking a look at a bunch of User submitted websites to give them feedback on how they can improve their [Music] designs I'm super happy to be here at the stripe offices with Katie Dill Katie is the head of design at stripe and
• 00:30 - 01:00 before that was head of design at Lyft and head of experience design at uh Airbnb so Katie thank you for for having us today well thanks for being here at stripe and thanks for having me on I'm excited to jump in and get Katie's feedback on these sites so I'm excited it's going to be fun let's jump into it okay we got our first one here this is Meo predict your future health one of the things that immediately react to this is you think about what is your first impression and how is this you know brand communicating how they think
• 01:00 - 01:30 you should feel I would say that this has a A vibe that is um a little bit more um boting about my future health um as opposed to uplifting and I don't know if that's intentional because I don't know enough about this brand yet but that's like just acknowledging my first reaction yeah I guess the other thing I I resonate with is like there actually isn't a lot of information here and they're telling you scroll to explore and they're not really giving you much above the fold here so oh okay the weird image image got bigger change your
• 01:30 - 02:00 health okay and that's a lot of Scrolls yeah and they've taken over the screen I hate when uh sites hijack the scroll yeah I think there's a couple of things there so one when you look at like web design you you kind of have to think about it as that they want to leave like Tik Tock is calling they've got other things to do and so what your job is is to like show them why they should be there and help keeping them from every step of the way uh a lot of Scrolls like that you know it's just like I don't got time for that
• 02:00 - 02:30 theying it also felt like there was just like not enough reaction happing I think that was just like way too much of that video and then never a good sign if you have to tell them how to use it like scroll to you should scroll yeah exactly like that should be more intuitive and it's a website so like people should know what to do but it was not clear there yeah yeah so okay here we go blood work and personalized insights to help you live healthier and longer like I don't know why they didn't just start the site here yeah that's very descriptive it like helps me understand a little bit about why I want this thing
• 02:30 - 03:00 very good is this a carousel uh it is not scrolling when i s oh okay there's like a hand thing there yeah so that's interesting like your first reaction was like this should scroll which like it was communicating well right it was like hanging off the edge like I thought that but yeah I would have as well thought to scroll and then how it works schedule test receive results and action plan take action and test again is schedule test the the thing or is it take the test
• 03:00 - 03:30 I yeah I guess you need to take the test that's kind of missing in in the steps here and it's just like well what is the key value I think the other thing you know you have to consider is that like there's a couple different reads in the website right it's just like you know what's your hierarchy of information a lot of people just scan and so if I was just scanning if I just read the headlines would I understand it yep and so that's where I would just like kind of question that yep so if we're reading the headlines blood workor and personalize insights to help you live healthier and longer how it works schedule tests receive results and action plan take action and test again
• 03:30 - 04:00 go beyond your traditional physical with in-depth Health insights and more scroll hijacks see this is great so like love product shots that's kind of small can I really understand what's going on here and it also it was great that they did show the steps of how this works I think people do want to internalize like well what does this work and how is that going to make me work um it's interesting so they're showing an example that this person is 21 years old is that their customer uh so you should think about every one of those details is that like am I portraying you know who that I'm actually talking to mhm um
• 04:00 - 04:30 it does appear there's also a little funky drop shadow under that measure uh button tracks ladder so that's just like a tiny little detail but that you know I don't think was intentional uh and something to consider yep and there's actually um the founders submitted this site with a question which is um we'd love to increase conversions while telling a story with compelling visuals and animations how do we balance both well yeah this is so perfect with you know what you and I are reacting to I mean I think one of the things they've done well is that the CTA is there it
• 04:30 - 05:00 comes as I go down the page uh and you know I don't know about the bottom but like you know making sure that it's never hard to find the next action but I think our both reaction was just like I probably wouldn't have made it best you know a scroll two um and so there was just too much of that storytelling at first and I think it wasn't for any value like I didn't necessarily take away from that video I get it and like this is for me um again there was like a picture of an older man and then yet it's telling me I'm a 21-year-old so I'm not really you know understanding is
• 05:00 - 05:30 this for me and what do I go and do about it yep but it sounds like starting with something more concrete around what is this and who is it for is probably a better place to start than where they're starting right now I think so something to work with here for sure great all right Meo Health thank you for sharing okay next up we've got signas so let's see here open Telemetry native logs metrics and traces in a single pane okay all right as a you know in relation to the one we just talked about they're getting a lot more descrip up
• 05:30 - 06:00 front they're like what this is what's it for a little bit about you know kind of relaying a bit about who it's for I think that that is strong I also really love the product shot right off the bat I get a sense of like this is a thing I can buy this is what it would be like also what's pretty great here is that it's a video I can tell by the little video thing but the screenshot is useful it's not great when people include a video and it's just like you know nothing it's like no value whatsoever because I might not always click on the video getting any value out of the
• 06:00 - 06:30 thumbnail yep all right and then we get a bunch of logos here and I recognize a bunch of these logos which is good so that helps build trust and and credibility uh the One-Stop observability tool these are kind of small I feel like maybe this is important like the like core features of what they do that they'd want to show people but it's kind of hard to read that and I probably would have skipped over it yeah I agree there also was a lot of different type sizes going on here um there's a lot to take in I think one question you could always ask yourself is like is every one of those pixel adding value like did you did did
• 06:30 - 07:00 they need that line these are the trusted companies like I already I get that just seeing it right like I don't know if I need that information there too so that you can focus on more of the core things you're trying to explain yep okay now we've got a diagram and justest data from 50 plus sources send your data and start monitoring I mean there's a lot going on here once we start getting down here um that feels a little overwhelming um and makes it harder to dig in and understand exactly what I'm looking at yeah I mean
• 07:00 - 07:30 I think it's really nice that each of these value propositions are complemented with an image uh it helps me get a sense of the product and it helps me better understand what I would be getting uh but I do agree with you that there is just like a lot going on and you know I'm kind of trying to wonder like well what's the main like what are the key points like is it all of this or like what are the three things I need to know yeah I think one of the tricky things is it seems like part of the product here is code and
• 07:30 - 08:00 logs which have a lot of text in them and when you try to show that in screenshots it competes with the actual text that you're trying to communicate what's happening that's fair and and yeah so potentially like can you make that smaller or can you um abstract it a little bit to give some of the sense of it but without being too busy yep all right and we've got a oh go ahead build for developers crafted by humans our developers not humans sounds like maybe they don't think so I don't know I get what they're trying to do there
• 08:00 - 08:30 but yeah I don't know yeah yeah we actually have a a question from the signas founders they say um how can we improve the landing design to improve click-through rate uh I.E the percent of people who click try signas cloud from our landing page okay so let's see we've got a button up here we've got a button down here any advice for them to improve that conversion rate I mean what I will say that they're doing really well is that I think you know the ctas they're they're clear what they do right and
• 08:30 - 09:00 then so it's not just like just start it it tells you like okay you can try it what I have seen some do is that they you know they say like try for for free get going with a trial um it can get a little noisy it also you have to think about like well what is the relationship with value Exchange in your product and so you know is a free trial the right thing or is that the right thing to communicate so I don't know if that's the right answer honestly I think they're really doing a great job by showing the product right off the bat my guess is that the key thing for them to do if they haven't done it already is to
• 09:00 - 09:30 listen to users doing what we do sitting down looking at it for the first time and then just like here user have a user talk out loud and what their reactions are and you know maybe this sentence doesn't make sense for them it doesn't make that much sense for me but that's because I'm not their user I would be more curious what the user thinks yeah from a pure visual perspective like it's clear there are buttons and clear call to action so my hunch is the best way to improve conversion rates is one in how you are communicating the value of the product and showing it off whether it's screenshots videos
• 09:30 - 10:00 um or the of people that are on the page to make sure that they're actually the right Ted users and you know that actually brings up another point is they should think about the Journey of how did somebody even get here what was the wording of the thing they saw that got them here right and then yeah what happens when they hit that button how easy is it for them to sign up and get going one really great thing for any organization to do is just like map out the user Journey like each point what is happening and how good is that point is it actually working or not and then then just improve it because sometimes it's
• 10:00 - 10:30 misleading like this thing is great but the thing right before it tells a totally different story and that's where your problem is yes that's such a great Point people I think start from here and try to evaluate and figure out what to do but it actually starts with what got you here yeah was it an ad that said the promise was different than what you're hitting here and then you're like wait this was not the thing that I exactly exactly cool well thank you sigos uh this was great all right next up we have taive I think that's how you say it give your TVs superpowers uh TI enhances live TV in restaurants to
• 10:30 - 11:00 increase revenue and save time okay our average partner makes 2K location a year no cost cancel every time okay uh we've got some glow we got a glowing button here that got my attention yes there there is a lot going on here I you know as we were talking about like how well does it communicate what this thing is who's it's for and what the value is I think you know they are trying to direct that like right on it's a lot to take in but I do think that it's power that they are kind of
• 11:00 - 11:30 communicating some of these ascts there I think they could clean up the design of it and how it's shown I don't know if it's really adding value to have so much going on there's a moving image behind it for example there've got glow on the buttons these arrows you know why does this one go up uh when does this one go down um you know I think you know what this would communicate to me is that I go down when I push this but like do I go off to somewhere else with that no I also go down so that like I I don't think those are adding any value um you know kind of coming back to every pixel
• 11:30 - 12:00 should add value yeah um similarly up here in the nav you know these color boxes around you know I think you're trying to show that like there's different users and that's why these different things are a part of it um but I'm not sure that's necessarily an advantage one other thing we haven't done this yet make your window smaller how does it work on a mobile device we should always be thinking about when you're assessing it it's like what if I'm looking at it on a tablet what if I'm looking at on my mobile phone like does it you know also condense well and and tell that story well because your
• 12:00 - 12:30 users oftentimes are on the go when they're coming to this kind of environment yep and seems like it performed well here yeah one of the other things that stands out to me is like give your TV superpowers I don't know that that's how their users think about this product and I think a great way to figure out what should be your headline is to just ask your users like how would you describe our product because chances are the way your users think about your product and would describe it is the way that other users potentially would too but that next line you know enhance live TV in restaurants to increase Revenue now it's very clear
• 12:30 - 13:00 to me like oh I own a restaurant this product is for me but I have to read that subline in order to get there it is nice their logos kind of communicate this too like Ferg sports bar and um you know so they most Cantina like feels like restaurants you know so it feels like oh your customers are uh restaurant owners like me y yep and once again as we were talking about earlier like look at like those headlines like is trusted by the best helping you right now no it's kind of just like adding a little noise to the page and then one personal pet peeve you know be super careful
• 13:00 - 13:30 about you know the details in your grammar and your um your casing so give your TV superpowers I don't know why superpowers is capitalized um it's like a kind of hybrid between title case and sentence case so sticking to that consistently so get started for example as title case learn more is sentence case we you should always be consistent every one of those little things you know it might just think like oh that's not a big deal the user could still read it but it's a little point of friction and again it's something that erods trust like if you're not on top of that detail DET what other detail are you not
• 13:30 - 14:00 on top of absolutely other things I would maybe take a look at so in the logo um what we have here is it looks like it's a TV that is cut in half yeah is that the communication that you want to have like you're breaking TVs you know you're ripping them apart you're is slashing them um seems like it doesn't correlate as much with what they're trying to accomplish with the actual brand um and agreed that the name is hard to understand or read and then how the two sit together it looks like the word is sitting kind of below the um
• 14:00 - 14:30 actual uh icon and that also kind of like feels unbalanced so I think there's some uh iteration that you could do on the logo yep it's probably um literally uh centered vertically but because of the small stand at the bottom the weight exact all right next up we have metroport Universal API for healthcare data okay that's pretty clear um get comprehensive patient medical data in seconds not weeks um I'm curious your take on some of these like Amorphis blob
• 14:30 - 15:00 animations that that are relatively common on sites these days yes yes indeed I think it is a good thing to introduce some visual interest um it's a good thing to bring Dynamic uh attributes into the site it makes it feel a little bit more alive and sure like you know beauty is engaging people want to be among beautiful things so I don't think that's ever wrong uh but I what I do think they have to also think about is like well what is it actually communicating is this aligned with Who We Are and what we wanted to do I think
• 15:00 - 15:30 a really great practice is like write down on a piece of paper as you're going into your website design what adjectives do we want people to feel um what is our brand what is that energy we have like so for example at stripe like we purposely are you know about exuberant color because we're about positivity and we're about progress and we want to look optimistically at the world and so that hopefully communicates through what we do and I would ask you know the same thing here like what is the value of this thing is it communicating you know any attribute of which you are trying to
• 15:30 - 16:00 relay mhm does it communicate anything to you no um it also really bothers me that it's kind of cut off there at the end like those lines really want to go outside the frame and they do not um yeah they stop over here too yeah exactly so it's like you know do you want to show your technical prowess with this I I would not say that is kind of communicating there no yeah okay we got clear call to action book demo two of those view docs I can't tell what these are under here
• 16:00 - 16:30 um so not really adding a lot of value okay we've got some more logos um to build trust trusted by leaders building the future of healthcare so I assume these are customers and links to more customer results okay these must be their specific products they have a medical API and a dashboard it's getting kind of busy here right like so we're like bringing that same line thing in there's a lot going on in these cards plus those learn more buttons like it's a good idea to make your ctas clear but those are really overpowering and I also think you should should think about the hierarchy of your ctas so are those you
• 16:30 - 17:00 know the most important thing or for example that you know that book demo CTA up here is probably more important so you might want to think about making these more like secondary links like your C customer results MH yeah that's a great point and uh we got the diagonal arrows are back again so that's a hot Trend these days yeah this is an example of you know using a video on the site and I think in a less effective way so you know here the the screenshot is just what we just saw so that's no new value added I think if you're going to include
• 17:00 - 17:30 a video make sure that screenshot is adding value even if I don't tap on it yep yep I think that's great and then you know the question from the founders is is our value prop clear enough and I think yeah I understand what they do from this right out of the gate so so I think they nailed that yeah yeah great thank you metroport all right and uh one last site here we'll take a look at from Amino analytica so let's see here uh adaptation accelerated protein design just as nature intended
• 17:30 - 18:00 all right we got some things growing in the background maybe colorful things um what what was their question um okay let's see uh does a b2c style website one that looks fun personable flashy work for traditional corporate B2B engineering company or does it come across as unserious ah okay okay okay this is a great question I love this I love what they're trying to do here uh because number one I would say like absolutely you can be fun in a B2B world
• 18:00 - 18:30 or you solving these kinds of problems like why not we're designing for humans and humans want to have um a little joy in their day yeah so I really really appreciate that I think there's like a lot of fun here I think the color is energetic and I think that there's some value in that what I think you have to be super careful about is that at what point does it start eroding usability and you know the logo is difficult to read um there's a lot going on here like for example why does adaptation adaption have to be uh bigger than accelerated as
• 18:30 - 19:00 I go down here these are you know there's just a lot going on with the it moves um there's a lot going on like this actually is kind of like radiating in some way and the different type faces that are used I don't know if we're actually making it useful it's like actually kind of harder to read and in that way I'm not actually learning what the product is and like who is it for and what is the problem that it's solving so I would say don't lose the fun but definitely go back to Mak it um more effective and how well it
• 19:00 - 19:30 communicates because you don't want to lose that yep yeah I I have the same reaction which is I'm I'm a little confused who this is for like who the user is and who they're trying to attract and maybe that means I'm not the user but um I also don't see it being communicated here um maybe this is the part where they would say that it's an company working in protein design uh yeah I guess if you do protein design then maybe and I will you scroll to the
• 19:30 - 20:00 bottom okay yeah so there's not a lot here and so they're making me have to hit a button to go and actually get that insight and like is this for me and like why should I trust this company like what is like how do you know what you're talking about and it people are less likely to click something than they are to scroll and so I would definitely consider bringing that Insight here and helping people understand like why should I trust Amino analytica for all of my protein needs yep and it also stands out to me there's no call to action here um they La they can launch
• 20:00 - 20:30 YC that's yeah they they launched you know they' posted their company on launch YC and so they're directing people to that and then there's a learn more button down here which I guess we can see where that goes okay um so we've got another very creative page here no what's also interesting is you know as we were talking about when you skim and people are just looking for the bolded things they're looking for the headlines don't bold the negative things right like so now I'm just skimming and I'm reading trial and error random mutations and I don't know if that's what you want me to take away you want me to take away
• 20:30 - 21:00 the value yep yep that's a great Point awesome thank you Amino analytica this was a very interesting site all right and that does it for another episode of design review Katie thank you so much for joining us that was awesome that was so fun we could do this every day yes I would love to love we should do it again um and thank you to stripe also for hosting us here and thank you all for watching hope this was uh helpful and L getting Katie's feedback and we'll see you on the next design review [Music]