Redesigning a website for TenSlam. A minimalist transformation

Web Design
TenSlam website homepage after redesign
I'm willing to present the full information on the interview.
Client
TenSlam
Project Type
Web design
Project Year
2023
My role
Apply brand styles to the design, reorganize content
Tools
Figma

In the fast-paced world of UX design, there are times when we face exciting challenges that push our creative boundaries. Recently, I embarked on one such adventure - a task to redesign the landing page of a tennis app that had received user feedback highlighting its lack of consistency and clutter. To make things more interesting, I had to find a solution that required minimal effort from the development team due to our tight deadline. So, let me take you through my journey of transforming this landing page into a clean and captivating user experience.

Arrow
Homepage of TenSlam website before redesign
Homepage of TenSlam website after redesign

The problem

The website lacks a brand identity. There are too many themes and colors. That makes it hard to focus on what matters and easy to forget the company.

The solution

Apply brand colors and logo to the design. Make the content more readable and consistent. Remove unnecessary elements and add more whitespace.

Audit

Taking into consideration the feedback gathered on the first version of the website I inspected myself, how many colors and fonts were used. The result surprised me as it turned out that the choice of colors, fonts and font weights was pretty accidental.

Applying branding

My first step was to leverage the power of branding to breathe life into the page. Choosing the right colors is crucial, as they evoke emotions and set the tone for the entire design. I settled on a vibrant combination of almost black with a green tone and vibrant green. These colors not only aligned with the app's brand identity but also injected energy and a sense of community into the landing page.

Comparison of TenSlam website before and after redesign

Reorganization

Comparison of TenSlam website before and after redesign

Addressing the clutter issue was a top priority. I embraced the philosophy of minimalism, simplifying the layout and organizing the information hierarchy. Each element was carefully considered to ensure it served a purpose and had enough breathing space. By prioritizing the most important content and relegating secondary details to supporting sections, I created a clean and streamlined experience that guided users effortlessly through the app's features.

Comparison of TenSlam website before and after redesign

Animations

To add that extra touch of engagement, I incorporated subtle animations into the page. However, I had to be mindful of the development team's workload. So, I opted for animations that were easy to implement yet captivating for the users. Imagine gentle fade-in effects for images, seamless sliding transitions for text elements, and playful button animations that enticed users to interact. These animations added a touch of delight and interactivity without placing an undue burden on the developers.

Example of simple animation for TenSlam website. Starts dark, finishes with picture

Test

To test my work I asked some friends and strangers in the cafeteria those 3 questions:

In conclusion, this project highlighted the power of simplicity, cohesion, and thoughtful design choices. By incorporating branding elements, utilizing captivating animations, and decluttering the page, we transformed TenSlam's landing page into a visually appealing, consistent, and user-friendly portal. As the next step, I would take care of the content and structure of the website to optimize SEO and make the user experience positively unforgettable.

Guidelines

To make sure that developer follows my choices I created guidelines for each page. From the feedback I received on this step, it was a very helpful piece of the design system.

Guidelines for the homepage of TenSlam

Check out my other projects!