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.