top of page

Shelfy.io

A plugin for Shopify and WooCommerce that enables the conversion of a web online store into a native mobile app without requiring coding skills.

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.

Conduct a competitive research

To define the variants of the discount elements design, I started with exploring such apps as Amazon, Asos, Zara, and iHerb. I made this choice because most of them are big players and they form expectations from the user experience among the audience.

Before conducting interviews, I formulated hypotheses about how users might interact with the product and their wishes and concerns. Also, I prepared a plan that served as a basis for interacting with respondents.

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.   

Create Design

The "Promotion Tag" form 

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.

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. 

The "Promo Bar" form filled

On 

Video

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.

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.

bottom of page