TUI Customer Account.
Formerly the app worked on a single booking only basis. This meant we could not link multiple bookings from customers and create a user profile.
We needed to introduce a customer account to help create a profile so users could then receive appropriate recommendations.
This was a TUI Group project to introduce an account which works across all markets. Currently some markets have an account which is only relevant to that particular country. The aim was to make TUI more universally global instead of market specific.
We worked very closely with source markets to release the account on the app. The first market was Belgium; so far there has been 53,000 account sign ups in 4 months.
The key requirements for the app were:
The ability to register an account
To be able to log in and out of the account on the app
Reset password
Associate bookings to account
View and manage account
Ideas.
After receiving the requirements, we then started sketching ideas and thinking about all the different user flows. There were 5 main user flows that we looked into.
These were:
1. User with No booking, No account
2. User with booking not yet added, no account
3. User with booking added, no account
4. User with booking and account
5. User with no booking, with account
Research.
We followed social platforms guidance on signing in and carried out competitor analysis.
User flows.
We took the user flow drawings to screen and used the below diagram to initiate discussions between stakeholders and all members of our feature team. This helped to start the conversation about what we wanted to achieve and how we could do it.
Presentation boards.
We started to break down all the customer journey screens we needed to tackle and draw out questions that required discussion. We put them on boards for feedback meetings to encourage conversation. We carried out several rounds of this with the feature team and stakeholders.
Finished designs.
Once we were happy with the flow, we worked through the different options with constant rounds of feedback to get to the finished design.
We designed for the different white labelled apps we have ie TUI, First Choice. This required different visual branding. We created iOS and android phone and tablet screens; these screens were then uploaded to Zeplin and handed over to the developers in our feature team.
Profile.
Having covered the work up to registering and logging into an account, it was now time to look at how the profile could work for our users. We took all the requirements we had for the profile and started mapping them out into different sections.
User research.
The requirements that we knew needed to be in the profile formed the start of our user research.
The first test we carried out was a card sort to see how a user would naturally group the information.
We then created a tree test using the results of the card sort to inform the groupings of items within the profile. The tree test helped us to see if users could find the different items they were looking for within the groups.
Findings from card sort:
Positive results that showed the groups we had already defined were pretty similar to the groups created in the testing by participants
We changed the name of contact us to be help and support based on the naming from the card sort
Found that most people were putting marketing preferences into a settings group
Findings from tree test:
Positive results for all key questions having success in the 90% range, with average speed to find around 8 to 10 seconds
Showed issues with marketing preferences having very low discoverability when placed within profile. Had an average of 35% success with an average speed to find of 30 seconds
Found country selector had low discoverability
Profile presentation boards.
The user research helped to form the solid groupings within the profile. We created presentation boards to gather feedback and display the findings to stakeholders and all members of the feature team. These boards were the building blocks for the start of the wireframes and competitor analysis.
Wireframes.
Now we had the profile groupings it was time to explore how to put together all of the information in a clear and concise way. This required us take into consideration all the key journeys the user would carry out in the profile .
We looked into including sections that a user might expect to see in an profile like my shortlists etc and how to style this to make it stand out. Another avenue was to explore ways to engage the user with their account and create retention. The challenge was how to bring the profile section to life for a holiday app and encourage users to return to the app.
Profile design options.
We then moved onto exploring different design options and UI treatments.
This went through rounds of design feedback with stakeholders and the feature team to get a better idea of what was expected for a MVP and what was possible within the time frame.
Below are some of the final options created from the feedback.
Final designs.
Once the designs were signed off, work started to create and export the final screens to Zeplin for the developers. These screens included different source market UI, different states of various screens ie error, toast messaging, and all screens for iOS and android phone and tablet.
