UX/UI DESIGNER
Daltons Private Sellers
Audit and Improve the Private Advertising Customer's User Flow
Project Summary
Overview
Daltons Business is the UK's largest advertising portal for businesses and franchises. After historically only allowing business transfer agents and franchisors to advertise their inventory, a strategic decision was made to also provide a route to market for private business owners who wish to manage the business selling process themselves.
As this was a major shift in the traditional business model, there was not much reference material to use as a starting point, and early designs were heuristic and lacking in engaging content.
The process of selling a business is as stressful as selling your home, and users enter into an environment that they are usually not familiar with. Most businesses take on average between 3-9 months to sell, and there are numerous financial, staffing and logistical factors that need to be taken into account. A private seller therefore effectively enters into a long term relationship with Daltons, which needs to be nurtured and maintained.
To Redesign the key pages, forms and lightbox popups in the Private Seller user flow and improve or incorporate new functionality to improve usability and increase customer satisfaction. This consists of the Landing page, the Advertisement Building page, Upgrade and Promotions page, and Checkout pages.
Problems with the Current Implementation
This change in the business model enjoyed moderate success, but it soon became apparent that current designs, the advertisement building process and checkout needed improving to reduce friction and improve the overall user experience.
Google Analytics revealed that there was a consistent number of page drop-offs along each step of the process, namely during registration, the building of a draft advertisement, and when selecting an upsell/promotion on the checkout pages. I noted that there was an increasing number of form drop-offs leading to fewer users registering and not completing their advertisements.
Hotjar click, move and scroll heatmaps revealed that users were not fully engaging with the contents of the landing page or proceeding to the bottom of the advert creation page. This was confirmed whilst watching Hotjar recordings of users sessions. The recordings also revealed multiple pain points within the user flow.
I liaised with the customer support team to discuss the feedback they were getting from users and collated data from multiple support tickets, which highlighted many of the issues I had already identified, but also some that I was not aware of.
My findings revealed the following main issues that needed resolving:
a.) The visual design and IA of the landing page was not optimised
b.) The benefits of each advertising package were unclear
c.) Drop offs during the registration process
d.) Drop offs during building an advertisement
e.) Upsells/Promotions not being selected often enough
f.) Cart abandonment
User Research Methods
The private seller packages are aimed at individuals wanting to sell their business without involving a business transfer agent. This results in significant cost savings and puts the seller in control of their adverts contents and communication with potential buyers. This also means that the users interacting with the platform and the type of businesses they are selling is diverse.
I conducted research on the three closest competitors, which included a SWOT analysis, UX/UI, IA and performance assessment of the desktop, tablet and mobile sites. I also compared the advertising packages they currently had on offer. I created my own private seller accounts and proceeded through their user flows up to the final payment stage.
I took extensive notes and screenshots of the entire process for each competitor, which included any welcome/transaction emails that I was sent during the different stages of the process. Once this was completed, I presented my assessment of what our competitors were doing well, and also the friction points I encountered to stakeholders.
This exercise also gave me further insight into the sellers mental model about how the selling experience should flow and what their expectations were of selling their business.
Using all the qualitative and quantitative data available (Google Analytics, Hotjar, Facebook insights, Twitter's audience insights, support tickets), and with assistance from the team, we created an empathy map that we felt accurately depicted the goals, aspirations and motivations of our private seller customers.
Using this as a starting point, I then created x2 user personas and developed the customer journey map.
Job Story:
When a private seller selects an advertising package, I want to ensure they follow through with registration, by making it easy for them to complete their advertisement, purchase at least one upsell and prevent cart abandonment during the checkout process.
Private Seller Statement:
As a business owner, I want to advertise my business privately, so that I can sell it without paying agents fees at the best possible price in a reasonable amount of time.
Roles and Responsibilities
To gain a thorough understanding of the business's requirements and goals, I participated in strategy meetings with stakeholders to gain insight into the marketplace and customer base. Involvement at this level allowed me to gain an understanding of Daltons market position and both the long and short term goals of the business.
These insights were extremely helpful and contribute to my assessment on the overall look and feel of the website, it's services and touchpoints. The more information I have on market positioning and future planning, the more informed my design and development decisions will be.
Being part of a small design and development team, I was able to take on multiple roles for this project, which included:
1. User research
2. Competitor analysis
3. UX Design
4. UI Design
5. Visual design
6. Information Architecture
7. Project management
8. Testing and post deployment iterations
The initial kick off meeting included all stakeholders (Management, Accounts dept. lead, GDPR lead, PCI compliance lead, developers, SEO lead). Feedback from all members during the course of the project was vital in providing deliverables at key stages and adhering to the project's timeline.
Scope and Constraints
The main goals of this audit and redesign was to:
- Improve conversion rates
- Increase the number of registered users
- Increase the number of completed advertisements
- Reduce field drop-offs
- Reduce cart abandonment
Tertiary goals included:
- Introduce and clearly define the private seller services on offer
- Establish that Daltons is dominant in this marketplace
- Provide relevant information and advice
- Put the user at ease/positive frame of mind and begin building trust
Due to the scale of the project, my first action was to break the main task into 5 clear defined and manageable sub tasks. This allowed me to focus on removing friction from each stage, whilst still maintaining an overall consistent experience across all 5 stages of the process:
1. Landing page re-design
2. Advertising package selection and registration
3. Advert creation
4. Upgrading existing package and adding promotions
5. Confirmation and purchase
I created multiple project tickets on our project management system and prioritised the tasks I felt were most important to get feedback early in the project.
The main constraint was a limited budget and deadline of 3 months, which would have to include a series of iterations. I listed issues from each stage that I had noted during my research and formulated solutions that would eliminate the friction points, reduce cognitive load and craft a less stressful and more enjoyable experience for anyone wanting to sell their business online.
Task 1: Landing Page Redesign
Issue: The process of selling a business privately was unclear.
Solution: Replace the generic businessman Istock image in the hero section and show the selling process, represented by vector graphics simplified into 3 easy steps.
Issue: Users not convinced of our market share or ability to attract buyers.
Solution: Add a section below the hero which shows some impressive stats such as number of monthly site visitors, amount of inventory on the site, and reassurance that Daltons handles a large volume of completed sales.
Issue: It was unclear what would be included with the advertisement
Solution: Using a clear headline "Your advert includes...", to show what is included using 5 bullet points and an image which showed an example of a completed advert.
Issue: No evidence of successful sales
Solution: Add a user testimonial and link to a "Happy Sellers" testimonials page that contains messages of endorsement from users who have sold a business using the Daltons portal.
Issue: Users lacked sufficient information on selling a business without an agent.
Solution: Added a section with useful guides that linked to our advice and articles blog.
Issue: Users are unsure of the value of their business.
Solution: Added a section with a clear headline "How much is my business worth?", that linked to an existing valuation calculator which provides an instant estimated result. Display link back to the selling a business page.
Issue: Heatmaps revealed that important information lower down the page was not being seen.
Solution: Amended page IA to move important information further up the page.
Outcomes:
- A significant reduction in support emails and telephone calls asking for clarification and help understanding the selling process and asking what is included with the advert.
- A significant reduction in support emails and telephone calls asking how many potential buyers visit the site every month.
- Traffic to the "Happy Sellers" testimonials page increased 35%.
- Traffic to the advice and articles blog increased 31%
- Users empowered with an estimate of their businesses value, were more confident to continue with purchasing an advert. There was a surge in users who returned from the calculator and proceeded with selecting an advertising package.
- Increased engagement/user interaction with important sections of information.
By restructuring the contents and adding relevant and useful information to this page, there was an overall significant increase in engagement and CTA impressions. Support emails and telephone calls from apprehensive buyers decreased significantly. It was clear that user frustration was reduced as the most common questions that new sellers need answering, were now presented in easy to digest sections of content. Heatmap results revealed that users were now also interacting with content further down the page.
It became clear that users were developing a more positive affiliation and trust with Daltons and felt more confident at the beginning stages of selling their business. This led to a significant increase in users selecting advertising packages and registering. Once the user can form a positive mental image of the process they are entering into, the proceeding steps will be easier to complete.
Post launch, I A/B tested 4 slightly different variations of this page using the VWO platform. After 3 weeks of data, the design that received the most users selecting a package was chosen.
Task 2: Advertising Package Selection and Registration
Issue: Unclear what benefits are available for each advertising package
Solution: Clearly list the benefits for each package and show the per-month price on the longer term packages. I also added a "BEST VALUE" icon to the package we are trying to encourage users to purchase.
Issue: Some of the extra benefits on the two longer term packages (6 and 12 month) needed further explaining.
Solution: Add a "?" link to open a lightbox popup that explains the details of each benefit.
Issue: The layout/design of the packages was looking dated.
Solution: Refreshed the design of the packages layout.
Issue: On mobile, the contents of the 12-month package is displayed in full, but the other packages details are hidden until that specific package header is tapped. When the hidden details are revealed by an expanding content box, it is causing the user scroll position to move to the bottom of the newly opened content box and away from the main content.
Solution: Remove the accordion menu functionality and display full details for each package.
Issue: When a user selected a package, they were redirected to a registration page. Any user who wanted to change their package or view other information on the previous page, had to select the browser back button.
Solution: Present the registration form on a lightbox popup on the current page
Issue: The registration form contained 11 fields and there was a sharp drop-off after the 5th/6th field
Solution: Reduce the fields down to the absolute minimum information required - 5 fields
Outcomes:
- 40% reduction in support emails and telephone calls asking for more details.
- The updated design is clearer and easier to scan for important details.
- Friction point removed on mobile as users don't have to tap to see all the benefits of each package.
- An unnecessary redirection to the registration page was removed.
- Significantly less users abandoning the page.
- An overall increase in the number of packages selected, especially the "BEST VALUE" 12-month package.
- Increase in registrations which resulted from shortening the registration form.
- Less calls/emails to support requesting clarification on the package benefits.
Task 3: Building an Advertisement
Issue: The advert creation page contained 8 sections and numerous required fields within each section. It took a long time for customers to complete all sections of the form, and page abandonment/form drop off was high. Some of the required data was not technically important and not actually used by Daltons in the customers profile or for marketing.
Solution: Reduce the page to 5 sections and remove 10 form fields. The first section will be open on page load, the next 4 sections will initially be closed and can be opened when the previous section has been completed.
Issue: The order of the sections on the page did not entirely make sense and related pieces of information were split across different sections of the form.
Solution: Group related sets of required data into relevant sections and improve the IA of the page.
Issue: Section headings, sub-headings and some field names did not accurately label or describe what the user was required to input.
Solution: Rename the main sections and sub-headings so that there is no ambiguity to their content. Update field names to accurately describe the information required for a specific field.
Issue: Form fields lacked placeholder text.
Solution: Added placeholder text to critical fields that gave context and was helpful in guiding the user when entering information.
Issue: X4 additional categories option only used by 45% of users
Solution: In addition to the advert's main category, there is an option to assign x4 additional categories. To encourage use of this facility, we implemented functionality to auto-populate fields 1-4 where possible based on stored parent/child category relationship data.
Issue: User were not always entirely sure of the terminology and what information they were being asked to provide.
Solution: Added helpful hints text to each section.
Issue: If the user did not save a draft and navigated away from the page, all the information they entered would be lost.
Solution: Added an auto-save functionality, whilst still retaining the "SAVE A DRAFT" button (Research showed that some users still preferred the added assurance of saving the draft themselves). Send the user an email confirmation when the draft is initially saved which contains a link to the draft advert ready for editing.
Issue: Uploaded images could not be rotated and the order that they displayed could not be changed. If the user wanted to change the order, they would have to delete all the images and upload them again.
Solution: Added image rotation and ability to change image order via click and drag.
Issue: The draft preview was not entirely accurate of what the final advert would look like and only the first image uploaded by the user was displaying in draft mode.
Solution: Added functionality to show an accurate full page draft as it would appear live on the site and allowed all images/video to display in a gallery so that the user can preview them as they would be displayed on their advert.
Issue: Video upload section hidden behind a clickable link that expanded to reveal a field for entering in the YouTube video short-code. Adding a video was treated as an afterthought, and so it was only used by about 9% of users.
Solution: Visibly give this feature the same priority as uploading images. Add functionality for user to watch a video on a modal before confirming upload to their advert.
Issue: Form error messages not clear and informative.
Solution: Review and amended all error messages, so that they make sense in context to the information required.
Issue: Users unsure how many steps are in the selling process.
Solution: Clarify visually by adding the number of steps (1-4) and which step the user is currently completing.
Outcomes:
- Significant decrease in form drop offs and users abandoning the page.
- The amount of scrolling up and down the form to find related fields was reduced.
- 62% reduction in emails and telephone calls to customer support for assistance in creating adverts.
- Each advert now has at least x2 additional categories and there was an increase in users also assigning the remaining business categories, as the context of this tool became apparent. Adverts with 2-4 additional categories assigned doubled.
- Significant increase in the number of draft and completed adverts.
- More images uploaded per advert and a 22% increase in video uploads.
Task 4: Advertising Package Upsells and Adding Promotions
Issue: The design of existing page was outdated.
Solution: Redesign the page and add more visual elements to aid in selection.
Issue: Once a user had selected an advertising package, they were unable to change their selection. This meant that an opportunity to upgrade to another package was being lost, which was resulting in lost revenue. A user had to abandon the current advert and start all over again with a different package.
Solution: Add a new package upgrade section at the top of the promotions page. This shows all available package options and the user can easily upgrade by selecting a checkbox on the desired package.
Issue: No previews available for the x3 promotions on offer. The benefits of the promotions were shown by a heading and description text only, so the user was unable to see what the promotion would look like visually. They would have to browse the site to find adverts with promotions already applied to assess whether they would select a specific promotion.
Solution: Add an interactive element to each promotion so that the user can visually assess the selected promotion.
Issue: Price total exclusive of VAT
Solution: Add an extra row in the price summary that shows the added VAT amount.
Outcomes:
- Significant increase in user upgrading to a higher value packages.
- The user can now view their completed advertisement with selected promotions as it would appear on the homepage gallery and listings pages. This resulted in 31% increase in users purchasing these promotions.
- Having an accurate price total on this page stopped many users from returning from the proceeding cart page (which included the VAT amount), and removing promotions to reduce overall cost.
Task 5: Payment Confirmation and Purchase
Issue: Unable to remove products on the Cart Summary page. A user would have to use the browser back button to return to the promotions page to deselect a promotion if they wanted to remove an item from the basket.
Solution: Add "Remove" option and add a bin/trash can icon
Issue: On the payment confirmation page, the user had to fill in all their billing details.
Solution: Pull the user profile data (Name, email, telephone, address details) from the backend and pre-fill the form fields.
Issue: No information available about the payment gateway that will process the transaction.
Solution: Show the Lloyds Bank logo and confirmation of payment protection for Visa and Mastercard. Also add a contact telephone number and link to the support page.
Issue: In the event of a failed transaction due to insufficient funds or incorrect 3D secure password, the user was re-directed to the order confirmation page with a popup at the top stating the transaction error (in technical language). The user then had to proceed to the cart page and try to attempt another payment.
Solution: When a transaction fails, return the user to the cart summary page with an easy to understand message stating that the transaction was not successfully completed. If the transaction failed due to insufficient funds, then the user has the option to remove items to reduce the total cost. Also send the user an email confirmation of the failed transaction, so that they have extra re-assurance that a payment was not taken. Send an email to admin for our reference and so that support can call the user if the payment fails again.
Outcomes:
- Items easily removed from basket if required
- Users did not have to provide information that we already had recorded. The fields can still be edited if required i.e. They are using a business credit card, or a card registered to someone else.
- Significantly less page abandonment. Users feel secure seeing a familiar high street bank logo and confirmation that Visa and Mastercard holders automatically have payment protection via 3D secure authentication.
- Less drop-offs as users are more inclined to try again to make payment. Less calls to the support team by users who wanted extra confirmation if a transaction failed.
Additional Features:
Transaction emails are sent via the admin system when the following criteria are met:
1. After successful purchase/advertisement is live on the frontend/Promotion applied.
2. After a failed transaction.
To this list, I added an extra payment confirmation email that is generated directly from the Lloyds payment gateway upon a successful/failed transaction. This contained further detailed information about the purchase that a business owner would want to keep on their records.
Further to that, I also added a VAT receipt that can be downloaded in .pdf format via the user's dashboard. This was a feature requested by many business sellers.
For users that create a draft advert, but do not complete a purchase, an email is also sent to admin 3 days after the advert is created so that a member of the sales team can call the user and offer support and advice if required.
For users that create a draft advert, but do not complete a purchase, we send follow-up reminder emails at regular intervals, reminding them that they have an advert awaiting completion/payment.