Salesfloor enables Store Associates create their personalized Storefronts for retailer’s e-commerce website.
The platform provides Store Associates a mobile app with everything they need to interact with shoppers, create their own marketing campaigns, and sell.
Product Designer (2015—2018)
UI/UX Design for Mobile & Web Applications
The Canadian Arts & Fashion Awards
Joe Fresh Fashion Innovation Award (2017)
The platform had to present itself to associates in a way that makes next steps very clear. The interface had to be intuitive, decluttered, easy on the eyes, quick to learn, and accessible.
I started building app’s visual language by outlining its value proposition formula — a communication tool for Store Associates. Once I created personas representing user’s goals and characteristics, I went on to list key features of the app in order to create mid-fi wireframes.
Among all UI concepts designed, we chose to move forward with the look and feel that, according to most users, “felt confident to use”. After we decided on the core visual style, I applied it to hi-fi prototypes.
Sketch, InVision, Principle, Zeplin
As the product grew, the need for reducing steps to better match Store Associates’ daily schedule has become inevitable.
Started the process by creating a feature map and end-to-end journey based on personas which helped me to test a dozen concepts using a mix of paper and lo-fi mockups. Several versions were presented over InVision and as Principle prototypes to get both usability and conceptual feedback from users and stakeholders.
After overviewing the case-specific experience, I synthesized an initial hypothesis that users would prefer to have up to four daily tasks accessible from their main landing page to achieve a more refined task handling.
Google Analytics, Hotjar, Sketch, InVision, XMind
Through Salesfloor’s widget, online customers connect with local associates through chat, personal shopping services and other collaboration tools.
Building configuration options for the sidebar widget that appears on retailer’s website was high priority for retailers so they can customize their versions to test, have more views, and clicks on mobile and desktop browsers. Once I mapped key configuration options for each retailer, I went on to build customizable prototypes for each option, including left or right positioning, toggled metadata such as tagline and geo location.
All prototypes designed had animations and transitions rendering widget on page and presenting Store Associate images. On desktop browsers, widget transitioned to a minimized state when the user scrolls within the page after the initial scroll.
Each associate creates their own personalized version of the retailer’s e-commerce site featuring personalized product, trusted advice and live shopping services. Each store has their own personalized version of the retailer’s e-commerce site.
I kicked off the initial process by building a boilerplate structure for a no-name storefront that is flexible to enable customized versions carry out retailer’s brand and identity throughout a consistent experience of services. I built the core UI Kit in a molecular-symbol way so that it provides a blank canvas for retailer’s brand and web styles we needed to capture.