top of page

Shelfy.io 

Shelfy.io is a plugin for Shopify and WooCommerce that allows converting a web online store into a native mobile app without coding skills.

The main feature is a “Shelf-Based” interface that provides

a unique and convenient user experience. It simplifies user choice through a horizontal scroll system. Moreover, product images look more catchy and nice.

Role: As a permanent Product Designer, I developed  from scratch and updated designs both for web

and mobile interfaces, including

  • Crafting JTBD, User Cases, and Navigation;

  • Taking part in Daily, Demo, and Brainstorming new features;

  • Creating sketches, wireframes, and responsive animated high-fidelity prototypes;

  • Conducting User Tests, Visual reviews, and A/B tests.

Team: 1 Product Designer, 2 Product Managers, 1 Marketing expert, 1 Customer Success, 5 Frontend Developers and 3 Backend Developers

Duration: 1,3 years

Tools: Figma, Adobe Creative Suite, MUI Design System, Jira, Trello.

Problems

1. Responsive websites do not work properly on mobile devices. At the same time, young and adult people prefer shopping online with smartphones and over 78% of all mobile traffic is accounted for e-commerce.


2. Small and medium stores do not have the resources to build their application as it is very expensive and time-consuming.

 

3. some suppliers are not ready to accept the rules of such platforms as Amazon, eBay, or Walmart.

Solutions

1. Shelfy.io suggests the plugin for Shopify and WooCommerce store owners. It allows converting stores

on familiar platforms with minimum cost.

2. The plugin includes such sections as Dashboards with mobile store analytics, Look&Feel with a preview, and Discounts with banners, stickers, and bubbles with different promotion types.

User Interviews

Respondents

1. Online Store Owners, who want to grow and expand their businesses;

   

2. Online Store Managers who don't want to dive in complicated digital platforms;

 

3. Regular Store Buyers who want to shop online without any kind of delay.

Conclusion

1. For small businesses it's a very-very expensive to build their mobile application;

2. For shoppers it is highly important.  

Use Cases

User Flows

Here, I want to show one of the user flow that I developed belongs to the "Discounts" section. The most challenging thing was developing the final logic and appearance as for different types of discounts the form would not be the same.

 

First of all, in collaboration with the product manager, we started to find out the most popular discounts. After the market research and analysis of online stores, we chose Buy X Get Y, Total Order Discount for the MVP version. The main difference between Buy X Get Y and Total Order Discount lies in the "Customer Buy" section.  

Sketches: The List of Discounts - Discounts "Main"

I started with sketches, as it is the easiest and fastest way to jot down ideas ideas and thoughts. When I began working on “History” I had 2 theories of the interface appearance.

1. The first interface included more detailed information about the discount and filters for sorting;
2. The second one displayed a preview of what would be shown on a mobile device.

1. The first variant includes Name, Promotion Type, Date, Creation Date, Status + Icons, Delete, and Edit. For the MVP version, there are several variants of filters such as Keywords, Status, and Dates.  This choice is based on competitive analysis.

2. The second variant includes Name, Date Promotion Type, Status + Preview. I propose a hypothesis that a preview could be more convenient for the user than a table. I decided to test high-fidelity wireframes to find out the truth. For filters, there is only searching by keywords. This choice is based on product design articles and data from competitive analysis.

Sketches: The form of creating a promotion

When I started working on sketches for the ”Create a Promotion” form, I decided to divide it into two parts.

1. The first part, Promotion Details, includes Name, Time Ranges, and Promotion Type. After choosing one of the Promotion Types, the second part will be automatically activated.


2. The second part consists of 3 subsections Customer Buys, Customer Gets, and Actions and Elements. If the user chooses Buy X Get Y, the ”Customer Buys” subsection will include the Minimum quantity of items and Minimum purchase amount with an opportunity to pick a product/s or collection/s. If the user chooses Total Order Discount, the ”Customer Buys” will include the Minimum quantity of items, Minimum purchase amount, and No minimum without an opportunity to pick any product/s or collection/s.

Video: Actual Design

bottom of page