Get Bookt

UX/UI Case Study: Creating a Splash Screen Animation for “Get Bookt”

Project Title: Splash Screen Animation Design for “Get Bookt”

Overview

Client: Get Bookt – A platform for booking events and venues.

Project Goal: Design a splash screen animation that enhances the user’s first interaction with the app, creating a memorable, engaging experience. The animation will feature a bell that rings and seamlessly transitions into a location icon, aligning with the app’s brand and purpose of connecting users with event venues.

Problem Statement

The splash screen is a critical moment in the user’s journey, providing the first impression of the app. The objective was to create an engaging and simple animation that:

• Aligns with the core functionality of the app: connecting users with venues.
• Communicates the app’s playful and user-friendly nature.
• Establishes a strong brand presence without extending load times.

Challenges

1. Brand Integration: Ensuring the animation felt natural and on-brand for “Get Bookt,” which focuses on venues and bookings.
2. Timing: The animation had to be smooth and fluid, but concise enough not to disrupt the user’s experience during app startup.
3. Visual Simplicity: Creating an animation that is simple yet dynamic to convey the purpose of the app without overwhelming the user.

Process

1. Research and Ideation

Before jumping into the design, I researched industry-leading splash screen animations and conducted a quick competitive analysis of apps with similar booking functionalities. I noticed that the most effective splash screens had:

• Minimalist design to reduce cognitive load.
• Clear brand cues that transition smoothly into the core UI.
• Short, visually engaging animations that didn’t feel excessive.

This led me to the concept of using the bell as a starting point for the animation. The bell symbolizes notifications and the idea of being “alerted” to available bookings, while the location pin reflects the app’s core function of finding and securing venues.

2. Sketching the Flow

I began by sketching the flow of the animation, keeping it simple but informative:

1. Bell Icon: A bell that represents notifications, bookings, and the user being “alerted” to options.
2. Ringing Motion: The bell rings once as the app loads, drawing attention and creating a light, welcoming interaction.
3. Transformation: The bell morphs into a location pin, symbolizing the app’s focus on helping users find venues.
4. Final State: The location pin solidifies and stays on screen for a moment before the user is directed to the home screen.

3. Wireframes and Prototyping

Using Figma, I wireframed the basic splash screen layout, ensuring the position of the bell and location pin was centered to maintain visual balance.

I then used After Effects to prototype the animation:

• Step 1: The bell shakes slightly before producing a subtle sound, signifying a booking alert.
• Step 2: The ringing bell contracts slightly, giving a sense of compression.
• Step 3: The bell’s top morphs into the pointed shape of a location icon, and the bottom curves smoothly to complete the transition.
• Step 4: The location pin stands still, fully visible as the main splash screen logo before fading into the home screen.

4. Design Considerations

• Color Scheme: I used the brand’s colors (soft blue and white) to maintain consistency and reflect the app’s approachable and calm vibe.
• Motion Speed: The animation is kept under 2 seconds to ensure it feels fast and smooth, contributing to a lightweight experience that doesn’t delay user engagement.
• Sound Design: A soft, single bell chime accompanies the ringing motion, adding a subtle auditory element that reinforces the visual cue.

5. User Testing and Feedback

I tested the animation on different devices with varied performance levels to ensure the smoothness of the motion and to verify load times were not affected.

User feedback indicated:

• The bell-to-location icon transition was intuitive and clearly communicated the app’s purpose.
• The sound was perceived as pleasant, and users appreciated the added engagement without it feeling intrusive.
• Users liked that the animation was brief and did not delay the experience of getting into the app.

Solution and Outcome

The final animation successfully achieved the goal of providing a sleek, branded experience for “Get Bookt.” The combination of sound and motion brought a layer of interactivity that enhanced the onboarding process. By reinforcing the brand identity with a meaningful transition from bell to location pin, the animation contributes to the overall UX in a subtle but impactful way.

Key Results:

• Branding Impact: Users reported a stronger connection with the brand after seeing the animation.
• Engagement: Users expressed that the animation felt “fun” and “welcoming,” making the app feel more approachable.
• Performance: The 2-second animation was optimized to not impact app performance, ensuring quick load times and fluid transitions.

Takeaways

This project highlighted the importance of balancing creativity with functionality in UX/UI design. A splash screen is often a user’s first experience with an app, and even small details like animation can have a significant impact on brand perception and user engagement. The Get Bookt splash screen animation successfully communicated the app’s core value while maintaining a lightweight, engaging experience.

Tools Used

• Design: Figma
• Animation: After Effects
• Prototyping: Principle
• Sound Design: Audacity

Final Design

• Color Scheme: The onboarding screens used a blue (#007AFF) and white color palette, consistent with the rest of the app’s design, creating a cohesive and modern feel.
• Typography: A clean sans-serif font was used, with larger, bold text for headings and action buttons, ensuring readability and accessibility.
• Visual Elements: Circular icons, full-screen images, and simple navigation buttons guided users through the onboarding process without overwhelming them.

Conclusion:

The Hartists onboarding process successfully introduces new users to the app’s core features in a simple, visually engaging way. By focusing on user needs and preferences, the onboarding design:

• Minimizes friction, allowing users to quickly start discovering events.
• Provides clear instructions on how to use the app’s most important features.
• Encourages users to create an account after they have already engaged with the app.

By streamlining the onboarding process, Hartists ensures that users are more likely to stay engaged and return to the app, leading to higher user retention and satisfaction.