about

contact

digital carousel design alternative

May 2023 - August 2023
3 Month Duration

Tools: Adobe Photoshop, Figma, Figjam




the objective: Digital carousels present multifacetted issues, leading to discrepancies and pain points in the user experience. Typically, the most significant concern is accessibility. Carousels often fail to accommodate users who rely on tools such as screen readers, keyboard navigation, and point-to-click tools. Recognizing these challenges, OLG plans to introduce a more user-friendly and accessible alternative.

Ultimate Design Challenge: What are other possible alternatives to carousels that we can introduce to emphasize accessibility?




my role: I began this project at the beginning of my internship after my senior designer informed me that OLG has intentions of replacing all digital carousel features. After conducting research, creating the initial designs, multiple editing sessions, meeting with an accessibility advisor and creating various iterations, I proposed my carousel design alternative to my UX team and manager.


Research | Design Thinking | UI/Product Design | Prototyping | Proposal




the team:
Maddie Clark - Product Designer (me)
Jeffrey Cheung - Sr. Product Designer 
Danyal Fallah - UX Manager
Duane Killer - Accessibility Advisor 
Ping Song - Product Owner







design process:




current carousel screens
 










wireframes








advantages + disadvantages to wireframes

advantages

Maintains a U35, unique design approach
Boosts branding strategies 
Can filter and prioritize content based on user history
Users have a preview of content

disadvantages

Concerns with readibility
Concerns with accessibility




solution: Create a data-driven alternative that allows for multiple products and promotions to be displayed. This feature must not only be functional and aesthetically pleasing, but must also be accessible.




high-fi mobile mockups





  • Created a space-savvy design to include multiple tabs

  • Meets accessibility requirements


  • Incorporated copy on tabs for users to preview type of content

  • Can utilize data to filter tabs based on user history 




  • Design is conducive to simple copy and icon utilization


  • U35 demographic focused



high-fi desktop mockups









design rationale:
After creating multiple iterations and options, this finalized version is an acessible, interactive and versatile product. This design is multi-facetted in which it showcases different banners and products simulatenously, but allows for singular display and users to select which content they would like to preview.



learning outcomes:
  • Functionality and usability: Learned to evaluate how designs must meet functional requirements and improve usability in order to boost effectiveness

  • Accessibility: Gained a deeper understanding of accessibility metrics and how to determine if a design is accessible

  • Feedback and iteration: Gathered feedback from my colleagues to identify areas for improvement and how, in turn, this affects new iterations
  


previous project


madison j. clark | toronto, on.