In 2013 GamesRadar+ was looking at over 8 million page views per month. Almost half of the users were viewing the site on mobile devices. It was time to provide an experience that served different devices and viewports. We also wanted to improve the experience on mobile while also improving page views and engagement.

Our challenge was to redesign an aging legacy POS system attached with customer information, eyewear contact lens prescriptions, insurance information and promotion. Our goal was to design and build an efficient prescription interface, faster checkout and a stable application.

Our first step was an in store visit to a For Eyes in San Francisco. It was frightening to see an 18 year old application still being used. We needed to understand how the current application worked. Within the first 5 minutes of the demo we knew we had a challenge and bigger opportunity. We logged all the pain-points that the sales associates were facing. Here were a few.

Understanding and mapping out the entire user journey can uncover issues and also create opportunities. We approached this with individual use cases with empathy. Here is where we defined a goal for each journey – eyewear, contact lens, and quick sale order. It was also common to accommodate repeat customers and the ability to edit their prescriptions, redos, address and insurance information.

It was time to go lean and mean. We skipped the wireframing process to save on hours. You could say this was part of the challenge however whiteboard sketches did the trick. In addition, For Eyes provided screenshots of their application and highlighted mandatory input fields. We kicked off visual design with a style tile to set up the framework of our interface.

Design sprints were created on a weekly basis and it was my responsibility to help run the design portion of the kanban board. User stories were graphed alongside each journey. Subtasks were created ensuring we had the correct goals and input fields of each page. We presented each comp followed by a Q&A session with our client to go over changes and concerns.

With a sizable web application as this was, the complexity was often overlooked. We were dealing with stock keeping units, prescription information and customer information that all had to fuse together to form an order. Below is the process of entering a customers insurance information.

Though it was obvious to our clients, it did take some time for our team to grasp. It wasn’t until we were invited to the factory that things became clear. We were taken through the process of how a pair of glasses were made. We were able to represent an input field with a tangible element on the production line. The process was explained to us by an optometrist turned director of production.

From there we were able to synthesize the process of an eyewear order and embody empathy through experience not through a persona. We were able to step back from a screen and experience the product from a different perspective. The visualization activated our creative abilities as designers and developers and influenced our final product. It was the most valuable experience on the project. Sometimes is not about how exquisit an interface functions but how the method you use to create it.