From first impressions to retention: the role of style in UX design

Exploring how modern design choices keep users engaged and connected.

ShreeyaVRokade

Bootcamp

5 min read

Dec 7, 2024

Think about the last app you downloaded. Was it the clean, intuitive interface that reduced friction, or the micro-interactions that guided your navigation seamlessly? Perhaps it was how the design made the experience intuitive, as if the app just ‘understood’ you. As UX designers, we constantly strive to strike this balance between aesthetics and usability. Recently, I explored three websites with distinct design styles, uncovering how thoughtful UX blends beauty and function to create truly memorable experiences.

How interfaces evolved: from function to emotion

Interface design has come a long way. Decades ago, we relied on green text on black screens: functional but uninspiring. In the 1980s and 1990s, graphical user interfaces (GUIs) like Windows and Macintosh shifted the focus to usability and aesthetics. Today, designers have a wide range of styles to choose from, including minimalism, skeuomorphism, flat design, and neumorphism. These trends show how design has evolved beyond utility to create experiences that feel personal and engaging.

Fashion plays a significant role here. As Barnard (2002) describes, fashion communicates identity and emotion, and UX design is no different. Take Lemonade, an insurance platform that uses clean, modern minimalism with flat design and animations to simplify complex tasks. Bright pink call-to-action buttons energize the experience, while clean illustrations make the platform approachable. This isn’t just about aesthetics; it’s about fostering trust and relevance.

Fashion isn’t about utility. It’s about identity — and so is UX design.

Style markers in UX: lessons from four designs

Magoz

Magoz is an artist based in Malmö, Sweden, focusing on visual communication, problem-solving, and minimalism, with a portfolio website displaying his work, shop, and blog.

Magoz’s portfolio is a celebration of minimalism enhanced with illustrative animations. The layout prioritizes simplicity, using white space to let the artwork take center stage. Subtle animation loops create a narrative flow, making the portfolio feel interactive while maintaining user engagement. Overemphasis on visuals can make navigation less intuitive.

Lemonade

Lemonade is a tech-driven insurance company offering policies for renters, homeowners, car users, and more, simplifying insurance processes to make them approachable for users.

Lemonade’s design embraces modern minimalism with flat design and illustrative animations. The layout is clean and spacious, using ample white space to simplify navigation. Bold, energetic pink call-to-action buttons capture user focus instantly, while micro-animations streamline navigation through complex insurance workflows, reducing cognitive load and enhancing engagement. This balance between approachability and functionality helps demystify a traditionally dry industry, making Lemonade’s platform welcoming and intuitive.

Ahoi Schmerikon

Ahoi Schmerikon is a Swiss bar and lounge site offering information on local events, a detailed menu, and the bar’s history, with a design that evokes a community-centric, vintage ambiance.

Ahoi Schmerikon blends skeuomorphic textures with minimalist layouts to create a nostalgic, welcoming atmosphere. Vintage typography and textured wooden elements evoke a sense of nostalgia, while the minimalist layout maintains clarity and accessibility. This combination of warmth and functionality highlights how thoughtful use of skeuomorphism can complement minimalist principles without overwhelming the user.

Bruno Simon

Bruno Simon’s 3D portfolio exemplifies gamification combined with skeuomorphic elements. Users navigate the site by driving a virtual car, creating an interactive experience that feels playful and engaging. Real-world metaphors like lane markers and obstacles amplify the skeuomorphic design, while spatial 3D animations immerse users, creating an intuitive and memorable browsing experience. While the gamified navigation is entertaining, it occasionally distracts from the portfolio’s primary goal of showcasing the designer’s work.

Finding balance: the key to timeless design

Creating an emotional connection is just as important as solving a user’s problems. While individual styles like minimalism, skeuomorphism, or gamification can be impactful on their own, blending styles is often necessary to keep designs versatile and engaging. Proportion is the key to making this work.

Ahoi Schmerikon exemplifies this by combining vintage skeuomorphic textures with clean minimalist layouts. Similarly, Lemonade layers subtle animations onto flat design, guiding users through complex processes while maintaining clarity. These examples show that thoughtful execution of styles, rather than following trends, creates designs that resonate with users.

Designing with intent: practicality meets emotion

What makes designs like Magoz and Bruno Simon remarkable are their abilities to combine practicality with emotion. However, balance is key. Bruno’s gamified 3D experience is engaging but can distract from its primary purpose. Similarly, Magoz’s emphasis on visuals enhances storytelling but can make navigation less intuitive. These examples highlight the importance of aligning style with functionality.

As Pan et al. (2012) noted, overusing stylistic elements can overwhelm users. Thoughtful design harmonizes aesthetic appeal with usability, ensuring the product’s core values are communicated effectively without overshadowing functionality. Lemonade strikes this balance by combining minimalism with approachable animations, making insurance feel less intimidating.

As Joe Sparano said, “Good design is obvious. Great design is transparent.”

References

Barnard, M. (2002). Fashion as communication. Routledge.

Pan, Y., Roedl, D., Blevis, E., & Thomas, J. (2012). Re-conceptualizing fashion in sustainable HCI. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1005–1014). ACM. https://doi.org/10.1145/2207676.2208545

Lemonade insurance. https://www.lemonade.com

Magoz portfolio. https://magoz.com/

Bruno Simon portfolio. https://bruno-simon.com

Ahoi Schmerikon. https://www.ahoi-schmerikon.ch/