← All work
RewardOpsJun 2018 - Aug 2018

RewardOps Reward Store

A reward-redemption store, built as a flexible UI template for RewardOps clients.

reward_store_cover.png
RewardOps Reward Store storefront shown on a laptop and phone

Role

Product Design Intern

Team

1 Designer · 1 PM · 2 Engineers · CEO

Timeline

Jun 2018 - Aug 2018

Context

RewardOps is a Toronto-based B2B SaaS startup building software for rewards-based platforms. This project was a white-label ecommerce template: a reward store that RewardOps' clients could deploy for their own members to browse and redeem points for merchandise.

My role

As RewardOps' design intern and sole designer, I owned the entire end-to-end design process, from research and ideation through high-fidelity design and prototyping.

  • Owned the full design process: research, ideation, high-fidelity design, and prototyping
  • Worked closely with the CEO and other stakeholders to align on requirements
  • Interviewed the account manager to understand the user experience and its gaps
  • Produced wireframes and high-fidelity mockups in Sketch, and prototypes in Principle
  • Worked with engineers to resolve technical constraints and answer dev questions

The problem

previous_ui.png
The previous reward store UI, with distracting banners and product categories hidden in the nav

The previous store buried its own purpose. Distracting banners and ads pulled users away from the page, it wasn't clear that the site was an online store for redeeming reward points, and the products and categories were hidden away inside a nav menu.

Goals

  1. Goal 1

    Clearly convey the site's purpose from the landing page: an online store where reward-program members redeem points for merchandise.

  2. Goal 2

    Create an intuitive, smooth experience from landing all the way through checkout.

Research & personas

To ground the redesign in real user needs, I interviewed RewardOps' account manager, who worked closely with end users and understood their pain points well. From those conversations I built two personas to represent the people actually redeeming their points.

persona_01.png
User persona 1 for the reward store
persona_02.png
User persona 2 for the reward store

Competitive analysis

I studied established ecommerce experiences like Best Buy, Amazon, Sephora, and Aritzia, collecting screenshots of strong UX into an inspiration board. A few patterns showed up again and again: a hero carousel, product recommendations, and dedicated subcategory pages.

inspiration.png
Inspiration board of ecommerce UX screenshots from Best Buy, Amazon, Sephora, and Aritzia

Information architecture

Using what I'd learned, I mapped a sitemap to define the store's structure and the flow from landing all the way to checkout.

sitemap.png
Sitemap showing the reward store structure and checkout flow

Sketches & exploration

Sketching let me explore layout options quickly. The main challenge was keeping the layout responsive across devices, and balancing that against stakeholder requirements, like reserving ad real estate on the landing page.

sketches_01.jpg
Hand sketches exploring reward store layout options
sketches_02.jpg
Hand sketches exploring responsive reward store layouts

Final design

The final storefront leads with a clear hero and surfaces categories, recommendations, and products directly on the page, so members immediately understand they can browse and redeem.

final_01.png
Final reward store shown on a laptop and phone
final_02.png
Final reward store landing page design
final_03.png
Final reward store category and product browsing design

Mobile prototype

A walkthrough of the responsive mobile experience, from browsing categories to redeeming points at checkout.

Animated walkthrough of the responsive mobile reward store, from browsing to checkout

Outcome

The redesign shipped as RewardOps' standard reward-store template, a flexible white-label storefront that clients could roll out for their own reward programs.