Shelfy.io
A plugin for Shopify and WooCommerce that converts an online store into a mobile app without coding.
Summary
Role: Product Designer
Location: Ramat Gan, Israel
What I did: Design, UX research, tests, UI, wireframing, prototyping
Collaborated with:
-
Product Managers
-
VP Marketing
-
Customer Success
-
VP R&D
-
Developers
Industry: E-commerce
Project Type: Saas
Target Audience: B2B
Platforms: Web, Native Mobile App
Tools: Figma, Adobe Creative Suite, MUI Design System, Jira
Problem & Solution
Problem
The store owners want to attract their customers' attention to discounts and promotions.
In 2022-2023, the average person spent 108 minutes a day on a mobile phone and viewed content at a speed of approximately 30 cm every 5 seconds.
As a result, the ability to perceive information has decreased, leading to a decrease in the shop's profit by between 5% and 13%.
Challenges
The project is encountering challenges in both UI design and development:
-
Multiple design studios contributed to the project, resulting in a lack of consistency in the design system and Figma in general.
-
Developing new features leveraging the capabilities of React. A solid understanding of development tools is essential for executing a qualitative design workflow while avoiding the investment of time in impractical or cost-ineffective features.
Solution
Increase users' attention to promotions by using catchy gamification elements and dedicated discounts section.
Results
Here is presented the final design of an MVP version of the "Discount elements" builder on the Discount form. As a result of bringing to live the "Discount" section increased the number of users by 6% in 2 months.
UX Research Overview
Market research
To define the variants of the discount elements design, I started with exploring such apps as Amazon, Temu, iHerb, Zara, Yohananoff and KSP.
I made this choice because most of them are major players, and they shape user experience expectations among the audience. At the same time, I wanted to focus on Israeli e-commerce apps, aligning with Shelfy.io's target audience.
As a result of analyzing e-commerce apps, including such pages as:
-
Home/Main
-
Search Results
-
Product
I identified the most common and popular design elements in Israel and worldwide.
In Israel
-
Badges
-
Highlighting Discount Elements (Special Colors)
-
Call to action
Worldwide
-
Call to action
-
Highlighting Discount Elements (Special Colors)
-
Social Trust
The target audience of Shelfy.io is primarily located in Israel. Therefore, for the MVP version, I chose to introduce badges as a widely favored design element.
Also, I selected a promo bar even though it's not a widely used component. However, it offers high edit-ability, and allowing users to customize it in a way of for social trust and highlighting discount elements.
Target audience
-
Online store owners and managers, who want to expand businesses and income at the same time don't want to dive in complicated digital platforms.
-
Regular Store Buyers who want to shop online.
Results of the interviews
-
87% of the store owners and managers prefer to build advertising designs online with minimal time costs.
-
71% of store buyers don't want to see very noisy interface and animated elements in online stores.
Navigation & User Flows
Navigation map
I developed a navigation map to present the data about how users would be able to create a discount elements on the create a discount form. I used it as a base to build a low fidelity prototypes.
User flow - Video
Here is presented, the animated prototype on Figma. After the video, the design solutions for the specific screens within this flow will be described.
Wireframes & Usability Testing Results
Wireframes - The "Promotion Tag" states
For me, wireframes are one of the most important steps in creating a design, as they help maintain objectivity. In this case, I created the following forms and tested them on the target audience, achieving an 80% approval rate.
The "Promotion Tag " form - "Create a tag" state
The "Promotion Tag " form - "Library of badges" state
Wireframes - Library of Badges
I prepared 2 variations of tag libraries for usability testing. My 1st idea involves grouping the badges and placing a button next to each group.
The 2nd variation is based on the theory of how users process information. In this version, the badges are significantly larger, making them the focal point.
The 1st variant of wireframe
The 2nd varian of wireframe
Usability Testing Results - Library of Badges
A total of 72.4% of the respondents approved the 2nd variant of the wireframe design. Throughout the testing, I found that users tend to use the search bar in this type of library. This is why, together with the product team, we decided to develop a search bar for the library during the next round of platform modifications.
UI - Design
The "Promotion Tag" form
1. I incorporated a "Promotion tag" into a dropdown list as it is a part of the "Create a Discount" form, aiming to keep the interface minimalistic and lean. I set "Create a tag" as the default radio button, as it is the only state where users would be able to see all the settings, thus encouraging interaction with the platform playfully.
2. On Preview I added a Shimmer of a "Promotion tag" element, to provide a general understanding of what it is and how it would be shown on the application. According to heuristics, it helps to minimize the user's memory load and reduce the amount of cognitive effort.
The "Library of tags" form
I added an "Attach" button in front of the "Library of badges" to maintain the system consistency and prevent errors on the user's side.
To highlight the difference between the "Library of badges" and "Create a tag", I changed the grey circle to a colorful shape. This enables users to easily notice visual distinctions between these states.
Library
After clicking on the "Attach" button, the library will be shown to the user. I placed the "Library of badges" title at the top of the popup window to facilitate smooth navigation for users. Also, I made the tags in large sizes to reduce visual weight and cognitive load.
On the right side of the popup window ,I added a scroll to show the visibility of the system status. For keeping users informed about the availability of the badges.
As the tag was not chosen, I implemented a grey color for the "Add'" button to indicate its "not active" status. It enabled the prevention of errors on the user's side and maintained the standard design language.
The form is completed
I decided to display the status of the "Promotion tag" form at the top of the drop-down list after a user has completed and closed it. This creates a positive UX by displaying the result of the interaction.
Results
Here is presented the final design of an MVP version of the "Discount elements" builder on the Discount form. As a result of bringing to live the "Discount" section increased the number of users by 6% in 2 months.