Responsible for UX research and UI design
2020 | 3 months
Kiosk Checkout
Rx Portal
Shopify POS Rx App
Shopify Back Office App
In compliance with the non-disclosure agreement I signed, I have omitted sensitive data and obfuscated figures. All information in this case study is my own and does not reflect the views of Sunrise Integration or anyone else.
In Q1 2020, Quay set up retail showrooms to allow customers to order prescription eyewear. The customer service staff needed a way to capture customer prescription information.
Our team built a sophisticated custom app on Shopify Plus to be used as an in-store kiosk for the launch of their new optical prescription line.
Unfortunately, COVID-19 forced Quay’s retail showrooms to close, putting a stop to the rollout after two weeks.
We utilized the Shopify ecosystem to help Quay transition their operations from in-store to virtual.
Sales reps used the Shopify POS remotely from their home and made the transactional process similar to the in-store experience for customers.
Our team implemented an e-commerce ordering solution for prescription eyewear.
Despite the unexpected and unprecedented global shift in business, my team and I were able to help Quay increase their product offerings through the creation of a sophisticated Shopify POS Kiosk Point of Sale app.
My biggest challenge was ensuring the developers on my team were staying true to the vision whilst operating within the technical constraints of each design system (Google Material and Shopify Polaris).
With my understanding of front-end development and the opportunity to participate in daily development stand-ups, I was able to communicate potential problems and prepare detailed Jira tickets that would allow the developers to troubleshoot issues quickly.
The research process was done in two phases: pre-pandemic for the store launch, and post-pandemic for the online launch. The discovery and research included:
I began secondary research conducting a competitive analysis to understand Quay’s competitors and the prescription eyewear order process. To do so, I selected a few companies and documented their UX/UI features. I organized the results into a comparison chart highlighting strengths and weaknesses, which I presented to stakeholders.
As primary research to understand the end-user and their prescription eyewear shopping experiences and pain points. I assisted in crafting a Survey Monkey survey to which we received the answers of 46 respondents.
I conducted one-on-one sessions with sales reps responsible for placing the Kiosk prescription eyewear orders.
For Quay’s target audience, the most important factors when buying prescription eyewear are style, comfort and affordability. This was a key finding of my research.
Over half of the respondents preferred buying Rx glasses online (52%) whereas the rest (48%) preferred buying them in-store.
The main reason for preferring in-store is because it makes it easier to find the perfect fit. However, as the pandemic progressed, most respondents felt uncomfortable going through the buying process in-store (70%).
The main pain points when ordering glasses online were: entering the prescription, finding the best fit, and making a selection.
I organized the findings to find recurrent themes and patterns, which helped us establish a reliable user persona.
I built Information Architecture diagrams of the website to ensure customers could find everything they needed easily.
We created different scenarios which we matched with user flows for customers and sales reps. After refining and optimizing the user flows, the design process could begin.
I made wireframes and high fidelity prototypes in Adobe XD for all products. Working with multiple engineering teams in an Agile framework was essential to delivering on all deadlines.
The Kiosk utilized the Shopify Plus Cart and Checkout.
Alpha prototype of Kiosk operating on iPad shows flow for Associate login, customer signup, customer login, Rx prescription transcription. The design system is Google Material.
Orders placed within the Kiosk are stored within Shopify. The Shopify Back Office app is created for Quay staff to see all prescription eyewear orders.
Orders placed within the Shopify POS Rx app give the ability for CS staff to document and transcribe customer eyewear prescriptions.
Our team built a sophisticated custom app on Shopify POS to be used as an in-store kiosk for the expanded launch of their new optical prescription line.
Leveraged the previous projects transcribe process to fast-track development. This also made it easier for the CS team to adapt to the POS system.
CS tool for orders placed within any Quay Shopify e-commerce store will have their prescription transcribed here. Staff account management and Help desk services where also integrated into the product
