Ride or Die

Ride or Die is an innovative murder mystery game that transforms your city into the scene of an engaging, interactive mystery. The game allows players to choose a driver, solve clues, and explore local landmarks, all while unraveling an exciting story. This case study details my design process, challenges, and outcomes in creating the Ride or Die website.

• Role: UX/UI Designer and Front-End Developer

• Responsibilities:

  • Designed the website layout and structure.

  • Developed the front-end using HTML and CSS.

  • Ensured a seamless user experience across devices.

The goal of the project was to create a visually engaging and user-friendly website that highlights the game’s features and stories while encouraging users to schedule their gameplay.

• Mystery enthusiasts seeking an immersive experience.

• Families, friends, and team-building groups looking for a unique activity.

• Tourists and locals interested in exploring their city in a new way.

1. Balancing Information and Visual Appeal:

   • The website needed to convey a lot of information about the game’s features and stories without overwhelming users.

2. Responsive Design:

   • Ensuring the layout and interactions were consistent across various screen sizes.

3. Encouraging User Action:

   • Motivating users to schedule their game by highlighting the unique aspects of Ride or Die.

1. Research and Inspiration

To begin, I researched:

• Competitor websites to identify trends and gaps.

• User preferences for mystery games and city tours.

2. Wireframes and Prototyping

Using Figma, I created low-fidelity wireframes to map out the website’s structure:

• A header to grab attention with the game’s name and tagline.

• Feature cards to explain gameplay mechanics.

• Story cards to showcase the different game scenarios.

• A call-to-action (CTA) button to schedule a game.

3. Visual Design

I chose a color palette inspired by the mystery theme:

• Primary Color: Deep purple (#1c1a54) for the background to create an immersive, mysterious atmosphere.

• Accent Colors: Light purple (#bb86fc) and bright purple (#6200ee) to highlight key elements like CTAs and headings.

Typography was selected for readability and style:

• Headers: Sans-serif font for modern appeal.

• Body text: Clean and simple font for easy reading.

4. Implementation

The website was built using:

• HTML: Structured content with semantic elements for accessibility.

• CSS: Styled the layout and ensured responsiveness using flexbox.

Key Features:

• Feature Cards: Highlighted gameplay mechanics such as interactive clues, driver selection, and city exploration.

• Story Cards: Presented game scenarios with clear descriptions and CTAs to choose a story.

• Responsive Design: Used media queries to optimize the layout for desktops, tablets, and smartphones.

5. Testing and Iteration

After development, I tested the website for:

• Responsiveness: Ensured elements adjusted gracefully on different screen sizes.

• Usability: Verified that users could easily navigate and interact with the website.

• Performance: Optimized images and code to improve loading speed.

Feedback from peers led to several improvements:

• Increased spacing between sections for better readability.

• Added hover effects on cards and buttons for interactivity.

• Refined the call-to-action button to make it more prominent.

The final website achieved its objectives by:

1. Enhancing User Engagement:

   • The visually appealing layout and clear navigation encouraged users to explore the game’s features and stories.

2. Driving Conversions:

   • The prominent CTA buttons effectively guided users to schedule their game.

3. Seamless Responsiveness:

   • The website provided a consistent experience across devices, increasing accessibility and usability.

1. Iterative Design is Crucial:

   • Testing and peer feedback played a significant role in refining the design.

2. Clarity and Focus Matter:

   • A clean layout and focused messaging prevented information overload.

3. Attention to Detail Improves Usability:

   • Small changes, such as spacing adjustments and hover effects, significantly enhanced the user experience.

• Conduct user testing to gather feedback from actual players.

• Implement additional features, such as a FAQ section and player testimonials.

• Explore integrating animations to make the website even more dynamic.

The Ride or Die website successfully showcases the game’s unique experience while delivering an engaging and user-friendly platform. This project reinforced my skills in UX/UI design, responsive development, and user-centered design principles.