"The Art of Web Design: Balancing Aesthetics and Functionality" with Tori Tauch

Summary

In this episode of the Fractional Marketing Advantage podcast, host Chantel Soumis interviews Tori Tauch, a UX/UI designer at Stay in Your Lane. They discuss the intricacies of web design, the importance of user experience, and how to balance aesthetics with functionality effectively. Tori shares her design process, the significance of understanding the differences between UI and UX, and the tools she uses to enhance user experience. The conversation also touches on the importance of mobile responsiveness, effective call-to-action design, and the role of analytics in informing design decisions. Tori emphasizes the need for creative freedom in design projects and offers practical tips for improving outdated websites on a budget.

Takeaways

• Tori emphasizes the importance of user experience in web design.
• Understanding the difference between UI and UX is crucial for effective design.
• Creative freedom can lead to innovative design solutions.
• Using analytics helps inform design decisions post-launch.
• Mobile responsiveness is essential for user engagement and conversions.
• Effective CTAs should be clear and visually distinct.
• User testing with outsiders can provide valuable insights.
• Balancing aesthetics and performance is key in web design.
• Designers should avoid analysis paralysis by seeking feedback.
• Regular updates and optimizations are necessary for maintaining a website. 

Chapters

• 0:00 Introduction to UX/UI Design and Tori's Background
• 3:01 The Website Design Process: From Brief to Launch
• 4:10 Understanding UI vs. UX: The Key Differences
• 6:55 Tools for Enhancing User Experience
• 8:17 Case Studies: Impact of UX Changes
• 9:29 Creative Freedom in Design Projects
• 11:11 Encouraging Creative Flexibility with Clients
• 12:50 Avoiding Analysis Paralysis in Design
• 16:15 Balancing Aesthetics and Performance in Web Design
• 17:51 Mobile Responsiveness and Its Importance
• 19:33 Designing Effective CTAs for Higher Conversions
• 22:06 Using Analytics to Inform Design Decisions
• 24:19 Quick Fixes for Outdated Websites
• 26:49 Conclusion and Key Takeaways

Transcript

Chantel Soumis: Alright listeners, cue up your favorite loading animation because today we're talking pixel perfect magic. Joining the fractional CMO advantage is none other than our very own Tori from Stay in Your Lane. She is our resident UX UI sorceress at Stay in Your Lane. By day, Tori turns blank browser windows into revenue-generating playgrounds as our lead web designer.

Chantel Soumis: Obsessing over every breakpoint, hover state, and micro interaction so clients' sites feel less like just a website and more like a VIP experience. But here's the kicker. When she's not coding delight or reorganizing Figma frames, she's pounding the Texas pavement as a Division I distance runner and finishing her Communication Design degree at the University of North Texas.

Chantel Soumis: Turns out stamina on the track translates into marathon level focus during late night design sprints. Tori's also got that entrepreneurial itch. She recently jumped in as brand experience designer for Franchise Galaxy, proving she can juggle startup chaos while still shipping pristine prototypes on a deadline. Expect a masterclass in how to choose the right no code and low code tools without rebuilding next quarter. Why Dazzle isn't a layer style, it's an end-to-end journey rooted in user experience research. And the quick start checklist she used to take the site from wireframe to shut up and take my money. Grab your coffee, open your dev console and get ready to geek out on conversation ready web design. Tori, welcome to the show.

Tori Tauch: Thanks for having me.

Chantel Soumis: I bet you didn't know I knew all of that about you, did you? Gotta love deep research on LinkedIn. Tori, it's so great to have you here. I have been working with you for the last five months. I know you've been with Stay In Your Lane working on rebrand projects for over a year now.

Tori Tauch: No, I didn't.

Chantel Soumis: And every time I see another work of art from you, whether it's a Figma brainstorm or a collaboration with the designer Rochi, I'm always blown away by how you can take things and simplify them, not just for the brand's sake, but the user experience in a nutshell. So I'd love to hear from you on just getting started. What's your approach when starting a new website project? Can you walk us through your process from brief to launch?

Tori Tauch: Yeah, for sure. Most of our websites at Stanley and have started out kind of the same because a lot of them revolve around franchise development, brand dev kind of things. But most of them start off initially with like a discovery or strategy process with talking with the brand owners, figuring out their goals, how they want the site to function, what they primarily need, what their audience needs.

Tori Tauch: For sure. And then we get more into the user research process. So really like talking to users, looking at the audience research target audience, things like that. And then from there, we can kind of compile all the research and start getting into like the information design, graphic design, wireframes, prototyping, and things like that.

Chantel Soumis: How do you define the difference between UI and UX? User interface and user experience, right? And why do so many brands get one right but neglect the other?

Tori Tauch: So I always view UI as how something looks and then UX is primarily how it works in fields. So UI, it's really easy to get excited about the graphics and how things look and the colors, but UX is a little bit deeper than that. UX typically draws on more of behavioral psychology, human behavior.

Tori Tauch: There's normally a set of a couple different laws that a lot of UX designers will follow. And I thought about like showing a few examples of some of these laws. One of them is Daniel Commons Prospect Theory. And you can see this a lot in like e-commerce sites. So instead of, it's basically a law that says that people will avoid losses.

Tori Tauch: are more motivated to avoid losses than by gain, than to gain something. So instead of using a CTA like sign up now, they might use a CTA like you might lose this deal or this discount is a one-time offer or things like that. And so that's kind of a key difference between UI and UX, UX is really drawing on those like behavioral psychology principles and UI is mostly very graphic and design focused.

Chantel Soumis: Beautiful. That was a great way of summarizing it. I remember when I first started to fall in love with UX, I understood that it's like everything. Everything is your experience, your experience is life, like your dashboard in your car, making sure that the volume isn't right next to your gears or something like that. Like how I turn on my Wagoneer is through a notch, like a nodule, but on my Mercedes,

Chantel Soumis: the little nodule thing is how I turn up my volume. So if I go for that and I try to like turn up the volume, but I'm actually turning the car into reverse, terrifying thought, so terrifying. User experiences can cause some disasters, right? That's why I ended up going to the Nielsen Norman Group School for UX and UI is to understand how I can plug that in beyond just, know.

Tori Tauch: Thank

Chantel Soumis: into my copy, right? Into my articles, into my press releases so that each headline really grabs your eyes from a user experience and people can scan it for digestibility and more people read your words, right? When you review your user experience to update your interface, do you like to use tools like heat mapping or something along those lines to gather

Chantel Soumis: data to make more informed design decisions.

Tori Tauch: Yeah, definitely. There's a pretty large range of tools, especially now with AI that you can use for heat mapping, eye tracking, and there are tons and tons, even if you can't run these tests by yourself, sometimes it's a little bit harder for smaller companies to get a hold of the right eye tracking software and things like that. There are tons and tons of articles available online, especially by the Nielsen Norman Group that you had mentioned.

Tori Tauch: about eye tracking, heat maps, showing where people are viewing the most, where they're dropping off in an interface. And those are normally really helpful to me, especially if we do a lot of design, I guess, sprints at Stand Your Lanes. So sometimes you can't always get around to that really first-hand research. So relying on all of that secondary research and articles has been super helpful to me.

Chantel Soumis: When you're speaking of articles and the research, have you ever worked on a project where you noticed the results skyrocket just because of a simple UX change? Whether that's a case study that you had to study in school or market research you had to do while deploying a new web refresh project. Can you think of anything that comes to mind? Like you mentioned the one law in the principle for e-commerce. I'd be super curious.

Tori Tauch: Yeah, the biggest change I think you'll see on, especially in like our own internal stay in your lane pages is instead of having traditional CTAs that are just like,

Tori Tauch: You know very simple not very straightforward wording really changing that verbiage around to things that are more like find your fractional executive your next branding solution things like that that are very direct calls to action or people know exactly where they're going from point a to point B and then you'll notice those pages will end up getting a lot more clicks and views than they were before

Chantel Soumis: Thanks for the tip. I hope everybody listening looks at their own websites and explores your call to actions to beef it up a little bit, make it very specific and clear. So you've worked on a lot of projects from within StayInRalane, from your experiences learning and education and Franchise Galaxy. What is one of your favorite web?

Chantel Soumis: projects you've worked on so far. Excuse me, and what made it so special?

Tori Tauch: so one of my favorite projects was actually a fake project that Rochi and I had come together for and Rochi's our graphic designer. and it was for a fake like cafe website, like a French cafe. and that was really fun to work on because a lot of the time client projects, there's, you know, X to Y Z constraints to something, and a lot of different considerations. So actually getting to this dive in with Rochi and come up with.

Tori Tauch: really cool graphics and interactions and animations. And even though it's fake, like we, get to see how far we can really push our skills, especially when you work together. It's super fun working with like a graphic designer where a lot of my stuff is mostly designed prototyping and research. When I work with somebody that can really help bring those ideas to life a lot higher quality than I could have ever done.

Tori Tauch: It's super fun and that was one of my favorite projects for sure.

Chantel Soumis: You bring up a good point about creative freedom really unlocks so much magic. Excuse me, I shouldn't have just eaten my lunch. Now it's stuck in my chat. Excuse me. Creative freedom.

Tori Tauch: you

Chantel Soumis: provides so much flexibility for the real experts, right? I think a lot of businesses, not I think, I know, I've seen it firsthand in my role as a fractional CMO. A lot of organizations, it's usually the C-suite CEO or founders that are so connected to their brand that they're very guarded in terms of exploring new ideas or...

Chantel Soumis: letting a designer take over and really breathe that life into it based on market research and data and analytics and real life problem solving. And I really wish more folks would realize, hey, trust the experts, right? There's a reason why you're not trusting Canva to build your rebrand or something like that, or your website, or doing automate my GoDaddy website through their AI tool, right?

Chantel Soumis: If we want to have a serious brand, we need to take ourselves seriously and hire serious help. So when you're working, and this is the little sidebar, but when you're working on trying to encourage that creative flexibility for a client, how do you set that tone and those expectations? So when you're going through the review process, you can make sure to showcase, look, this is evidence-backed.

Chantel Soumis: based on hundreds of research reports and so forth. Do you have a strategy? I've seen some of your documents before, so I know you do, but I wanna hear it from you specifically.

Tori Tauch: Yeah. So normally when I start a new project, I always go audience first. So really diving into what's the target demographic here? What kind of design trends are, is this group familiar with? What are they not so familiar with? What could be something interesting to introduce? Also really looking from like a competitive analysis standpoint. So what other brands in this space are doing and what is successful for them?

Tori Tauch: and one is not so successful and that we could take, maybe learn from and improve upon. I also, I think it's really easy for designers and I've learned this in school a lot through my professors. Designers have this tendency to always jump to like the first idea possible and then they'll start in these really high fidelity versions of wire frames and designs and things like that. And I actually have really learned that it's not the way to do it if you want to really push yourself

Tori Tauch: creatively, it's all about getting a pen and pencil, like get off your laptop, get off all the devices and just sit down and write ideas, draw. You can look at inspiration, but really just try to get as many ideas out as possible. I actually, I do this a lot at Stand Your Line. We do like a impact feasibility chart where I'll just try to crank out 80 to 90 different ideas and I'll rank them all.

Tori Tauch: according to how impactful is this and how feasible is this idea? And that really helps push like creatively. And then obviously you can get the team's feedback on the different ideas and talk to stakeholders and things like that. But that really helps like not jumping to the first couple ideas that you have, but just going back to basics, going back to drawing and writing and keeping your ideas in a notebook and that you can reference back later. I found that to be super helpful.

Chantel Soumis: I love that it's really interesting that you say that you designers tend to go with like their first design because in my perspective, what I've seen is analysis paralysis kick in, right? When you have too many options where you're like, I don't even know what's good anymore because I've done, you know, so many. Do you have tips or suggestions on how to avoid analysis paralysis in your design evaluation so that you can stay effective and efficient?

Tori Tauch: Hmm.

Chantel Soumis: with your job?

Tori Tauch: yeah, so I normally try to get as much feedback as possible. It's like really easy when you're designing something, you'll, you'll look at it for a couple hours. I'll think this is great. I'll come back the next day and I'm like, this is horrible. What was I thinking? so a lot of the time I really rely on the team, especially people from different disciplines that aren't necessarily designers.

Tori Tauch: Just getting that feedback. There's actually a couple of different ways you can kind of rank feedback. One way is like dot coding. You give everybody three, I guess, dots or whatever or sticky notes or whatever the indicator is and have them pick their top three options. And that really helps like consolidate ideas, especially if you've come up with several different wireframes or layout options or even for graphics.

Tori Tauch: colors for brands, can be helpful from like a really wide range of brand design projects.

Chantel Soumis: That's beautiful. I know that also having like a specific set of rounds of edits is a really good place to start. Otherwise, I feel like the rounds just keep going. I mean, they just keep going. They just keep on exploring more when we're really not exploring at this point. Like we're building an actual website. So setting the foundation and expectations, definitely a must when starting any project, let alone website. But

Tori Tauch: Mm-hmm.

Tori Tauch: Yeah.

Tori Tauch: Mm-hmm.

Chantel Soumis: Web design often battles with load speed and functionality when you're thinking about how to add in new animations or new graphics that are extremely high res. How do you balance beauty and performance in your builds?

Tori Tauch: I think a lot of it comes down to realizing how many assets you're adding into a site. I can really slow down things, especially with all the new animations people are adding, micro interaction, scroll animations. So really trying to keep that load kind of light. But at the same time, balancing that with something that really is really beautiful to look at, but also functions.

Tori Tauch: Super well most of the tools I use are no code and that really helps keep the the load Fairly light I know that a lot of the a lot of trending things right now are with animation and video and it's just important to always remember to use those sparingly because it will slow down your load time quite a bit

Chantel Soumis: it's so tricky to balance that. You you want to dazzle, but you can dazzle with still frames. You don't always need an animated image. What role, so speaking of loading times and all of the little details that you have to evaluate for responsiveness and conversions, what role does mobile responsiveness really play in conversions?

Chantel Soumis: what are the biggest mistakes you see brands making with mobile first designs?

Tori Tauch: Uh, the biggest mistake I think I've seen is designing a mobile version of a website, just like a shrunk down version. So it's just condensing everything into like this very small screen layout. And that doesn't always work the best because mobile a lot of the time functions differently. So there's certain hovers and little micro things you can add on a desktop with like a cursor and mouse that you're not going to see necessarily.

Tori Tauch: on a touchscreen and a lot of the time that can make things feel really cramped, especially if the text sizes aren't really optimized. I've noticed a lot of headers will always be super huge on mobile and look really nice on desktop, especially with the rise of this very brutalist design trend I've been seeing a lot. It's really big typography and it always looks absolutely amazing on desktop, but translating that design trends on mobile doesn't always work out the best.

Tori Tauch: So I would just say always evaluate the change you're making in desktop to mobile and how that's gonna translate.

Chantel Soumis: Beautiful, I know we already talked about CTAs, but CTAs are important whether you're mobile or desktop. I feel like they're almost more important on mobile because people are more click-heavy. When you're reviewing your CTAs, I know we've talked about different verbiage to use. How do you design them so users actually click? There's been a lot of research on difference color psychology and the colors you should use, the fonts you should use, all caps versus lowercase.

Chantel Soumis: What do you suggest or what are you seeing today to impact the efficacy of CTAs?

Tori Tauch: Yes, so there's a couple different, like UX laws that most designers will follow when trying to get users to click a certain action. Some of the most common ones, I've got four that I normally rotate around trying to use. Number one is Fitts' Law. So it basically just says that the time to move a target, to move to a target, heavily depends on the distance somebody has to travel to it. So the larger the button,

Tori Tauch: The bigger the click area, the more likely they are to hit that target. Really small CTAs that aren't very clear aren't necessarily going to come across super well. Number two is Hick's Law, which is basically the more options that you present to somebody, the longer it's going to take them to pick it. So if you're having multiple CTAs in the same area, it's going to be really confusing which one that they're actually supposed to go with.

Tori Tauch: Number three is Jacob's law, which basically is like people come into interfaces and designs with the mental model kind of already pre-determined. So they know what other websites and other apps feel like, and they're going to bring that, I guess, bias towards yours. So they're going to expect it to function very similarly. And that's why Apple has been super effective because across all devices, Mac,

Tori Tauch: iPhones, things like that, they all function the same. The apps all look the same and they all function the same. And that's what's made the system super easy for people to use. And the number four is the Vaughn Rest Drop. I think I'm saying that correctly. Effect, where basically when multiple similar items are shown, the one that's the most visually like distinct is the one that people are most likely to remember or choose.

Tori Tauch: And like an example, I see this on a daily is in the Amazon shopping. Whenever you go to pick a product, they'll have little tags like overall pick or Amazon's choice. And a lot of the times these are the most purchased products amongst a range of products that all look the same. It's just because they've added these little indicators that make it so distinct compared to the rest of them that a lot of the time people are most likely to choose that option.

Chantel Soumis: Huh, thanks for that little nugget of wisdom, Tori. How do you use analytics and behavior data to inform your design decisions, especially after a launch?

Tori Tauch: I think it really comes down to looking into the site analytics and what pages are performing the best. How long are people on these pages and what content are they going to? A lot of the earliest, a lot of the earliest like design research can be done in the prototyping stage, I would say really showing people.

Tori Tauch: your designs, getting them in front of your users, seeing how they interact with them, and then adjusting accordingly. After launch, you just are really monitoring how it's performing, what content's doing well, what areas are getting missed, and why is that? Is it a color issue? Are you using too much color on the screen? Is this too distracting compared to what you want them to do over here?

Tori Tauch: Is it a content issue? Is the wording of it not clear? There's a lot of like research into like UX micro copy and all these tiny indicators and what they can tell people that they're supposed to do and how they're supposed to interact with something.

Chantel Soumis: There's always something to optimize, I feel like. And it's hard as a marketer, especially as a fractional CMO, when I see websites that have been ignored for months, if not years. They have not done anything with, they haven't reviewed the data, they haven't updated any CTAs, they haven't included any new pop-ups or newsletter registrations or anything like that. It breaks my heart because the website is the best asset.

Chantel Soumis: To date, mean, that's what we're optimizing right now for ChatGPT to include in their results when people are searching for things. So it's really critical that when people, businesses budget for their year, they always include a line item for marketing and they always include website in that budget. It's critical. if speaking of budget, speaking of your website, if someone's website feels outdated,

Chantel Soumis: but they're on a budget, they're not ready for a full redesign, what are a few things they can do today to improve their user experience?

Tori Tauch: The quickest, I think, thing for people to get a really fresh idea of how their website is functioning is to show it to people outside of their discipline and see how they react to what you're showing them. can they tell you what the site is for? Can they tell you what you're supposed to do for it? I think it's really easy whenever you're operating in an industry with people who know the same verbiage as you, who know the same, come into it with the same kind of ideas.

Tori Tauch: And showing your site and your designs to people outside of that, it's kind of important to get that fresh perspective. Because a lot of the time people internally who know what a fractional marketing officer, their idea of what that wording should sound like is very different from somebody who's in tech or like I've, I've run my, dad's an engineer. I've run projects by him so many times, whether I'm designing for a

Tori Tauch: nail salon or a hair cutting place. I'm like, dad, can you tell me how to book an appointment on this website? And if he can navigate it, that helps me. And it's a really low fidelity way to do that. Just getting it in front of people that aren't in the thing that you're working within. some other easy ways would be really just updating, looking at your imagery, looking at your type sizes.

Tori Tauch: your colors that you're using, whether or not that they pass accessibility standards, because a lot of the accessibility standards will update and change in terms of like contrast and things like that. So checking those colors, seeing if they pass, if they fail, and updating your imagery. People actually process visuals and imagery 60,000 times faster than they do words. So if your imagery itself isn't communicating what

Tori Tauch: your site is supposed to do or how it's to function for someone. That's a really quick way to update your website.

Chantel Soumis: genius. Great way to bring it back to design. I love it. Tori, thank you so much. You shared so much about user experience design, how to improve your CTAs to get more conversions, why make it a priority in your marketing budget, and so much more. So thank you for bringing your wisdom, bringing your statistics in your back pocket.

Chantel Soumis: sharing all the laws in user experience or user interface management and people can connect with you. How? How should people connect with you?

Tori Tauch: I'm on LinkedIn. Just my first and last name kind of thing. Yeah.

Chantel Soumis: And people should make sure to definitely check out stayinyourlaneco.com. That's another one of Tori's projects that she's been penning away at. And you can learn a lot more about web design, working with Tori, working with the team at Stay In Your Lane. So signing off, but the hustle's still buffering. Refresh that mindset and let's crash the algorithm again soon.