Impulse Edge
UX & UI designer / Odysii
Impulse Edge is a lighter version of Odysii's flag product. Its software analyzes and promotes convenience store products at sales point during purchase.
This project is currently in development.
What is Impulse?
For years, Odysii's flag product was Impulse© – a B2C product for C-store managers. Impulse© is a smart software matching products for paying customers during the transaction and increasing sales.
Impulse© promotes based on popularity, previously scanned product, weather reports, and customer history.
​
We were the R&D team that re-made Impulse© into Impulse Edge©.
Roles & Responsibilities
What’s my part?
Areas of Responsibility
I was responsible for planning the UX & UI guide for Impulse re-making into Impulse Edge, ideation, UI decisions as part of the design process, specification & documentation, information architecture.
Team
1 developer, and me as the UX/UI designer.
Duration
3 months
Discovery
Re-design
My UX design approach is user-centered, but on re-design projects, before getting to the user research, I usually conduct discovery following 3 simple business aspects:
​
Learn the product
I knew the product from A -Z, I had 7 years of experience working on Impulse© related projects from different aspects: marketing, UI design, FE coding. (Go to White Labeling to read more)
I worked with clients monthly and I was aware of their needs and usage of the product. I was also delivering marketing materials to the support team for publishing and to follow through with the delivery, so I was aware of how the backstage worked.
But personal experience is just a little piece of the puzzle, see more insights in Ideation below.
External Stakeholders
I could list the clients' current needs, but I wanted to learn about their future goals. I needed a fresh take of our clients' business strategy.
The clients' discovery concluded that the Loyalty program was a popular feature but mainly for big chain C-stores (like Shell or even Terrible Herbst), not so much for SMBs.
Another thing SMBs managers weren't that excited about was the digital self-service stand, it just wasn't something they could easily identify with. Their business relied on a more personal, human service.
Internal Stakeholders
Impulse© worked well, but the product expenses were over budget for some of our SMB clients. We also wanted to improve the software's abilities, update the UI, and increase speed using different hardware.
The inner-management decision was to re-develop Impulse© as a modular service, so each client could mix & match features according to specific needs or financial capacity.
That objective dictated the information architecture approach. Meaning, a single general data-structure for each item to better match the pieces of the puzzle.
Cautious Conscious
Ideation
Experience is tricky. I was conscious that due to years of experience I might get over-judgmental, so to create real leverage for a better product for all sides considered, I decided to conduct the ideation process with all product departments. To get real feedback from people that live that product daily. I conducted interviews with my team members, with Customer Support, QA, R&D, Marketing, and Client Management.
Here are Impulse© screens with some improvement points that were brought up:
01
Tactical Ticker
In Tactical mode, between transactions, there's a ticker playing a text message from the store. The ticker was not the most popular feature, most clients used the promotion section to convey their store message more visually.
And the ticker became a generic message, a visual place holder for the virtual receipt in the following Targeted mode.
.png)
02
Transaction Started
The only UI indication that a transaction was started, is the sudden appearance of a virtual receipt. Most customers search for it to follow through with the transaction, but there are only 3 lines visible at once, with no interaction or ability to view the full transaction.
.png)
03
The Price Leads
The price bullet is the main call-to-action and the only animated component. It leads to the visual hierarchy.
There was a suggestion to give the selling item the front stage.
.png)
04
Selection
Promotions with selection were a popular feature at first, but for some reason decreased in engagement percentage. Visually, it had a different grid and seemed unusual in the promotions flow. It needed a re-design.
.png)
Research & Conclusions
User Insights
I watched transactions recordings, gathered user interviews, updated the competitive research. and concluded user-testing analytics.
I summed up the ideation & research process and listed the suggested improvements to apply in the Edge version:
01
Transparency builds Trust
Transparency of transactions is crucial for user engagement. A former user study on Impulse showed a clear connection between low customer engagement and feeling insecure about controlling the transaction (especially removing items, in case of a miss-tap or any other human error). When people spend money they are cautious, they need to feel secure that they will be charged only for what they chose, they need to feel in control.
To reassure a sense of control, I suggested adding an animated transition to transaction mode, a cart button that will present the current amount of items in the cart, and an interactive cart view of all items, hoping these will build customer trust.
02
Keeping it up to standard
Creating on-screen movement was our best asset for catching the customer's eye. Impulse's UI lacked in organic touch movement, we had to bring it up to date by implementing Material Design motion since it's practically a standard in today's touch products.
You can't ignore the playfulness and delight an organic movement brings to a digital experience.
03
Swipe & Drag
Impulse© tablet (a simple old QK) had limited use of gestures. The use of new tablets allowed us to increase interaction by applying touch behaviors, like scroll, swipe, and drag. Broadening the range of interaction types would deepen brand communication and trust and hopefully would encourage conversion.
With this in mind, I used the animated promotions transitions to imply the swipe gesture for browsing the promotions list as well as an animated item drop to the bottom of the screen to imply the drag gesture for adding an item to the cart.
Design Process
Simple is better
The design here is only a structure for the customized final product.
Store managers can apply branding to the design and change colors, text, font, images.
We established that the keystones are transitions, animated-interaction, they are at the base of this design.
Now we had to decide how exactly, what will be a better transition for each user flow?
Half or Full
Impulse© had no screen showing the entire transaction. On Edge, we wanted to able the customer with a full view of the transaction, live. What's the best way to do so?
A full-screen view or a half-screen view?
We decided to go with a simple full-screen view, to give the customer a quiet visual that able him to focus on the items list.
Full-Screen Cart
Half-Screen Cart
Subtle or Dramatic
When a transaction starts, the UI transforms to Targeted mode when adding items to the cart is enabled.
What works better? a subtle appearance?
Or a dramatic animated screen?
We decided to go with the simple, subtle transition.
Subtle Appearance
Dramatic Intro
More info or No info
On Impulse©, we had a bottom virtual receipt showing the last 3 items. On Edge, we enable a full-screen, interactive view of the cart.
To support that full screen, we needed an indicator on the main screen for the current cart status. What the best solution?
A minor indication on the cart button with the changing number of items?
Or an expanded animation with a short glimpse of the last scanned item description?
The new animated interaction wasn't too intrusive to the browsing task and turned out to be informative just at the right amount.
Just Items Number
+ Last Item Description
Specification & Documentation
Doc it
Share it
Use it
The feedback from the ideation process was fruitful in many ways. Not all conclusions were product-related, some concerned interdepartmental communication. Repeated misunderstandings, poor communication and, and lack of the proper base of documentation and guiding tools.
I always believed better team-work will lead to a better product so right in the early stages of design, I decided to use a dynamic specification document, updated to teams' needs.
01
Information Architechture
This document follows user behavior through multiple processes of the app and defines how the app and its features work in every step of the flow.
02
Specification
An elaborate specification of hierarchy, templates structure down to animation settings, scales & positions.
03
Collaborate
We used Figma as our main platform to collaborate UI design, components, style guide & prototypes.
Take-aways
To Be Continued
While this project is still in development, I got great feedback from the teams:
They took pride in being considered during the ideation process. They became more confident suggesting improvements.
The documents and collaborative platforms were a great success, collaboration was effortless and much more efficient, and teams delivered tasks faster.
