TOOLIO | B2B APP DESIGN
Project Scope: 4 weeks / 80 hours
Role: Strategy, Research, UX Design, UI Design
Tools: Figma
INTRODUCTION
Toolio is a new B2B merchandising platform for modern retailers. Users can track open-to-buy, build assortments and manage supplier relationships in an integrated platform. Toolio is currently available only to select retailers that are in their private beta program.
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
Add AI chat feature
Improve information architecture and reorganize content
Explore areas of opportunity for a potential additional feature to add more value
Create a design system, user flow and sitemap to reference going forward
PROCESS
01. RESEARCH
In recent years, there’s been a proliferation of mental health apps available to smartphone users. These reasonably-priced, or most often free, mental health apps offer a wealth of resources that make therapeutic techniques more accessible, portable, and cost-effective.
MARKET RESEARCH & COMPETITIVE ANALYSIS
Identified and analyzed other apps in the market that help track mood patterns and offer support. This was an essential step to understand what kind of tools are offered, identify their strenght & weaknesses and find areas of opportunity. Then created provisional personas to empathize with the user and understand pain points & expectations.
Here are the key takeaways:
Most of competition offer free features and premium features. Most popular premium features include:
Reading & listening materials
AI chat feature
Guided meditations
Free features found:
Evaluation test over an extended period of time
Mood tracker
Sharable reports
Journal
Quotes
Peer to peer community support
Platform to share problems anonymously and view other people’s problems
Live venting
Weekly Spotify ‘Positivity’ playlist
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.
SURVEY
In order to gain further insight into the user, I created an anonymous survey and recruited users based on the provisional personas. Here are the key takeaways:
Number of Participants: 25
Gender: Female (19), Male (6)
Age: 18-24 (2), 25-34 (13), 35-44 (9), 55-64 (1)
%88 of participants have never taken a depression test before.
%20 of participants said they are interested in taking this test. 5 out of 6 participants that have taken a depression test before are interested in taking it again.
40% of participants that are not interested in taking this test say they experience gloomy days but they manage fine overall.
2 participants (8%) stated they feel perfectly happy.
Only 1 participant (4%) stated he/she does not believe in this test.
Anxiety and burnout are the main persistent negative emotions participants have experienced over an extended period of time. 60% of users experienced persistent anxiety and 56% of users have experienced burnout. Hopelessness and loneliness follow with %36 and 20%.
72% of users gravitate towards self-help listening / reading materials in their self care routine.
52% and %48 of users incorporate meditation and venting in their self care routine.
20% of users prefer to speak to a professional when they feel persistent negative emotions. Most popular method (76%) is to confide in friends & family.
52% of users prefer to physically release their persistent negative emotions through workout.
Alternative methods (such as reiki, hypnosis, breathwork and sound therapy) were also popular among users with 36%.
64% of users are open to using an app to track their emotional journey.
Click here to view detailed survey results.
FINAL CONCLUSIONS
Based on my findings, here are the high priority features:
AI chat feature that the client is looking to add would be offered for a fee but should include some free features.
Adding reading&listening materials would add value to the app based on both primary and secondary research.
Venting feature also stands out based on my survey findings and this can be incorporated into the AI chat feature.
Potential futures that can be added later:
Based on my survey findings and market research, people who take this test tend to return to retake the test. In addition to push notifications to remind users to take this test again, adding new content at regular intervals may create more returning users. This could be achieved by adding the below:
Articles, videos and/or podcast.
Guided meditations.
Weekly/monthly playlists to promote positive thoughts.
Inspirational quotes.
02. INFORMATION ARCHITECTURE
SITE MAP
First I mapped out the current screens and explored ways to improve the current architecture. Then I made room for new features and content that I am planning to make more visible. Here is 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 all 4 of my provisional personas and created different scenarios for each. Here’s the user flow:
WIREFRAMES
High-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. Click here to view the prototype.
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.
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.
There were a few comments on potential UX improvements.
There was one comment on a potential UI improvement.
Users responded positively to the visual elements on 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.