Understanding the Problem
Wireframes
In my wireframes, I focused on information hierarchy and creating visual interest, with scalibility in mind.
Empathize + Research
Bibbidi Bobbidi Boutique Interview
We Interviewed the staff at Bibbidi Bobbidi Boutique to better understand how our digital design and process can better help them complement their sales and customer experience.
Because our digital platform is the first step of exploration and connected to the physical user experience at the parks, our goal is to be consistent and complement the established in-person practices and experiences, while adding some Guest delight before their visit.
Main questions:
1. How much should we focus on comparison versus learning individual package content?
2. What would serve the best purpose in terms of educating users before they arrive at the physical shop location?
- People didn’t know what each package includes
- The shop itself has a great upsell experience, the goal of the digital experience is encourage general reservation instead of specific experience.
- Learning package content is most essential, comparison happens mostly at the shop
- Packages can change seasonally, has to flexible and easy with CMS
- Comparison Table
Pro - This solution was easy to implement, low scope, simple. Makes comparing packages easy. Displays information clearly.
Con - Doesn’t create much visual interest. Creates cognitive overload with all the package contents → may lead to users skipping learning this part altogether. Not very scalable if the package number grows. - Checkmark Comparison:
Pro - Like above, simple and easy. Checkmarks make information more scannable. Guests can easily see which package provides the most things.
Con - Content varies and could create a very long table. Some more descriptive descriptions don't lend well to check marks. Not very scalable.
- Card style:
Pro - Common interactions. Creates distinct separation of packages. Reduces cognitive load by focusing on individual package content. Very scalable despite number packages.
Con - Doesn’t compare well. - Floating + Comparison:
Pro - creates distinction of packages and compares well. Clear visuals.
Con - Does not scale well with more packages. Mobile can become confusing with the white space created with card/grid to ground the content.
- Flip card:
Pro - Displays content clearly, easy to read. Creates good separation and hierarchy to reduce cognitive load. Guest can focus on individual content and packages, without getting overwhelmed. Delivers content in stages.
Con - If content is super long this may not scale. - Carousel:
Pro - Same as above. Interaction of scrolling is easy to understand, common pattern.
Con - Dine pages will have 17 packages which does not scale for this design.
- See all:
Pro - Same as above. Easy to understand. Ability to highlight and curates certain packages, while still providing view all option scales for large package numbers.
Con - Guests don't see all packages at once.
Visual Interest
Icon/Illustrations
One of the important things I explored was adding illustrations for visual interest and to illustrate packages to users. Illustrations are scalable, digestible and complements content.
User Interface
Card System
After determining the interaction, I moved to the visual design. I focused on making individual package information digestible and creating interest in learning more. Ultimately creating a card system that can be scaled to these types of pages and other details pages.
