Shelfy.io
A plugin for Shopify and WooCommerce that converts an online store into a mobile app without coding.
As a Product Designer at Shelfy.io, I took part in developing new features for the back office of a B2B mobile app builder. In collaboration with the product team and developers, I created designs for sections such as "Discounts," "Dashboards," and "Collections," which are based on in-depth qualitative user research, competitive analysis, and testing. The constant communication with multidisciplinary teams and a thorough understanding of UX processes provided the opportunity to build user-friendly and enjoyable interfaces.
Challenges
Creating new features in a startup requires awareness of available development tools; since I knew that the developers were building a platform using React, I based UI design decisions solely on the Material Design library. This allowed me to invest more time in UX research and testing, while incorporating the Material Design UI-Kit for Figma reduced the time needed for prototyping and minimized the number of visual bugs. All of this enabled me to optimize the budget and focus on the well-founded solutions that can be achieved.
The Task
Create a "Discount elements" builder that enables users to highlight promotions on a mobile e-commerce app.
Formulate a 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%.
Find the solution
Increase users' attention to promotions by using catchy gamification elements and dedicated discounts section.
Conduct a UX research
To define the variants of the discount elements design, I started with exploring such apps as Amazon, Asos, iHerb, Zara, and Shufersal. 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 e-commerce apps that specialize in specific types of products.
As a result of analyzing different pages, testing user flows, and preparing mood boards, I identified elements that could be to release as:
-
Banners Ads;
-
Promotional Cards;
-
Countdown Timers;
-
Highlighting Discounted Elements.
After completing a competitive research analysis, I began working on a user study with the product team. I took part in preparing hypotheses, selecting groups of respondents, and analyzing the results of the in-depth user interviews. We found out that store owners would prefer to build advertising designs online with minimal time costs. At the same time, customers didn't want to see very noisy and animated elements in online stores.
Create User Navigation
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.
Design 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.
Create 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.