Connecting new audiences with culture and art to increase user retention
Connecting new audiences with culture and art to increase user retention
Connecting new audiences with culture and art to increase user retention
Timeline
2 months (2021-2022)
2 months (2021-2022)
Team
Marketing team, development team, 1 designer
Marketing team, development team, 1 designer
My role
UX/UI designer
UX/UI designer
Overview
I designed and co-developed a web experience that highlighted artists and their work to attract new audiences to their respective platforms in collaboration with a non-profit organization called Unipro. While assisting stakeholders on building a sustainable development process, I successfully designed and delivered the website that received high user satisfaction and reached 300+ unique users during the 2-day launch event.
As the sole designer on this project, I demonstrated the value of composing short research plans and the confidence the stakeholders would have moving forward with decisions. From research insights, I iterated rapidly through mockups and a working prototype to test usability before development.
In retrospect, I learned a valuable lesson when I advocated for a comprehensive design system, despite the limited timeline. Although it seemed like a great idea to streamline future efforts for the organization, I was able to pivot and build on their existing style guides.
I designed and co-developed a web experience that highlighted artists and their work to attract new audiences to their respective platforms in collaboration with a non-profit organization called Unipro. While assisting stakeholders on building a sustainable development process, I successfully designed and delivered the website that received high user satisfaction and reached 300+ unique users during the 2-day launch event.
As the sole designer on this project, I demonstrated the value of composing short research plans and the confidence the stakeholders would have moving forward with decisions. From research insights, I iterated rapidly through mockups and a working prototype to test usability before development.
In retrospect, I learned a valuable lesson when I advocated for a comprehensive design system, despite the limited timeline. Although it seemed like a great idea to streamline future efforts for the organization, I was able to pivot and build on their existing style guides.
The challenge.
The challenge.
Users needed a seamless experience when utilizing a website meant to showcase various art formats and mediums, while staying within development time, overhead costs low and easing future hand-off to later volunteers on the project.
In the past, this event has been held in physical spaces with a live site to accompany an attendee’s experience at the showcase. The goal was to emulate a similar experience digitally and also have the site serve as an archive for artists and their works moving forward.
Users needed a seamless experience when utilizing a website meant to showcase various art formats and mediums, while staying within development time, overhead costs low and easing future hand-off to later volunteers on the project.
In the past, this event has been held in physical spaces with a live site to accompany an attendee’s experience at the showcase. The goal was to emulate a similar experience digitally and also have the site serve as an archive for artists and their works moving forward.
The proposed solution.
The proposed solution.
streamlining navigation and enhancing visuals to connect the brand with the intended audience.
streamlining navigation and enhancing visuals to connect the brand with the intended audience.
transparency and context for all the information.
transparency and context for all the information.
adapting existing style guides into a more formalized system.
adapting existing style guides into a more formalized system.
The process.
The process.
After meeting with the team, I advocated to include a short research phase before I started building any visuals for the site. From the survey results and features analysis with similar sites, I took the initial design direction and adapted it for the incredibly short timeline. It was an interesting challenge searching and analyzing through this short discovery phase.
After meeting with the team, I advocated to include a short research phase before I started building any visuals for the site. From the survey results and features analysis with similar sites, I took the initial design direction and adapted it for the incredibly short timeline. It was an interesting challenge searching and analyzing through this short discovery phase.
UI design phase.
UI design phase.
The marketing team had drafted wireframes while I was spinning up on the project. It was clear they had a clear concept for the site and I was excited to bring value to this phase.
The marketing team had drafted wireframes while I was spinning up on the project. It was clear they had a clear concept for the site and I was excited to bring value to this phase.
With their permission, I validated these wireframes with a round of moderated test sessions for feedback with 5+ users.
With their permission, I validated these wireframes with a round of moderated test sessions for feedback with 5+ users.
Taking it a step back.
Taking it a step back.
The navigation bar layout was the primary design decision that I was concerned with at this stage. After testing with users, nearly 100% of them indicated that they were confident in how to navigate with a sidebar. However, most users also shared that they were not confident that they would be able to see details of the content with the sidebar taking up more space.
The navigation bar layout was the primary design decision that I was concerned with at this stage. After testing with users, nearly 100% of them indicated that they were confident in how to navigate with a sidebar. However, most users also shared that they were not confident that they would be able to see details of the content with the sidebar taking up more space.
With no information about device types that users would access the site with and the project set to release in less than 3 weeks at this point, I proposed to move forward with a visible, simple layout to accommodate for limited development time and testing.
With no information about device types that users would access the site with and the project set to release in less than 3 weeks at this point, I proposed to move forward with a visible, simple layout to accommodate for limited development time and testing.
The crazy idea.
The crazy idea.
Buy-in for a design system
Thinking about the future needs of the organization, I advised and discussed with a few stakeholders on creating a design system to speed up workflow and enhance a cohesive brand identity.
Thinking about the future needs of the organization, I advised and discussed with a few stakeholders on creating a design system to speed up workflow and enhance a cohesive brand identity.
Thinking about the future needs of the organization, I advised and discussed with a few stakeholders on creating a design system to speed up workflow and enhance a cohesive brand identity.
Using a template design system and applying the style guide to it, I created components and was able to quickly prototype and hand-off to development.
Using a template design system and applying the style guide to it, I created components and was able to quickly prototype and hand-off to development.
Using a template design system and applying the style guide to it, I created components and was able to quickly prototype and hand-off to development.
Why it went wrong
Due to tight schedules and limited planning with our development, I wasn't able to gain much traction and add it to our schedule.
Due to tight schedules and limited planning with our development, I wasn't able to gain much traction and add it to our schedule.
Due to tight schedules and limited planning with our development, I wasn't able to gain much traction and add it to our schedule.
The pivot
Using the existing style guides created by the marketing team, I was able to add components and start to construct a component library that they could rely on for future projects.
Using the existing style guides created by the marketing team, I was able to add components and start to construct a component library that they could rely on for future projects.
Final iterations.
Final iterations.
Improving navigation
All users had no issues navigating the site and finding information while on different devices and platforms.
All users had no issues navigating the site and finding information while on different devices and platforms.
Adding value by giving more space
Users reported higher satisfaction when viewing artist pages and understanding the content quickly. The top bar navigation gave more room for the content to shine.
Added information about the artist and their works with a layout based on the category they belonged to (e.g. Visual, Spoken Word, Performance Arts).
User testing showed that having information about the artist felt immersive and important.
Added information about the artist and their works with a layout based on the category they belonged to (e.g. Visual, Spoken Word, Performance Arts).
User testing showed that having information about the artist felt immersive and important.
Added information about the artist and their works with a layout based on the category they belonged to (e.g. Visual, Spoken Word, Performance Arts).
User testing showed that having information about the artist felt immersive and important.
Main takeaways.
Main takeaways.
Advocate for a process when needed
While this project was mainly UI and visual heavy in content, I felt that bringing a user experience perspective to the team would benefit the overall process.
While this project was mainly UI and visual heavy in content, I felt that bringing a user experience perspective to the team would benefit the overall process.
Collaboration is where lessons are earned and learned
Working and collaborating with other disciplines with the same goal was a unique experience. I learned how to navigate conversations and draw on everyone's expertise to arrive at a satisfying outcome.
Empathy for internal and external stakeholders is key
The challenges of design system implementation and CMS constraints has shown me that I need to spend more time focusing on the planning and research of not just what the users need but what the team needs as well. When the team works seamlessly, we deliver a better experience for our users.