FROW Live: Setting the Stage for Live Artist Giveaways

Concept Development

Starting with the elements at hand - video stream, community chat, reaction buttons, and vinyl record details - the task was to design a cohesive live event experience.

To keep the process efficient, I approached each feedback session with at least three design versions. While the team had certain expectations, I felt it was beneficial to explore varied designs. This approach paid off, as our final design became a mix of my proposals and the team's feedback.

Feedback was invaluable throughout. My goal was to ensure that every design element, from the layout decisions to colour choices, was in tune with user needs and FROW team's vision.

Design

Live stream

As I embarked on the design phase, my primary consideration was the presentation of the video stream. The original layout was horizontal, and I explored this further. However, to enhance user immersion, I proposed a shift to a vertical, full-screen video format reminiscent of a FaceTime call. Presenting these initial proposals to the team was crucial. It set the stage for deeper discussions, allowing us to weigh the merits and potential drawbacks of each design.

Having decided to adopt a vertical, full-screen format for the video stream, I then focused on further developing the user's journey during a live event. This decision provided a clear direction for refining the layout and enhancing the overall user experience.

Balancing the video stream with other elements like the chat, reactions, and vinyl record details was a real challenge. The goal was to ensure a logical flow for users, adhering to design principles like the law of proximity and usability.

Giveaway

Moving to our next challenge, we turned our attention to reimagining the giveaway experience. My initial approach was to incorporate a realistic vinyl record illustration to represent the giveaway product. However, we dropped the idea due to practical considerations such as the diversity in vinyl colours and potentially adding other collectables to the offering in the future.

We went for a simpler layout that shows the record cover, a smaller video stream window, and a preview of the record that's playing. A notable challenge with this approach, was the team's desire to display individual emoji reactions around the vinyl cover, aiming to visually capture user engagement. The goal was to maintain a clean design, even with numerous emojis on the screen. Another complexity layer was ensuring colour harmony between album artwork and emojis.

Our solution was twofold: we limited the number of reactions and introduced the option for the team to select emojis based on the artist and album theme. This also supported the team's objective of using app screenshots for social media promotion. After several iterations, we settled on a design that balanced all these considerations, aligning with the team's vision for the giveaway page.

Interactive Prototype

After completing the user flow auxiliary screens, like the waiting room, winner announcement, and event exit page, our focus shifted to simulating the dynamic animations within a high-fidelity prototype, particularly the intricate cloud of emojis.

Despite the time constraints, I chose Protopie over other tools for its superior flexibility in animation, notably its capability to handle logical expressions, which was essential for randomly placing emojis on the screen and simulating different numbers of participants reacting at once. As I was navigating Protopie for the first time, Chat GPT became an indispensable aid. It bridged my knowledge gap, enabling me to develop a functional prototype within a day, thus keeping us on schedule.

This prototype was pivotal in providing the team with a realistic experience of the live event reactions and served as a clear visual guide for the development team on interactions and transitions. Upon review, the FROW Live team confirmed the prototype met their expectations, marking a successful conclusion of this project.

Prototype link

Reflection and Learnings

The FROW Live project was a whirlwind, characterized by tight timelines and the need for rapid decision-making. Reflecting on this journey, several key learnings stand out:

1. Flexibility in Tool Selection: The choice to use Protopie highlighted the importance of selecting the right tool for the job. While Figma is a powerful design tool, Protopie's capabilities were better suited for this project's specific needs, especially regarding intricate animations.
2. Value of Rapid Learning: The assistance of Chat GPT in quickly getting up to speed with Protopie underscored the significance of leveraging available resources. In fast-paced projects, the ability to learn on the go can be a game-changer.
3. Collaboration is Key: Working closely with the FROW Live team was instrumental. Their feedback and insights not only shaped the design but also ensured that the final product was in line with their vision.
4. Prototyping as a Communication Tool: The interactive prototype was more than a design validation tool. It bridged the gap between design and development, providing a clear visual guide for the dev team and ensuring everyone was on the same page.

In hindsight, while the project had its challenges, it was a testament to the importance of adaptability, continuous learning, and open communication. It was a reminder that in design, as in many fields, the journey is as valuable as the destination.

Conclusion

Stepping into the FROW Live project was a refreshing change of pace. After years dedicated to web SaaS platforms, diving into the realm of iOS and its guidelines was challenging and invigorating. As someone with a passion for music, working on a product in this industry was particularly rewarding. It wasn't just about design but about merging my professional expertise with a love for music. The project was a reminder of the joys of stepping out of one's comfort zone and the unique experiences that come with it.