Product Design

Offer II

A multichannel shopping experience inspired by the rethinking of in-store financial transactions and a global pandemic.

This project consists of two parts. Part I focus mostly on research, strategy. Part II focuses on ideation, product design and interaction.

Context

After concluding V1, I decided to keep working on this idea for two main reasons. Firstly, I wanted to develop an end to end digital service and product. Secondly, I didn’t want my design solution to ignore the world’s current context (COVID). In the aftermath of a pandemic, how could design help?

Challenge

I began a second design process (this time, without a specific deadline) building off from the insights and strategy of V1.

Whereas in V1 the process was inductive, meaning I built my solution hypothesis on inferences based on observations, in V2 the process was abductive. This means that the decisions were probable conclusions (assumptions) from what I knew.

Deriverables

Journey map as is, proto-personas, product strategy, product brief,
journey map to be, value proposition canvas, strategic assesment, MVP features, sitemap, cardsorting report, task flow, brand persona, content prototype, low-fi wireframes, mood board, style tile, hi-fi wireframes.

Process

Discovery

Experience Map

Proto-personas

Conclusions

Definition

Product characteristics and evaluation matrix

New considerations

Social Impact

Ideation

Product brief

Journey/blueprint to be

Value proposition canvas

Strategic assesment

MVS/MVP features

Prototype

Sitemap v1

Close cardsorting

Final sitemap

Task flow

Brand persona

Content Prototype

Low-fi wireframes

Iteration

Mood board

Style tile

Final solution

Final thoughts

What I learned

Discovery

Primary Research

In order to quickly move onto the definition stage, the research consisted in analyzing V1’s synthesized user data to summarize the findings that this new version would take into account to build the solution. This artifacts were created through user interviews and non participant observation.

Experience map

Proto-personas

Conclusions

This is the summary of the main findings regarding the needs of each specific user and the benchmark done in the first part of the project.

Customer’s needs

To check out fast because they already spend too much time choosing items.

To find deals.

To pay without many credentials.

To prevent making payment mistakes.

Employee’s needs

To create rapport and prioritize connection.

To be relieved from pressure.

To prevent making payment mistakes.

Definition

Evaluation and considerations

Product characteristics and evaluation matrix

From a synthesis of the research analysis, the main product requirements were listed. Then, in order to define the direction of this version, an evaluation matrix was created. The axis encompassed both the what (automated-manual) and the how (assisted-unassisted) of the different possible solutions. The value spectrum went from slower to faster experiences.

Product characteristics

  • Saves time
  • With minimum usage of credentials (as possible)
  • Minimizes possible waiting lines or eliminating them.
  • Is scalable.
  • Prevents mistakes.
  • Delivers entertaining experience.

New considerations

Even though the evaluation matrix helped me visualize a direction, something wasn’t right. The solution seemed like a million other things I had seen before.

Thinking about how people could have better in-store transaction experiences seemed irrelevant when the world was in lockdown. I decided to dig a little deeper in the prospective effect COVID would have on small and medium businesses.*

New questions

After reading some articles* of COVID’s impact in local businesses and the economy I reframed the main questions to trigger ideation:

How might we

  • Make the solution scalable to a whole ecosystem so that users don’t download an app just to use once?
  • Turn customer’s preference for in-store purchasing into an opportunity during COVID?
  • Engage millennials, who spend 52% of their budget on experiences?
  • Use the post covid world’s context for rethinking the way we shop? (Social distancing, economic recession and new habits)?

Social Impact

Ideation

Solution hypothesis

Product brief

Journey map to be / proto-blueprint

To truly envision the new experience, as well as take into account the complexity of the system, I designed a journey to be and semi-blueprint that would clarify the steps the user would have to go and which backstage interactions would be involved. From finding an item nearby through the app, to going to the store, trying it on and making the purchase.

Value proposition canvas

Strategic assesment

With the resources and information I had, I conducted a brief viability, feasibility and desirability assessment (assumption-based) to round up the idea. This exercise mostly helped me look at the product through a more strategic and business-oriented lens but would require more in-depth analysis for it to be truly reflective of real life plausibility.

Minimum viable product

To build the solution hypothesis, I decided to develop a proposed solution statement.

Offer

Shopping never felt so good.

With Offer, the best of online shopping meets the needs of the real world. A multichannel experience that helps you locate the best shopping deals and local stores, try on items without hassle, manage your preferences and save time with a new and faster payment experience.

It also helps you reduce your footprint, get local businesses back on their feet and diminish time in store.

With Offer, you can:
  • Save time;
  • Reduce your footprint;
  • Help your local economy;
  • Save money.

MVP's features

For costumers
  • Account
  • Search
  • Store locator
  • Items saving
  • Scanning feature
  • Payment
  • In-app purchasing
  • Recommendations
  • Rewards and prices
For sellers/shops
  • Account
  • Online store
  • Sales manager
  • Analytics
  • Payments
  • Deals and advice

Prototype

Information arquitecture

Sitemap v1

To start shaping the digital product that would serve as the main service artifact, a sitemap was designed to understand the levels of navigation that the user would be able to explore.

Start with paper

The first iteration of the sitemap was done old school: pencil and paper.
I particularly like to sketch as much as possible in my design process because it allows me to experience a different way of thinking that is just not possible to attain through digital mediums.

Closed cardsorting

Given that the proposed navigation was fairly simple I decided to take an informal approach to cardsorting. This was right after I had done research and testing for V1 through video calls with the participants, so I was already familiar with the medium.

The cardsorting was conducted via video chat.

Final sitemap

With the guerilla cardsorting results I iterated the sitemap to reach a final version.

Interaction Design

Task flow

Now that the main navigation was settled and the expected product experience was defined, I decided to create task flows. This allowed me to validate whether I had enlisted all the necessary sections for the user to be able to perform the main tasks of the experience.

What about the user flow?

Because the aim of this project is to build a product to expand and solidify a service idea, I decided to keep it simple and only develop a task flow to guide me through the construction of the screens. If this were to be developed, a user flow would be required to make sure we’re giving the users all the necessary points of entry and exit, main and secondary pathways to achieve their goals.

Content Design

With the tasks and user flows in hand, I considered jumping straight into wireframing. But in my experience as a UX Researcher and Designer, I had seen how making visual decisions before working on the experience’s content affects the process.

On one hand, it forces future re-work for the designer. On the other hand, it impoverishes the final result because: how can you really design the appropriate layout for the information if you don’t have the information in the first place?

Brand persona

In order to create the content prototype, there were previous decisions that needed to be made.

  • How should the brand speak? (Tone of voice).
  • What should be their communication style?
  • From which existing products will the brand be inspired?
  • What should be the brand personality?

Personality image

To answer these questions I decided to create a brand persona based on two well-known youtubers that cater to both Gen Z’s and Millennials.

Emma
  • Laid back
  • Easy going
  • Fashionable
Marques
  • Kind & helpful
  • Trailblazer
  • Techie
Both
  • Best friend vibe
  • Funny
  • No BS

Personality characteristics

Summary

Offer is like your cool and laid-back friend who loves a good deal and has a great sense of style. They are always one step ahead regarding trends in fashion and tech. They’re kind and resolutive.

Neutral presentation

Here at Offer we know that in this day and age, we want to find good quality clothing fast and easy. We all thought online shopping was the answer, until we were disappointed with clothing that didn’t look like the picture or didn’t fit.
We’re also aware of the impact our delivery economy has on our environment, our pockets and our local businesses. Because of this, we created Offer.

W/ Offer’s brand persona

Hey, I’m Offer. Have you ever felt like finding good quality clothing that actually fits is much more complicated that it should? We all thought online shopping was the answer, but with all the technological possibilities today, I’m disappointed we haven’t found a way to make it work. Also, what about the impact our delivery economy has in our environment, our pockets and our local businesses? So, let’s do this together. Let’s go shopping in a way that never felt this good.

Content prototype

Now, the decisions made regarding the brand persona had to be implemented. To do so, I decided to use the format of a content prototype in which we state the following:

  • The task flow we’re going to write the content for.
  • The product moment that said task flow entails.
  • The user’s goals in said product moment.
  • The feelings and mood we want to evoke.
  • The script between the product and the user which follows the structure of a narrative arc: exposition, rising action, climax, falling action and denouement.

Excerpts from the content prototype.

Low-fi wireframes

By now is evident my preferred medium is pencil and paper. So, true to my essence, I first sketched all the screens of the main task flows. I did so by looking at different references I collected in dribble, behance and pinterest. I also took into account my content prototype that gave me a general idea of the type and amount of content that would be included in each instance.

Keeping it simple

Because of the complexity of the product, I didn’t want to overly work the layout. I considered it more effective to stick to basic design patterns because my main goal was to visualize a service idea.

Implementation

Visual design

In order to design more effectively we have to create constraints for ourselves. I consider these artefacts a great way to document the basic decisions with which we are going to begin our creative endeavor even if some things change when implemented.

Moodboard

Style tile

Experience

I prototyped the main service artifact as an app directed to both Gen z and younger millennials. It is a developed (but not tested!) idea that aims to provide some food for thought regarding possible solutions to present problems.

Taking the previous case study (Offer 1) as a point of departure, I prototyped the main service artifact as a SaaS app directed to both Gen z and younger millennials. It is a developed (but not tested!) idea that aims to provide some food for thought regarding possible solutions to problems that had arisen during the pandemic. It intends to reduce the amount of people in stores, minimize the time people need for shopping during business days and get more customers to local businesses that have economically suffered for the past years.

Mix and match

The homepage mixes and matches social media with e-commerce by taking some features (stories carousel, for example) and adapting it to the service. The main user input is their location. With it, their experience becomes personalized: the shops they can browse, the trending items they can save and the deals are all relevant to their geolocalization.

Main features

Daved offers; liked items; shops nearby; deals nearby; Trending items nearby.

Convenience over gender

When exploring, the users are shown the main categories without gender. If necessary, users can filter the product list (either from an specific category or the general one). When filtering, they can enter a different location, adjust their distance and price range. This filter were prioritized over size, gender and ocassion to highlight convenience.

Main features

Product list, items’ categories, filters.

Mobile first

Offer’s main value proposition is to connect users with local shops in order to streamline and improve the shopping process and its effects on society and the environment. Therefore, the context of use that the product prioritizes is one where users can have access to relevant products fast and on the go. The description of the product emphasizes this by informing distance, location and stock.

Main features

Product card w/details; color, quantity and size selection; distance from user and location; stock quantity; save offer.

Saving before buying

To reduce the environmental impact of delivery and/or return while allowing small shops to reach larger audience, Offer lets you save offers with the intention of buying after trying them out. Once an offer is saved, you have 2 hours to redeem it. Some offers even come with rewards, allowing you to save money by buying the item in the aformentiond time slot.

Main features

Save offer; offer countdown; saved offers list; how to redeem an offer coachmark.

Connecting shops with customers

The connection between shops and possible customers is reinforced by giving users the possibility to get to the shop easy and fast. From the saved offer’s redeem card, they could get the shop directions, reviews and info and also scan and pay for the item.

Main features

Offer redeeming card; offer countdown; shop directions; map with directions according to transportation; shop’s info; scan and pay.

Streamlined payment

Offer set out to integrate the best of online shopping with the needs of the real world. From earlier research, we knew that customers enjoyed the convenience of checking out online but wanted to be able to try on clothing. Also, there was a lot of dead time and hassle in the traditional payment experience that could be streamlined. With Offer, after users tried on the item in the shop, they can easily pay online before leaving.

Main features

Saved offer; offer’s countdown; saved offers list; wow to redeem an offer coachmark.

All this work
deserves a bigger screen!

Because of the length of the case studies, I have adapted them for mobile and tablet. If you want to read the complete case study, head over to desktop.

Thank you for reading!