TOOLIO | B2B APP DESIGN
Project Scope: 4 weeks / 80 hours
Role: Strategy, Research, UX Design, UI Design
Tools: Figma
INTRODUCTION
Toolio is a new generation B2B merchandising platform for modern retailers. Users can track open-to-buy, build assortments, manage supplier relationships in an integrated platform.
Toolio wants to create a mobile app for merchandisers to use during buy appointments with suppliers. The goal is to make the buying process more efficient and organized for buyers with the new app which would be integrated with the web platform.
GOAL
Design an app that buyers can use during buy review meetings with brands/vendors, which supports the assortment planning function of Toolio. App should work in sync with Toolio’s web platform and should allow users to build assortments either from scratch or based on pre-created rough assortments. Users should be able to easily add items to their assortments by simply pointing, shooting and adding item information during these meetings.
PROCESS
01. RESEARCH
PRIMARY RESEARCH | USER INTERVIEWS
Toolio has conducted numerous interviews with industry professionals to better understand the current merchandise planning tools, their needs and pain points. Since the app we are going to be building will complement the assortment planning feature of the web product, we decided to focus on the conversations with buyers to explore this area further and narrow down product requirements.
I went through the interview notes conducted with senior / chief buyers from major retailers such as Bloomingdale’s, Levi’s, Target, Moda Operandi, Walmart, American Eagle and Urban Outfitters. Here’s a summary of my findings:
Number of Interviews: 20+
Opportunity & Facts:
Assortment planning and market prepping is a hot space with tremendous opportunity in merchant tools area.
All buyers with no exceptions stated that the tools buyers use are old school tools and methods. Product assortment is still done in Excel spreadsheets and a lot of the assortment collaboration happens very verbally.
Eliminating repetitive steps in building an assortment and simplifying the process in order to increase productivity is key.
Buyers who work for retailers that have some type of merchandising solutions tend to be very complicated and techy looking. They need simplified and visual tools that feel modern.
Process: (Focused only on the assortment planning part leading up to buy reviews and shorty after.)
USER PERSONA
Establishing a connection with the user and building empathy is essential to create effective solutions. I created below user persona based on my research findings. The goal of this exercise was to gain insight into the user’s behavioral patterns and build empathy to better understand their goals & frustrations.
02. INFORMATION ARCHITECTURE
SITE MAP
Here’s the sitemap:
03. INTERACTION DESIGN
In previous phases, I explored user needs, researched the market and mapped out the site based on user feedback. In this phase, the content and the flow of the website is further explored.
USER FLOW
I created a user flow to show how the user can navigate through the site. I explored 3 provisional personas and potential journeys. Here’s the user flow:
WIREFRAMES
Mid-fidelity responsive wireframes were created for the home page using Figma.
INITIAL PROTOTYPE
Prototype was created on Figma to test and validate designs at this early stage.
04. USER INTERFACE DESIGN
This phase focuses on branding, setting up design language and polishing up our design.
UI DESIGN
After reviewing the initial prototype with the client, I made necessary revisions and alinged. Then I moved on to creating high-fidelity wireframes based on the existing design elements.
Overview of screens
UI KIT
Gathered the existing icons, typography and elements and combined with the newness coming from the redesign.
HIGH-FIDELITY PROTOTYPE
Revised the prototype with the UI version to be able to better visualize the app and test with users in the next phase of the design process.
05. ITERATION & IMPLEMENTATION
Last phase of the project was focused on validating our designs with users.
USABILITY TESTING
Usability tests were conducted with three different participants. Here’s a summary of my findings:
All users were able to complete tasks without problems and think it is intuitive.
There were a few comments on potential minor UI improvements regarding text size, spacing and use of color.
There were a few comments about potential UX improvements such as adding empty states andd improving filtering&grouping options in assortment folders.
Users responded positively to the overall aesthetic of the app.
AFFINITY MAP
I created an affinity map to summarize and visualize my findings:
NEXT STEPS
Having completed usability tests, I identified areas of improvement and made necessary revisions to my designs.