TOGGLEMARKET
ToggleMarket is a B2B marketplace that offers a catalogue and SaaS procurement tools to hotel developers.
My Journey at ToggleMarket
ToggleMarket was my first job out of university. I was the seventh team member to join the startup. I initially joined ToggleMarket under a dynamic role, hoping to assist in business development and graphic design. The founder asked me to design a catalogue landing page and I did so on Photoshop at the time, completely unaware of the tools and processes of a UX/UI designer. After sharing my opinions on crucial issues I had spotted with the platforms logic (which was outsourced), I was asked if I could redefine that logic. I ended up redesigning the entire platform (from logic to UI).
As a founding member and shareholder at ToggleMarket, and with limitations in hiring capital, I felt that filling those shoes would benefit the company the most. So, I became the companies lead product designer and learned as I built.
I haven’t looked back since.
The Road to an MVP
Wireframing
The complexity proved too deep
Mapping the User Journey
For both Buyers & Suppliers
Low Fidelity Wireframes
A sketch for each module
High Fidelity Wireframes
I discovered Adobe XD
MVP Deployed
Product launched
Usability tests & Iterations
Enhancing the UX
Wireframing
This is the first ever wireframe I designed on Photoshop. The major change that this design introduced to the logic of the platform is in the toolbar under (Buying for: JW Marriott Harageisa).
Before this change, buyers would be prompted to select their project only after adding a product to their BOQ (cart). The change here meant that the user was no longer John Doe, but the project itself. This meant that the platform could cater the entire user journey to the project’s needs.
Mapping the User Journey
The above change was essential, but it had to be reflected across all touchpoints in the User Journey, and the platforms complexity was too immense for me to comprehend at the time.
So I mapped the Buyer and Supplier’s User Journeys. The image here may be too large to view, so a snippet of it is available underneath with the user flow for bidding.
For the next two sections, I’ll walk you through the development of this specific product module (bidding).
Low Fidelity Wireframes
Once I had mapped out the user journey, I had a grasp on how each of the product modules could function and communicate with one another. So I began sketching out low fidelity wireframes like the bidding page you see here.
Every time I completed a sketch, I would meet up with our founder (to confirm the business logic) and our CTO (to ensure technical coordination). This was not an effective process, but I was learning on the job while also supporting other sides of the business.
Bidding was a particularly important function as it is one of Toggle’s primary value propositions to its users.
High Fidelity Wireframes
After getting feedback on the Low Fidelity wireframes and signing all of specifications off, I designed the High Fidelity wireframes to be handed over for development.
Here you can see that some bidding page module come to fruition. Click on the link below for a closer look at the screens.
Deployment
Usability tests & Iterations
At this point the product had been deployed and we had a small handful of active users from the companies network making their rounds on the platform.
I used this opportunity to, through the commercial team, get two of these users to conduct a usability test, seen here with the task list of core functionalities on the platform. On these calls I asked the user to perform the action and monitored and recorded the level of difficulty they experienced and what they were thinking at every touchpoint. These tests and conversations lead to profound enhancements to the UX of some modules.
For future releases of unproven products I would definitely conduct these tests pre-deployment, as internal testing and tinkering did not prove sufficient.