I was hired as the first and only designer on the team to work closely with developers and e-commerce experts. My work consisted of research, designing and prototyping for the main product as well as working on support materials, such as building a website and designing features for possible platform expansion that was not on the main roadmap.

I had loads of assumptions that I was not always able to test and validate due to industry constraints. The lack of innovation in investments combined with all sorts of regulations and compliance created a number of obstacles I had to constantly try to overcome.I also had a couple of major pivots in the strategy, which led me to rethink and adjust the product on the go, adding up to the development time and cost.

In order to utilize a solution-based approach to my problem, I looked to the Design Thinking methodology. This approach, formulated by the Hasso Plattner Institute of Design at Stanford (d.school), helps in addressing complex problems with unknown variables, by intrinsically understanding human-based needs.

The five stages of the Design Thinking Methodology are Empathize, Define, Ideate, Prototype, and Test.

By systematically applying each of these stages of Design Thinking, I was able to re-frame my problem in a humanistic-based space.

Paper wireframes are a fast and easy way to help designers quickly iterate and explore design ideas. I used paper wire-framing as a way to rapidly address different ideas concerning user pain points that I had found during my user research.

For example, I had originally thought it might be visually tempting to put a series of enticing product images on the homepage. But when I thought of the user needs for simplicity and fast navigation, I changed that in another iteration. In this case, I decided it might be more prudent to have only one large hero image, then a few hero cards from which users to choose their categories, in order to get them started quickly and efficiently.

After the usability study, it was clear that users wanted simplicity and a quite easy flow through the entire process.

Initially, I thought of using a carousel to showcase features. I included a broad footer to help users always find their way home.

Since this is a responsive website, I deviated from the mobile-first approach and concentrated on the desktop breakpoints. The rationale is that the smaller cascading breakpoints will inherit the styles from the desktop base.

The low-fidelity prototype, built in FIGMA, connects the wireframes in the user flow for following the process of finding and buying a product. It also includes the flow to the hidden-in-plain-sight helpline.

This wireframe contains the interactive links that allow the user to proceed forwards and backward within the sequence, and the embedded clues for user navigation are clearly indicated.

After the testing stage, I went back to the drawing board to refine my designs. I made specific changes to several screens based on the user feedback from the usability study.

At this point I was able to focus on the delightful part: choosing colors and images, and prototyping my final interactions while focusing on accessibility considerations.

The UI was designed to be responsive to all device sizes.

Digital devices have become a part of our lives. These days you might see a family with either a desktop, a tablet or a mobile phone within reach; often a combination of all three.

The mobile version is simply a responsive version of the desktop, with all the same bells and whistles that make it a delight to use.