Plural Site Design




My Role: UX&UI Design | Design System 


Duration: August 2023 – December 2023












PROJECT OVERVIEW


Plural is a dynamic creative agency and content production studio nestled on the vibrant Lower East Side of Manhattan. Over the past five years, we've forged valuable partnerships with diverse brands and industries. As we gear up for the new challenges of 2024, we've set out on a mission to imagine our new website. Our goal is to vividly tell our story, shine a light on our mission, articulate our value, and authentically connect through our voice.


GOALS


Our primary objective is to craft a user-centric website that seamlessly delivers information catering to a wide array of user behaviors. We aspire to marry innovative and engaging design with effortless accessibility, facilitating deeper engagement while simplifying contact methods.


MY INVOLVEMENTS IN THIS PROJECT


Conducting user interviews, designing low-fidelity interfaces, prototyping the interaction in Figma, building out the live site in Webflow, and testing user flows.


( ︎︎︎SEE THE LIVE SITE HERE )
( ︎︎︎SEE FIGMA DESIGN SYSTEM FILE HERE )









THE SITE








PART I : DISCOVERY



When I first started, I didn't have a clear mission or any specific goals for the website. I decided to conduct user interviews to get a clear picture of how our primary users went about exploring a brand.

I interviewed four people in the marketing industry who work under various principles and specialties. My goal was to understand what users expect when they browse a website to learn about a brand.




Research Findings




  • The navigation of a website needs to have a smooth/User-centered design

Users were frustrated if they couldn't find the information they needed. Methods for contacting the brand, as well as anything else users are looking for, must be easily accessible. It also reflects the values of our studio, making users feel welcomed and personalized.

  • Visual comes first

Users get drawn into visual content more than text. Users expected to have an attention grabber as an introduction—visuals lead to reading text.

  • Informative and captivating content structure

Users expected a personal tone to take them on a journey through the information.




Balancing User Needs With
Business Goals



The initial user research uncovered some of users' expectations regarding exploring a brand, such as that the process of exploring a brand could be as smooth as reading a story. I decided my main goals were to:


  • Optimize the website for easy access to information for all users, regardless of their preferred mode of access.

  • To encourage deeper user engagement and a positive user experience, create a visually appealing and engaging website.

  • Streamline the methods of contact to make getting in touch easier and improve the overall user experience.










PART II: CRAFTING THE MOSAIC OF DESIGN




In order to better align with everyone’s ideas, we didn't jump into revamping the website right away. To maximize and enhance our creativity, each team member plunged into their own creative zone, sketching and building individual plans. We enthusiastically embraced creative brainstorming, encouraging wild ideas for an engaging digital universe.


However, the actual magic happened when we brought these different points of view together, weaving them into a united, seamless design. It was like organizing a symphony: every distinct tone added to a lovely creation.







Aggregated Wireframe 



Low Fidelity and Prototype



I moved from ideas to creating a low-fidelity prototype using Figma, where I combined Plural's brand elements, visuals, and engaging text. I made initial design changes to prepare for thorough testing of how easy and practical it is to use.







PART III: TESTING & ITERATION PART



USER TESTING 1.0


In this stage, I did user testing to make sure my designs made sense before moving on to build the real website.

I wanted to focus on the single partner page, which is the primary feature of our website. It showcases our work, our partners, and our success metrics. It helps the user understand how we work as well.


I tried multiple variations of the single partner page to explore possibilities.

I mainly experimented with
USER READING PATTERN  / READABILITY.




At the very end of crafting, I ended up mainly experimented with two layouts that were image-heavy and had condensed text in an effort to create a visually captivating design.


While Design A aimed for a more balanced combination of images, text, and white space, Design B adopted a bolder look and tried to mix images with heavy text.





User feedback became the guiding light.


It's interesting to learn that people preferred Design B, assessing its easy-to-use navigation and the overall hierarchy and clarity it provided. It was clear that creating a pleasing balance between text, graphics, and white space had a big impact on how much people liked the interface.







FINAL DESIGNS


( ︎︎︎SEE THE LIVE SITE HERE )




DESIGN SYSTEM


( ︎︎︎SEE FIGMA DESIGN SYSTEM FILE HERE )