Digitalizing the Photo Shopping Experience.
Project Overview
Design an immersive e-commerce responsive application experience for MSC Cruises that allows guests to find and purchase their professionally taken photos.
Objective
MSC Cruises, the world’s third-largest cruise brand based in Switzerland, has onboard photo operations whose process required their staff to print and display all of the professional photos taken - daily on the walls. Their manual process cost the company millions of dollars yearly. They requested our expertise to help digitalize their shopping experience.
Deliverable
We launched a responsive digital ecommerce product that increased revenue, reduce print waste and increased user satisfaction by streamlining their photo purchasing experience using facial recognition. We also delivered a one of a kind touch-wall shopping experience. The product was quickly bought in and expanded to the rest of the fleet and new ships.
Client
MSC Cruises
Product
web, native android app, responsive screens
Timeline
2021 Oct - 2022 Oct
My Role
Lead Product Designer
Competitive Research
And many more...
We researched and analyzed how other online photo lab services and e-commerce platforms fulfil photo print purchases. We also reviewed their customer satisfaction rating, quality of prints, and ease of use.
Constraints
Responsive Design
The experience needed to fit multiple screens - from large TVs, tablet kiosks, and mobile screens. The main product would be available on landscape and portrait kiosks in the photo gallery. We also needed to deliver designs for the guest’s in-cabin TVs, large touchscreen portrait 75’’ video walls in the photo gallery, and multiple TV landscape video walls.
Limited User Testing
Due to the cruise ship being built at the same time as the project, and with COVID-19 precautions still in effect, we didn’t have many users to test publicly. We would test internally with new team members, friends and family, those who have been on cruises and with our MSC partners. We also held a demo-day to interview 10 users before we went live. Our alpha version did go live on one cruise which gave us very useful data.
Building a Design System
Starting this project without a complete style guide was very challenging. We were able to go to the main website by inspecting the html and css code to form our own internal responsive design system. Having a completed style guide made it easier for us to design accross different products.
End-User Goals & Priorities
We focused on three main users that matched MSC’s customer base. For each product we designed we considered which persona this would best work for. Our product proved to be delightful for all ages.
“It was so easy even a 7 year old could use it!”
Find their pro photos
Guests need to be able to find the pro photos that were taken of them on the ship. Previously, the guest would have to manually search on the photo gallery walls for their photos on a cruise that could carry 5,000 passengers at a time.
Purchase their pro photos
Once a guest finds their photos - they will need help to fulfill their purchase. They should also be allowed to purchase other photo products like printed content, cameras and especially their digital assets.
Download their pro photos
When a guest purchases their digital assets, they should be able to download and keep their pro photos on their personal device. We later added the capability to access their photos after disembarkation.
Predictions
Converted Consumers:
+2%
Our goal was to match the average amount of guests sailing who purchase photo content.
Time on task:
<10 minutes
Since this is a new product, we expect guests’ to take a while to decide to make a purchase.
AI Technology
Facial Recognition:
Part of the product delivery was to leverage our facial detection technology. The AI based computer technology was used to find and identify human facial features in digital images and videos. The technology was quite advance - it could match guests’ photos even if they were side profiles.
Constraint:
Although it was great, the facial recognition technology wasn’t perfect. Some photos may have had artistic flare like being taken in silhouette. Photos missing in the search and not found were lost revenue opportunities. I collaborated with the Product Director on how we could allow guests to find their photos.
UX Flows
Onboarding
During the onboarding process, the user needed to agree to legal, scan their card, and use the facial recognition.
Account Creation
Post cruise, we wanted to give the users a chance to access their photos. Our research findings showed that users would either be invited via email or google search to find the website hosting their cruise photos.
Purchasing on Site
Once the user’s photos have been matched via the facial recognition, the flow changed to help the user purchase their pro photos while they were cruising.
E-Commerce
For post cruise, we also wanted to allow the user to purchase other photo products like t-shirts, canvas prints, mugs, etc. We also didn’t want to stop anonymous users from exploring products.
Ideation
Large Video Walls - Sketches
I sketched the experience for the large walls as the focus for them was to create a visually interesting and similar experience to the kiosk.
E-Commerce Website -
Low Fidelity Wireframes
We ideated on a few designs on what we would implement for the MVP of the ‘post-cruise’ web experience. We wanted the experience to be closer to a regular e-commerce website since the guest would be ordering products at home.
Kiosk - Medium Fidelity Wireframes
We first created the main onboarding and search flow for the kiosk. This influenced the direction of the how the rest of the platform would be designed.
Design Style Guide
High Res Prototype
Large Walls
High Res Designs
Responsive Web & Native App
Real Launch - Real World Cruise - Real Users
Product Designs Delivered
Responsive E-Commerce Product
Phase 1 designs were for landscape (web), portrait tablet (android) and mobile (android and ios).
Phase 2 designs were for SDK (iOS).
Post Cruise - Photo Locker
Designed the web app experience for guests to download and purchase their content at home.
Next Generation Gallery Walls
Designed the solution to work on portrait 75 inch TVs and touchless large walls. The true ‘wow’ experience to interact with your photos in public spaces.
Admin Portal
Designed the admin portal tool that could give access to the MSC Admin’s to the different delivered products, provide manual customer support, and file tickets for us to improve the product.
Client Presentation Delivered
UX KPIs:
Learnings
Use real screens to test for accessibility
Designing for a 75 inch Portrait TV is veeeeeerrrry different than designing for your mobile device. When we realized the space in front of some of the touch screen walls were less than 3 feet we updated the designs. We also used rolling chairs to simulate guests in wheelchairs using the wall. This lead to a finding that we needed the screen to be height adjustable.
Design with Atomic Design Methodology
Being responsible for the vast amount of screens - our design system went through many iterations. We found that using the atomic design methodology helped us stay on top of components and keep consistency.
Document & Annotate
This project had an abundance of moving parts, iterations, tickets, etc which at times caused confusion when handing off to the developers. I started to push for cleaner handoffs and adding notes into our tickets and Confluence pages so we had places to refer to outside of our Figma file. We also included in our handoff annotes of when a part of the design had recieved an update - these small changes made hand offs easier and made our development team happy.