This site is now live! Click here to visit d23.com ->
Background
D23: The Official Disney Fan Club is the official fan club of The Walt Disney Company. The number "23" refers to 1923, the year the company was founded. D23 members enjoy access to exclusive benefits such as invitations to VIP events, discounts, gifts, and more. Learn more about D23 ->
Internship project, Figma, 6 months (July 2021 - Jan 2022)
The Problem
Prior to this project, d23.com had not been updated since 2015. The goals of this project were to rebrand the site to better harmonize with the TWDC experience, standardize design elements, enhance the visual design and user experience, and reorganize the site to have better information architecture.
MY ROLE
I joined this project during its mid-fidelity stage. My specific tasks were to:
• Translate desktop designs to mobile and tablet sizes (responsive design behavior) • Consider different website states (non-member, general member, gold member) • Assist in building the design system (while I worked in most of the design system sections, I had the most ownership over the card components — example shown below) • Ensure that each element on each page is in the design system • Aid in preparing designs and annotations for engineering handoff • Work with engineering, client (D23), PM, and graphic design teams to make decisions • Participate in the QA process
Summary
OUTCOME
The redesign of d23.com is now published and was well-received by the D23 team. The standardized elements created for the design system were translated into reusable modules, which were used to streamline the engineering process and ensure efficiency in creating new pages in the future. Thinking through responsive design behavior early on in the process also worked towards this goal. Overall, the work of our design team helped to create a cohesive website experience for all kinds of users.
What I learned
• How to balance client, PM, engineering, graphic design, and UX design goals • How to create a clean and effective design system • How to predict user behavior and dive deep into details to prevent errors • How to collaborate with engineering and understand backend limitations
