UX Objectives:

• Create a clear, user-friendly information architecture to help visitors easily navigate and find relevant content

• Develop an engaging, visually-appealing design that aligns with the brand's approachable and empowering tone

• Optimise the website for seamless accessibility and usability across desktop and mobile devices

• Implement intuitive way finding and CTAs to guide users towards taking actionable steps to improve their nightlife experiences

Research

The project kicked off with comprehensive user research, including surveys, interviews, and competitive analysis. Insights revealed key issues, such as confusing interfaces, overwhelming information, and a lack of tailored content.

UX Challenges:

• The website covers a wide range of sensitive topics related to substance use, personal safety, and mental health - the design and content needed to be thoughtfully crafted to be supportive and non-judgmental

• The target audience includes a diverse group of users, from young nightlife-goers to community support workers, each with varying levels of familiarity with the subject matter

• The website needed to balance providing comprehensive information with maintaining a clean, uncluttered layout that doesn't overwhelm users

Key UX Improvements:

• Restructured the information architecture to group content into clear, user-focused categories (e.g. "Prepare", "Be Sound", "Stay Sound")

• Designed an visual identity with warm, approachable color palette and friendly iconography to cultivate a welcoming atmosphere

• Implemented responsive design principles to ensure seamless accessibility and usability across devices

• Strategically placed CTAs and clear navigational elements to guide users towards taking desired actions (e.g. accessing support resources, learning intervention techniques)

• Incorporated accessibility best practices, such as proper colour contrast, semantic HTML, and keyboard navigation, to cater to users with varying abilities

Design Process

1. Ideation and Wireframing: Building on the research findings, initial wireframes were crafted to enhance navigation and simplify the user journey, allowing for rapid feedback and adjustments.

2. User Flows: Ideal user flows were mapped out to illustrate the paths users would take to access resources, such as finding safe transportation or discovering local events. This step helped pinpoint potential obstacles and areas for improvement.

3. UI Design: With user flows established, the UI design phase commenced. A fresh, vibrant color palette was selected to replace outdated elements. Larger visuals and increased white space improved readability and overall attractiveness.

4. Interactive Prototyping: Prototypes were developed using tools like Sketch and InVision, providing stakeholders with a tangible experience of the redesigned app's functionality and interactions.

5. User Testing: The prototypes underwent usability testing with real users. Feedback indicated areas needing refinement, such as clarifying icons and simplifying navigation for quick access to key information.

6. Iteration and Finalisation: User feedback was incorporated, leading to iterative design enhancements. Micro-interactions were added to foster a more engaging and responsive experience. The final design was captured in a detailed style guide.

Conclusion

The new SoundOut website has received positive feedback from both regular users and new visitors. The clean, intuitive layout and supportive tone have helped lower barriers to accessing important information and resources. Analytics data shows increased engagement, with users spending more time on the site and converting at higher rates on key actions. Overall, through thorough research, iterative design, and user testing, the campaign effectively transformed into a more interactive and user-friendly platform, ultimately fostering an engaged community committed to safer nightlife.