Lightspeed Case Study:
Customer Taxes
Project Details
At Lightspeed Commerce, I worked with the team focusing on the user-facing sales area of the software. Retail staff use this every day to make sales. We regularly held interviews with retailers to discuss workflows, identify pain points, requirements and to map current user journeys.
Through our user research, we identified the following problem statement to be solved: How might we enable merchants to record the tax rate of their customers and rely on Lightspeed Retail to charge them the right tax?
Design Process: Intended User Journey
I started by creating the desired user journey in words, before touching any UI or drawing. This user journey is backed up with evidence and quotes from retailer interviews and is reviewed by peers (designers, product managers, engineers) to identify any knowledge gaps, pros and cons.
Here is a video demonstrating a walk through of my intended user journey for this project, made as a quick asynchronous way to share with my team.
Design Process: Wireframes
Once I can clearly describe in words how the ideal user journey will work, I then start on rough wireframes. I create these in Figma and/or Miro as it can then be shared and iterated over quickly and easily.
Wire framing is the part of my design process that takes the longest time - it’s a time to explore different ideas and solutions, experiment with flows and UI elements, share, workshop and review with others.
See some examples of my wireframes below.
Design Process: Hi-fi designs
The next phase is the high-fidelity mock-up. I created these in Figma, utilising Lightspeed’s design system and library.
I create hi-fi prototypes as realistic as possible, as it gives a good feel for how it would function in the live application. It is great for sharing with a broader audience such as stakeholders, support and sales teams, as well customers to get feedback.
For this project, different locations for the additional UI were explored to figure out if it needed a new area, or could seamlessly fit into existing areas. We decided that it would fit into the ‘edit/add customer’ modal - as it was a setting that a user may expect to be there in context to other customer details, and it also would not cause much interruption to their existing workflow.
As this solution required UI additions to the Sell screen and the Customer edit/add modal, I collaborated with the Customer-focused team. We worked through other upcoming changes to this modal to ensure our UI remained cohesive.
The Solution
Below is a video presenting the solution ready to be built. This video shows an interactive Figma prototype.