EGO VAGARI / WEBSITE PROJECT
Band
Website
The Smart Home Program by CPA rewards homeowners through using smart devices to reduce electricity during peak times and make a positive impact on the environment.
PROJECT
EGO VAGARI WEBSITE
PRODUCT
Marketing Website
ROLE
UX/UI Designer
TIME
Dec. 2022 - Mar. 2023
OVERVIEW
The primary goal of this project was to design a user-centric website for a band, encompassing tour information, merchandise sales, music, and overall aesthetic. We focused on addressing pain points identified in existing band merchandise sites, such as unclear user flows and difficult navigation. Through user research and usability testing, we prioritized intuitive navigation, streamlined design elements, and accessibility features like high contrast and large text sizes. The resulting platform, E.V., offers a hassle-free shopping experience for fans to browse and purchase merchandise while remaining engaged with the band's content.
USER RESEARCH
User interviews within the band merchandise space provided valuable insights into user expectations and desires. We translated these findings into empathy maps and journey maps, which helped us understand potential user personas and their needs. We discovered that users often visit band websites not just to purchase, but also to browse for future purchases and explore available offerings. This insight, coupled with the navigation issues identified on similar sites, would inform our design decisions and user flow optimizations.
SITEMAP & WIREFRAMES
We designed the website's information architecture with clear user flows and decision-making in mind. This involved creating a sitemap that logically organized content and facilitated easy navigation. We then developed paper and digital wireframes, focusing on a simple and adaptable design that translated well across different screen sizes.
USABILITY WIREFRAMES & DIGITAL WIREFRAMES
Usability studies revealed navigation issues experienced by some users. To address this, we implemented navigation buttons in the header of all pages and introduced tiered navigation for deeper content exploration. Additionally, we identified and addressed accessibility concerns by increasing spacing between store items, adding text outside of clickable image areas, and enhancing font size and boldness on key graphics. These changes would be incorporated into updated prototypes to ensure a user-friendly experience for all.
PROTOTYPES
After incorporating feedback from the usability study, we moved on to prototyping key user flows. This included creating a flow for choosing an item and completing a purchase, ensuring a smooth and intuitive experience for users. Additionally, we developed a user flow for accessing tour dates and event-related information, making it easy for fans to stay up-to-date with the band's activities. These prototypes served as the foundation for further refinement and visual design implementation.
MOCKUPS
With the user flows established, we focused on enhancing the visual design of the pages through high-fidelity mockups. We incorporated unique animations and transitions that reflected the band's brand and created a more memorable experience for users. This included particular attention to the home page, tour page, and store page, where we implemented more complex animations to capture user attention and provide a unique browsing experience. Additionally, we integrated subtle animations and transitions throughout the site to ensure a smooth and seamless user experience. This focus on visual engagement aimed to encourage user interaction and exploration of the site's content.
STYLE GUIDE & RESPONSIVE DESIGN
We developed a style guide that emphasized a bold and aggressive design aligned with the band's neon noir aesthetic. This included a striking color palette, neon sign elements, and thematic imagery to create a consistent and visually appealing experience. Additionally, we created a comprehensive component library with multiple button and component states, each optimized for different screen sizes. To ensure usability on smaller screens, we adjusted spacing, text size, and layout elements for optimal viewing and interaction. This focus on responsive design and a cohesive visual style ensured a user-friendly experience across all devices
TAKEAWAY
This project provided valuable learning experiences in user-centered design and the importance of iterative improvements based on user feedback. By addressing navigation and accessibility concerns, we created a website that caters to a diverse range of users. Additionally, the focus on unique animations and a cohesive visual style helped create a memorable and engaging experience for fans. This project serves as a testament to the power of user research, iterative design, and attention to detail in creating a successful and user-friendly website.