Designing the Groundbreaking Cashback Calculator for DiscountIF.

Project


DiscountIF aimed to combine the premise of shopping online with the excitement and reward of making a bet, with the focus on providing a unique user experience and increasing customer engagement. The previous version of the site allowed customers to choose from a range of fixed cashback offers, created from specific products and events. Should the event they had selected come out as correct, the customers would then receive their cashback in a similar process to the likes of Groupon. This process of selecting from pre-constructed offers didn’t provide much flexibility to customers. Therefore it was decided to undertake a redesign of the platform that allowed customers to build their own offers.


To test the hypothese of allowing customers to build their own cashback offers, a Beta site had been developed whereby the cashback selection process was simulated by the customer care team, independently building offers for customers. Customers who chose a product would then work with a member of the team to select an event that interested them and from there create a cashback offer. This allowed us to validate the hypothese and gain valuable data before proceeding. This case study briefly walks you through the process of how we designed the groundbreaking cashback calculator, to allow customers to shop online and create their own personalised cashback offers with DiscountIF.



Project Name

DiscountIF Cashback Calculator.

Date

March - August 2015.

Involvement

UX/UI Design, User Research, Product Design, Development.

Credits

BinarApps (Development Team), Luke Laurenti (Research Assistant), Andrew Alessi (Product Manager)


Challenge


Design, build and deliver a platform to allow customers to combine a product and an event of their choice, in order to build fully personalised cashback offers via DiscountIF.com.


To understand the challenge, it was laid out using the ‘How Might We’ method. By using this methodology we were able to breakdown the indivudual challenges in advance, provide a viewpoint from all stakeholders and set ourselves up for an innovative solution.

How Might We:

Create - an online platform,
For - people who shop online,
To - create personalised cashback offers,
By - combining products with events of their choice,
So That - they are more engaged in the online shopping process.

Process


Research - Conduct research to develop an understanding of the problems and your users.
Define - Combine all your research and observe where your users problems exist.
Ideate - Generate a range of crazy, creative ideas.
Prototype - Build tactile representations for a range of your ideas.
Test - Return to your users for feedback.
Implement - Put the vision into effect.

TheGourmetHeader
By iterating with simple wireframes, we were able to map out the user journey and ensure that all user and business requirements were satisfied.

Research & Define


Using the VIP site we were able to talk to customers directly while creating their offers. From this we learnt that customers were interested in finding the cashback ‘sweetspot’ whereby the offer become appealing to them. Each customer had a different limit as to where the risk became acceptable. Pain-points were also recorded and grouped according to their frequency.

TheGourmetHeader
By iterating with simple wireframes, we were able to map out the user journey and ensure that all user and business requirements were satisfied.

We had already gathered alot of information about our site visitors through previous versions of the site, alongside the VIP Beta. This helped us create a research-based set of user personas, in order to put together an initial overview of user needs and tasks. Combined with the business requirements and technology limitations, this would help to build a picture of the overall product requirements.

By card sorting the user requirements alongside the business goals, a familiar pattern began to emerge. This allowed us to pull out common-requirements among all of our user personas in to fully define the product specification before moving on to the iterative stage of the project.

TheGourmetHeader
By iterating with simple wireframes, we were able to map out the user journey and ensure that all user and business requirements were satisfied.

Ideate, Prototype & Test


For the ideation stage a Mobile First Design strategy was adopted. This was due to ability to more rapidly develop and iterate prototypes as well as being able to test these prototypes on the fly (guerilla testing.) To satisfy the responsive design requirements, once the User Experience was satisfied the designs could then be easily scaled up for larger screens and desktop devices.

TheGourmetHeader
By iterating with simple wireframes, we were able to map out the user journey and ensure that all user and business requirements were satisfied.
TheGourmetHeader
By iterating with simple wireframes, we were able to map out the user journey and ensure that all user and business requirements were satisfied.
FORM Agency Sales Reports

Wireframe Prototype

The wireframe screens were then converted into an interactive Prototype using InVision and the Sketch Craft PlugIn. This allowed us to explore interaction design opportunities, locate pain points and test the prototype with members of the team for internal feedback. Due to the MDF approach, changes and improvements could be quickly implemented and uploaded into the prototype for further feedback.


Lorem ipsum del amore toro diem.


Sketch File Iterations
During the iteration stage, multiple mobile led iterations were developing exploring the potential of the platform fed with user insights.
FORM Agency Sales Reports

Responsive Design in Sketch

By using fixed padding and certain plugins for Sketch, we were able to design responsively directly within Sketch. This assisted greatly with the handover process, allowing me to communicate breakpoints and other developer issues directly with the development team and iron out any issues before handoff.


FORM Agency Sales Reports

Design System

In order to ensure we could rapidly move through the project, I took the time to implement a robust and creative design system. This would serve as a basis for the project UI and allow us to quickly implement any changes across multiple screens as we moved to the high-fidelity and handover stage of the project. The use of nested symbols also allowed us to rapidly iterate throughout the project.


Sketch High Fidelity
High fidelity screens created in Sketch. By using a mobile first strategy we could focus on testing the user experience before scaling up for larger screens using the design system to quickly update the UI.
FORM Agency Sales Reports

Scaling up

Once we had focused on the user experience and were able to test and validate with users, I focused on scaling up the design for larger screen sizes. Working closely with developers and utilising the Design System put in place we were quickly able to handover screens to the developers and beging building the initial version of the site.


The high-fidelity prototype recording above showcases the user journey, with users selecting a product, creating their cashback offer before proceeding to the checkout stage.

Testing


Again, a circular part of the design process that should be continually. Although it must be said that it is important to ensure metrics measured throughout the process remain constant. This allows all requiremenst to be accurately measured and ensures variousstakeholder viewpoints and concerns are satisfied along the process. Obviously the main concern here, using UCD principles, was the user. Focusing on user engagement metrics and quantitative research methods such as first click tests, heat maps as well as qualitative methods such as prototype recordings. By using these methods we were able to qualify certain hypotheses. One major insight was identifying the signup process as a pain point for users. Users were asked to sign up before proceeding to the cashback calculator stage. This was measured through user interviews and exit rates from the developer beta. Once we identified this we were able to move the sign up stage to later on in the user journey, thereby removing a barrier and allowing the customer to explore the concept further before being asked to hand over personal data.


Goal Completion Tasks


Screen Recordings


Guerilla Testing


User Interviews


Results


As the main focus of the B2C Strategy, the DiscountIF Homepage re-design was created in parallel with a wider re-design of the entire site, including the groundbreaking cashback calculator and the B2B Widget. CTR through to the Cashback Calculator increased 35% after the re-design due to the increased trust factor and multiple, consistent CTA's. People also stayed on the site for longer, obviously to learn more with session times increasing more than 210%. As a basis, the site allowed for rapid growth of the company over the following months before a B2B focus was solely adopted to prove feasibility for further investment.


DiscountIF_Submit

More than 4,000 Amazon.co.uk links submitted within the first month of launching the Cashback Calculator.


DiscountIF_CustomerRec

Using an exit poll, customer trust rose from 3.4 - 7.8 out of 10 after the redesign.


Lookback


Looking back at the process is important to see where improvements could be made and learnings fed into future projects. During this project through the cyclical process of analysing data, getting user feedback, rapidly iterating prototypes and testing, we were able to rapidly develop an MVP with which to carry the business forward. Ultimately, alongside guaranteeing future investment for the company, the work carried out on the cashback calculator led to the development of a B2B focused strategy, morphing the product into a B2B focused widget to be installed as a white label solution into third party sites to increase customer engagement, sales and customer conversion.

Personally I learnt much about the ecosystem of designing a digital product, qualifying hypothese through brainstorming, user-research and testing to create a tangible product. It also helped me develop front-end coding skills, and pushed me to constantly work on and improve the designer-development relationship in order to keep track with deadlines and other considerations within the business. Of course there were failures, one thing I wish I had done better, would be documenting the product design process. However within the fast-paced, agile environment of a startup this is not always possible. I also learnt to not become attached to designs and prototypes, as pivot points and other external factors meant that product features and ideas were picked up and dropped constantly. After all the purpose of prototyping is to be able to test and gather data to validate ideas. I have since been able to call on the multiple techniques developed during this role in concurrent projects, and most importantly have stuck to the mantra of, if at first you don't suceed, try and try again.


Thanks for reading!