In 2017, during my tenure at AKQA, I played an integral role in a comprehensive redesign of Delta.com as a junior member of a larger, senior-led team. Our objectives encompassed achieving responsiveness, modernizing branding, enhancing navigation and SEO, and elevating content quality. This case study delves into a specific aspect of the Shopping and Booking redesign that I led: the transformation of edocs, which includes various aspects related to credits and coupon usage with Delta.com flights. This example highlights the depth of my contributions within the broader project.
Timeline: January 2018 - September 2018
Platforms: Responsive website
Team: UX Designer (me), project manager, Copywriter, UX Researcher, SEO Optimization expert
Results
For cruise ship workers on international waters, most 2-factor authentication is impossible to use and a barrier to usage, but fraud was omnipresent and we needed to help users secure their accounts. We introduced facial authentication to the Brightwell website and mobile apps.
Brightwell focused on providing financial services to cruise ship companies and their workers. They created software and card services for the crew working on the ships, enabling the cruise ship companies to conduct payroll through their services, and the workers to remit their earnings to their home countries (or to use their funds themselves through their card or online.)
Throughout my years at Brightwell, I was a Product Design team of 1 within the company. I was in charge of all design for the iOS and Android apps, the user-facinand the Admin tool used internally and by clients. I also had to conduct any related tasks, like user research, guides for the support team, etc.
The users of the software come from more than 130 different countries, with the majority being from the Philippines, Indonesia, and India. There is a majority of male users, with a large variety in age and familiarity with technology.
There is a large variation in their English proficiency, and they spend most of the time on ships in the middle of the ocean - they often have no phone access and can’t just get services off the street when they need them.
I was the only product designer reporting to the Director of Product. I worked closely alongside 2 product managers, and with an engineering team of about 10 developers.
I also often collaborated with the SVPs of Product, Marketing, and Global Solutions, and also the Marketing team, the Support team, and other external partners and clients.
The main goal of the project was to introduce a multi-factor authentication method to combat climbing fraud at the beginning of the COVID crisis. We needed a solution that would work for our unique user base, who were easy victims of complete account takeover, which included personal email. They also often cannot access phone services while on ship. This greatly limited our options.
We were worried about user perception and potential loss of monthly active users - while crew workers are paid on this app by their employer, they are free to send funds elsewhere immediately and to remit funds using other services. We also needed to ensure that users had access to this technology, that clients would approve of this change, and that fraudsters would be unable to enroll their own faces on user accounts.
I had a good understanding of who the users were in general through multiple projects at this point, but I also had the opportunity to observe hundreds of users over the years logging into the app, when I went on trips to ships to help with enrollment. Through direct observation and support troubleshooting, I was very familiar with the issues our users faced with the log in flow. I always heavily documented the issues I encountered using Google Docs.
Through MixPanel, we knew that 100% of phone users have cameras, and 6% of them would require updates to their OS. 27% of logins were on computers, mostly using ship computers (we would need to talk to the cruise companies about providing cameras.)
We also investigated heavily the service we were planning to use for facial authentication - Facetec - and looked into other services already using the technology. I investigated the service further on my own by downloading their demo app and documenting every step of the login flow. By talking to engineers, I knew that the customization options were very limited for these screens.
Before starting any designs, I led multiple conversations using diagrams and flowcharts to help stakeholders on the project agree on the scope and direction, talking about sections and screens affected, and potential issues and the level of work to account and investigate them.
Working alongside Product Managers, I used flowcharts and low-fidelity wireframes to lead conversations and tackle problems as a team as I was thinking through the big picture of the flows.Together, we thought through potential solutions for users who couldn’t log in using FaceCheck, Happy Flows, necessary error states, and other problems.
Once conversations have arrived to satisfying states, we agreed on the final state for the low-fidelity wireframes. The wireframes below are an example of what was delivered, but only encompass the new login flow using FaceCheck on mobile apps, which was central to the project. However, there were many other changes to account for like screens for the website, changes to the enrollment flow, updates to support sections, to settings, and to the Admin interface our team uses to assist users.
We tested with members of the support team that works from Manila, as we had no access to users especially considering COVID and its impact on the cruise industry. We created a prototype using Protopie, which was specifically appealing because of the ability to use a phone’s camera within the prototype.
The delivery file itself was a Figma file with a Table of Contents and each section in its own page. This allowed developers and product managers to focus on their tasks and navigate the file more easily. It includes Happy flows, edge cases, error states and notes to help with implementation.
The final Design included each element using components and styles that linked back to the Design System file that I had created over my years at Brightwell. This project also included a decent amount of non-user facing interfaces, which are used internally by Support, Fraud prevention, IT, client services and more. I worked with internal teams to update, test and get feedback on these sections.
This file evolved a little as we worked with engineering on implementation, and discovered new states and challenges that we solved as the feature got built.
Mobile apps and responsive web flows are separated into their own sections to allow different engineer specialists to focus on their own tickets. The main flow is provided, as well as various alternate states for each screen.
Sample screens of the new feature setup flow in context
After a soft launch in December 2020, the feature was fully released to all users in January 2021. Brightwell was able to catch multiple fraudsters who are now unable to log into the app regardless of their possession of user information. From a technical standpoint, there were no large issues, but we did find some additional edge cases to account for.
FaceCheck generally worked as intended, and was a major win for the business overall. We made adjustments to the Admin interface we could make to help the support and compliance agents, and discovered new ways to leverage FaceCheck within the application.
However it added friction on the user’s side, as there can still be difficulties logging in with bad lighting which can be commonplace on ships. Improvements could still be made to improve user satisfaction (reintroduce fingerprint login after identity verification).
I researched Calendly’s most used and successful user flow and made impactful changes to it, leading to a better experience for millions of users.
I researched Calendly’s most used and successful user flow and made impactful changes to it, leading to a better experience for millions of users.
I researched Calendly’s most used and successful user flow and made impactful changes to it, leading to a better experience for millions of users.