top of page
Can I have a discount?
Nixon has been the premium lifestyle accessory brand of choice for independents, creatives, and free-thinkers the world over. Sold in over 90 countries, they've built a global following of people living unbound lives and This is a story of how I made a positive difference to the use of this platform by enhancing the cart checkout experience.
To comply with my confidentiality agreement I have gained approval to post these designs on my portfolio. Nixon is a consumer-facing e-commerce brand based in San Diego available for retail sale.
THE PROBLEM
How might we improve the checkout experience by adding a discount for first responders? (COVID)
In this feature, I explored the process of enhancing the checkout experience for an e-commerce brand called “Nixon”. The goal of the project was to reduce cart abandonment rates and improve overall user satisfaction during the checkout process.
Problems observed from user behaviors
Several issues contributed to high cart abandonment rates, such as complicated checkout forms with discount options and no discount codes, unclear shipping and payment options, Lack of truck signals, and security assurances. The promo code is more visible to the user. Currently, it’s located at the very bottom making it difficult for users to find.
Product requirement
After the interface was evaluated from the users’ perspective, I dove into the business details through an interview with the client. Questions about business limitations and current obstacles are raised. The added feature of ID.me discounts for first responders was also requested to be added to the current experience.
Requirement vs observation
The checkout logic was too complicated due to the business's previous decisions to hide the discount code — users struggled to understand where and when to add the discount code and quit in the face of excessive effort required on their part.
The most difficult part of the checkout was how to allow first responders to add their discount while verifying their identity. The users have to be verified first responders to be able to get the 10% discount given for COVID-19. Almost every brand was taking on this big feature and Nixon surely did not want to be left behind. For an e-commerce, it’s important to keep up with consumer trends and behavior shifts. This could not be left as is.
Setting up to solve the problem
Recognizing the importance of mobile users, we focused on optimizing the checkout experience for mobile devices. We planned for a mobile-first design approach, ensuring a seamless experience across different screen sizes.
MY ROLE
UX Designer
I was the UX designer at Nixon and responsible for creating desktop and mobile responsive. I led the UX work, producing all major deliverables and presenting them to the client during COVID between March and May 2020. I worked alongside the business, product, and the engineering team for feedback.
Timeline
Mar 2020 -
May 2020
Tools
-
Figma
-
Jira
Teams
-
VP of Product
-
Director of E-com
-
Project Manager
-
QA Engineer
-
3 Developers
Team Collaboration
Although I was the lead designer on the team, I collaborated hand in hand with the business and development team for technical constraints.
Designs are easy to produce, but if you can’t ship them to the finish line, then what's the point?
With everything going remote and dealing with new waves of COVID, Communication was extremely important to share the vision and understand the requirements.
This helped create a good relationship with the Dev team and bridge the technical language gaps.
THE DIRECTION
Ready to checkout?
I tested the current checkout experience on the web and mobile screens. Then I took inventory of each step in the checkout workflow from a user's perspective. I decided to divide each feature so that I could understand the reasoning and importance of each piece at the individual feature level to get a better bird eye view of the whole experience.
Firstly, I wanted to prepare a strong design and business case to solve the problem. Find the user pain points while redeeming a promo code in the current web/mobile experience
Research Methods
Customer Insights & Ideation
I partnered with lead technicians, product owners and technical managers to uncover insights and translate concepts into features that address customer behaviors and motivations.
Research/Exploration
To begin, I conducted extensive user research to understand pain points and challenges users faced during the checkout process. I used a combination of third party surveys, user interviews, and analytics data to gain valuable insights. Aiming to construct a wider picture, adding qualitative data to the quantitative, I reviewed the site’s interface and compared it against accepted usability principles. Competitive Analysis was also important to see how the other brands were solving for this problem.
Evaluations, Industry Reasearch, Baymard, NNG Analytics, User Testing
Understanding the current experience
27% of complaints happening at the checkout stage is accounted to difficulties in applying a promo code (Source: Customer Care Associate team). That’s almost 3 of 10 orders that frustrates users at the checkout page which leads to more customer care calls and less conversions. One of the biggest challenge in Walmart.ca was around promo codes. The current process of redeeming a promo code is too complicated and confusing.
End Users
Consumers, Promo hunters, First Responders
User Needs
User needs to be able to view the discount code applied at checkout, and know when and where to put the code in before checking out to the payment portal. First Responders, Nurses and Teachers need to verify they are who they are in order to proceed.
Core Target Market
Users that aspire for luxury accessories as a lifestyle.
Pain Points
-
The Promo code was not applied when the user placed an order, now the user wants the agent to apply that coupon to that order.
-
Users don’t know what happens after they redeemed the promo code.
-
Users are unable to discover the redeem promo code touchpoint.
Competitor Analysis
-
I gathered other luxury brand competitors to see how they were using the ID.me discount feature on there site.
Heat Maps
I partnered with user testing and Hotjar to investigate how users interacted with the page. With heatmaps, I could visualize the areas with the most clicks and see spots website visitors ignored. The promo code was way below the fold, it was difficult to navigate to.
With this data, Nixon could hypothesize how to improve the experience and then create an alternate design, or variant, to test side-by-side with the original.
I completed multiple rounds of testing, checking heatmaps each time and getting incrementally closer to their desired results. Ultimately, the result was that they needed a larger section for discount codes above the checkout CTA button.
THE SOLUTION
Discount Applied
Our mission to comprehensively enhance the home delivery experience was a huge success. By immersing myself in every feature and workflow of the customer journey, the product team and I improved all the identified bottlenecks and areas of improvement.
Sketches/Wireframes
With a clear understanding of the pain points, I brainstormed and ideated potential solutions. I sketched wireframes to visualize the improvements and gather feedback from the business and product team.
Prototypes
Using Figma, I created interactive prototypes to simulate the new checkout process. The prototypes allowed us to test different design iterations and validate the solutions with real users.
User Testing
Based on user feedback from prototype testing, we refined the designs iteratively. We simplified the checkout forms, provided clearer shipping and payment options, and implemented trust signals such as security badges and customer reviews.
Implementation
With the design finalized, we collaborated closely with the development team to ensure a smooth implementation of the new checkout process. Regular feedback loops and testing were conducted to address any technical challenges.
Ideation & Final Designs
Several iterations were created to discuss with product owners and developers to understand any technical constraints during sprint development. Then we decided which designs to test out before presenting them to stakeholders.
A/B Testing
The next step was to develop hypotheses and A/B test them. I tested changes like reordering the discount code section and creating variations in design. Giving it features like collapsed/uncollapsed version.
Split Testing
I also tested out different versions including layout. I created out-of-the-box designs to give it a more refreshing look. This was not asked for, I wanted to go above and beyond when it came time to present to stakeholders. I could use the results to show them a little about the future and potential for this feature.
User Testing/Hotjar has flexible settings for heatmaps and session recordings, which is especially useful when you’re A/B testing and want to see how users experience each version of your design.
THE CHALLENGES
Designer's Obstacles
Managing expectations is not an exact science, but by keeping communication open, clearly defining expectations from the start, and being willing to adapt and adjust as necessary, I successfully navigated through the challenges that came my way during my time at Nixon.
Stakeholder Alignment:
Ensuring alignment among various high-level stakeholders with differing priorities, such as marketing, development, and business teams, was challenging but was vital for project success.
Overemphasis on Aesthetics:
Clients seemed to prioritize visual appeal over usability or functionality, which posed a challenge for me in the beginning, leading me to create a balanced and effective user interface.
THE IMPACT
Order Successful
After the implementation of the new checkout process, the results were promising.
Implementation Success
The cart abandonment rate was reduced by 77%, and customer satisfaction scores increased significantly. The enhanced mobile experience also led to higher conversion rates for mobile users.
77% reduction in cart abandonment and customer satisfaction increased significantly for first responders during COVID.
THE LEARNINGS
Key Takeaways
While understanding the current work flows, a lot of avenues were opened up that led to exploring the best of how a promo code could be used.
Throughout the Project
At every design stage, I focused on understanding constraints and altering my approach accordingly. I demonstrated how user research, prototyping, and iterative design can lead to a successful improvement in the checkout experience. By focusing on user needs and pain points, I was able to create a more user-friendly and efficient checkout process for "Nixon," resulting in improved business outcomes.
Proud of Myself
By focusing on user needs and pain points, I was able to create a more user-friendly and efficient checkout process for "Nixon," resulting in improved business outcomes.
In the End
This feature is available currently on the Nixon website. It was my first piece that was consumer-facing for the whole world to see. It was kind of a super exciting moment that I made a difference in the world when it felt like it was shutting down and falling apart during COVID.
Other Nixon Iterations
Below are images of a few of the other iterations that were presented to stakeholders before the designs were finalized.
bottom of page