The RecShop Branding & Website


Client:
We Design For Community & Greater London Authority
Designer: James Li

Year: 2023

Category:UI, UX, Brand Identity

Project Overview


Music Service Website for London Community Culture


The RecShop, backed by the Mayor of London and Greater London Authority, is dedicated to assisting young people in disadvantaged communities to pursue their music aspirations.

I aim to further strengthen the connection between designs and the community by incorporating feedback and participatory design elements, ensuring that I design authentically for the culture.


Client Requirements:

  • Redesign the user experience of the website.
  • Establish design direction based on London's music community culture.
  • Highlight brand positioning characteristics reflected in the website and product services.

  • It involved providing design support to this community organization, collaborating on the redesign of its website, and upgrading its brand identity.  It was a fulfilling experience to utilize my design expertise and knowledge of youth culture to contribute to the community. The project received recognition and acclaim from wedesignforcommunity, Greater London Authority, The RecShop, and the community.

    My Contributions:

  • User Research and Insights: Conducted comprehensive research on London's community music culture, including user and expert interviews, to gather insights that inform design decisions.
  • Wireframing: Created wireframes to visualize the website's layout and structure, ensuring a user-centered design approach.
  • UI Design: Developed the user interface design, focusing on aesthetics, usability, and alignment with the brand identity.
  • Brand Identity Enhancement: Collaborated on upgrading the brand identity to ensure a cohesive representation of The RecShop's vision and mission.






















  • (01)Project Introduction


    The RecShop, supported by the Mayor of London and the Greater London Authority, is dedicated to helping young people in disadvantaged communities pursue their music aspirations.

    (A) The Goal



    The goal is to strengthen the connection between design and the community by incorporating feedback and participatory design elements, ensuring authentic representation of the culture. This involves providing design support to the community organization, collaborating on the website redesign, and upgrading its brand identity.















    (02)Research





    (A) Objectives


  • Understand the specific challenges faced by the London music community.
  • Identify cultural elements that should shape the design direction.
  • Understand user needs and expectations.
  • (B) Research Methods


  • Conducted semi-structured user interviews to gather insights on London's music culture.
  • Engaged with the community through interviews and workshops.





  • (C) Personas





    Persona: Malik




    Background:

    Malik grew up in a diverse community in Camden, North London. He’s been obsessed with beats since he was 15, mixing sounds from his favorite grime and drill artists. While he has a part-time job at a local café, his real dream is to become a music producer. He’s been trying to break into the scene but feels overwhelmed by the lack of access to affordable studio time and professional guidance.
    Goals:

    • Learn professional-level production skills.
    • Collaborate with other aspiring artists.
    • Access affordable equipment and studio space.

    “I’ve got the passion and ideas, but without access to the right tools or people, I feel like I’m just stuck on pause.”

    Challenges:

    • Struggles with finding local mentorship or opportunities to network.
    • Finds existing platforms too complex and intimidating for newcomers.
    • Feels disconnected from the wider music scene due to financial constraints.
    User Journey Analysis:

    For users like Malik, the platform should emphasize accessibility to resources and connections within the music industry. The website should feature clear, easily navigable sections that allow young musicians to find affordable studio spaces, tutorials, and mentorship programs.






    Persona: Aisha




    Background:

    Aisha works for a local nonprofit, helping disadvantaged youth find creative outlets through music. She’s passionate about supporting young talent but often faces challenges in securing resources for her programs, wants to see more youth from her community on the main stage.
    Goals:

  • Connect young artists to mentorship and recording opportunities.
  • Build partnerships with larger music organizations and influencers.
  • Encourage local businesses to sponsor and support talent.

  • “These kids have so much potential, but they need a place where they can connect with the right people and be seen.”

    Challenges:

  • Hard to find user-friendly platforms that combine professional opportunities with a community focus.
  • Lacks time to navigate complex websites.
  • Needs clearer branding to pitch to potential sponsors and partners.
  • User Journey Analysis:

    Aisha’s persona highlights the need for simplicity and community-centric design. A dedicated section for community leaders or advocates can facilitate mentorships, partnerships, and event coordination. Aisha would benefit from intuitive navigation, clear branding that reflects community values, and easily accessible resources that allow her to showcase youth talents and connect with sponsors or collaborators.






    (D) Research Summary


    Our extensive research for The RecShop project, a hub dedicated to nurturing London's music culture, provided valuable insights into prevalent challenges and user expectations. By aligning our design approach with these insights, we focus on addressing accessibility challenges, enhancing brand clarity, achieving UI consistency, and fostering a strong sense of community. Incorporating personalised elements, we aim to deliver an enriching and inclusive user experience within London's vibrant music culture.






    (D) Key Findings



    Accessibility Challenges Impacting User Engagement

    Navigation Complexity: Users often struggle with intricate website structures, hampering their ability to smoothly browse through the site. Simplifying navigation and ensuring essential features are easily accessible emerged as a crucial need.
    Unclear Brand Concepts Leading to User Disconnection

    Lack of Brand Representation: Users expressed a disconnect with the brand due to inconsistent branding elements across the website. Clarity in brand identity and a cohesive representation were emphasized for a stronger user-brand relationship.
    UI Design Lacking Uniformity and Visual Appeal

    Inconsistent UI Elements: The design lacks uniformity, impacting the overall visual appeal and user experience. Creating a standardized UI design while maintaining creativity is fundamental for engaging users effectively.
    Desire for Community-Centric Features and Engagement

    Community Involvement: Users are keen on interactive features that facilitate engagement within the music community. Platforms for sharing experiences, collaborating with fellow musicians, and interactive forums were suggested for a more community-driven approach.














    (03)Design


    (A) Design Overview


  • Website Accessibility and User Experience
  • The website will be designed to be intuitive and user-friendly, ensuring seamless navigation of music events, courses, and resources.
  • Clear Presentation of Brand Concepts
  • Emphasizing brand positioning, the design will integrate the core philosophy of The RecShop, ensuring users understand its vision and mission.
  • Connecting North London's Music Enthusiast Community
  • The RecShop aims to be a central hub for London's music culture, fostering connections among music lovers and their aspirations.
  • (B) Testing and Iteration


    Throughout the development of The RecShop project, user feedback and stakeholder input have been prioritized. Key insights from prototype testing and design evaluations ensure the effectiveness of the project design and functionality.

    Regular user testing sessions will be conducted, inviting target users and stakeholders to provide feedback on The RecShop platform, focusing on key aspects of user experience.



  • (C) Site Map




    (D) Wireframes




    Sketches










  • (E) Low Fidelity Prototype






    (F) UI Design Details



      





     



































    JAMES LI WORKS

    I’m a London-based digital designer who specialises in branding, marketing, motion, and web design, and firmly believes in a core ethos: culture over design☯︎. If you're looking for a full stack designer or try to build your brand and website, or even some advice, please don't hesitate to get in touch, I'm here to help! 




    Services

    • Web Design & Management
    • Brand Identity
    • Motion & Multimedia
    • Social Content





    ©All rights reserved by James Li