SHOEME PWA

SHOEME Android
SHOEME iPhone

Categories: UX / UI, Web Development, React, Firebase
View: Hi-Fi Prototype (User not signed in), Hi-Fi Prototype (User signed in)

Intro:

SHOEME is a thrift company that allows local communities to buy, and sell their never worn, or used shoes. The PWA brings app-like features so users can shop offline while on the go, and receive push notifications as well.

Process:

From ideation to building the web app, I focused on “eating the frog,” where React code was approached first, for searching and filtering products. I applied it to sorting condiments, but from rough user feedbacks, I learned that people will shop for things they like only on the go, thus the idea changed to shoe shopping on the go.

Personas (Credit: Hubspot Tools), wireframes of the product page, and ideation of the IA

UI Mockups:

Buy Version 1
Buy Version 2
UI Mockup (v1.2 and v2) - Grid-style with filter on the side / Pinterest-style with collapsable filter

With the 2 UI mocks, the Pinterest style is more visually appealing to users, but is not more user-friendly in searching products, whereas the grid layout was a standard choice for e-commerce sites. With that in mind, I chose to stick with the standard for user-friendliness, and plus the grid layout had more maintainable code with CSS grid. The iOS and Android devices had to have specific CSS for the form styles and CSS grid fallback.

SHOEME notifications and stills

User Scenarios:

(User signed in): User tries explore how to use the search, add items and remove items from wishlist

The challenges I have encountered were performance (loading the list of shoes to buy), responsive design for CSS grid, and security of personal contact info. To maximize performance, I minify the files and cache the files with the service worker. Loading more shoes inventory than the prototype seems less feasible and may need to be rethought. Using the new CSS grid was also a challenge to code for cross-browsers, especially iOS, and IE Edge.