Background

My main project during my internship at RewardOps was redesigning the reward merchandise store website. This is where customers of the loyalty program can redeem their points for products. This UI will be applied as the template for clients who use the RewardOps platform.

Role: UI design, user research, prototyping, usability testing, visual design
Timeline: June - August 2018

Link to presentation.

Problem

Aside from a visual design improvement, there were some usability issues I identified for the current reward store website design:

• Distracting banners and ads on the landing page that direct users away
  
• Unclear purpose of website
• Product categories were hidden in a dropdown and "Popular Categories" section still looks like ads

Goals

After meeting with stakeholders, I defined the following goals for the redesign:

• Convey the purpose of the website clearly through the landing page: an online store for reward program members to redeem points for merchandise
  
• Ensure a smooth and easy user experience from landing to checkout

Research

To begin, I wanted to understand who the current users of reward program merchandise stores are, what their goals are, and how they would navigate through the site. I spoke with a few members of an existing rewards program through the phone and also got to conduct contextual inquiry with one member in person.

Some questions I asked included:

• "How often do you redeem points for merchandise?"
  
• "What have you redeemed your points for?"
  
• "Why did you redeem for those products?"
  

Through these conversations and observation, I gathered the following insights that helped me understand user needs.

Information Architecture

Before diving into the visual design of the pages, I laid out the site map to establish the flow of the website and where all the content would go in. To ensure good usability and findability, I made sure to keep the flow very simple.

Sitemap of the online store.

Ideation

I began to ideate for design by examining existing eCommerce websites and noting down sites that demonstrated good usability and visual design. Some of the websites I looked at included the big merchandise names like Amazon and Best Buy, but I also checked out sites that weren’t in the same sphere, such as Aritzia and Sephora. A few of the common themes across the websites were having a hero carousel, product recommendations, and subcategory pages. Additionally, stakeholders also had certain requirements that I had to acknowledge, like having ad real estate on the landing page.

Dropmark collection of inspiration screenshots.

Sketches

Sketching allowed me to quickly explore visual layout options with pen and paper. One challenge was to make sure that the designs were responsive and figuring out how the layout would work on different device sizes.

Applying Heuristics

The Nielsen Norman Group’s Usability Heuristics are guidelines that I often refer to for all my designs. I paid special attention to this in the checkout flow, as it is the most sensitive area in an online store.

Animation

Using Principle, I prototyped a few interaction animations to demonstrate their motion design.

Added to cart interaction on mobile.

Reflection

Importance of research

Through this project, I realized the importance of research and how designing based on my own assumptions is unwise. What users say and do could be completely different from what you assume of them. Also, little research is better than no research, even in an agile environment. It can be very confusing and directionless when you don't have those user insights to be of guidance.

understanding Technical constraints

After collaborating with my team of awesome devs, I learned more about technical constraints and how to better work with them in design. This also made me a more perceptive designer, as I know what limitations I have to work under.

What I would do differently...

Truth be told, when I first started the project, I dove straight into wireframing and prototyping because of working in such a fast-paced environment. It wasn't until halfway into designing the hi-fi pages that I realized: "hm, I'm really lost and wish I had done some research before I started." So I backtracked, asked for more time to complete my research, and then made changes based on user inputs. So, if I were to do it again, I would start with the research stage first, as it should be. If I had more time, I would conduct usability testing to see if the redesigns are actually improving the experience.