Trella Store - Website
PRODUCT design
A Trucking Trade Tools E-commerce Platform
Trella Store is a Trella new ventures initiative that was launched on November 2nd, 2021 in Egypt. It is a one-stop-shop e-commerce solution that offers a complete selection of trucking supplies and services to truck drivers at discounted prices and with financing options, all through a seamless and user-friendly digital platform. The platform provides anything and everything a trucker needs to operate in the industry (and possibly in their everyday life). It was built using Webflow (a no-code website builder).
Values and Target Market
An important question that we had to answer before starting to figure out a GTM strategy was what kind of value we offer to the carriers/customers.
The value that TStore offers to carriers can be grouped under four categories:
• Stellar Customer Experience
• Reliable Quality
• Diverse Product Selection
• Competitive Prices & Financial Incentives
Our GTM Strategy splits our target customers into Trella and Non-Trella carriers:
Trella Carriers | Carriers that fulfil loads through Trella's marketplace. Initially, We'd be able to offer financing for their orders, as long as they are actively working with Trella.
Non-Trella Carriers | A huge base of carriers in the market that do not work with Trella. We'd initially target them for unfinanced cash orders, while we work on bringing in a third party financier to be able to finance their orders.
We focused on the Egyptian market for our launch year, with future expansion plans to the rest of markets Trella operates in (Pakistan, KSA, UAE, etc...).
the challenge
Truckers in the Egyptian market don’t have a go-to destination to explore and purchase all their trucking supplies (~33% of their OPEX) and services from. Moreover, for many years access to basic services like financing, insurance and leasing services wasn't available to truckers, except through personal connections and not through a structured market mechanism.
Tech literacy was also a major challenge throughout the process of building this product. For most of our users, trella store was the first e-commerce platform they've ever used. This meant that we had to ensure the experience was intuitive and as frictionless as possible.
Abdelrahman Nasef • New Ventures Manager
.svg)
the process
quick background story
Before joining the TStore team within Trella to work on the platform, I was part of Trella's Money Cycle & Load Cycle product squads. One day, while conducing a user testing session at one of the drop-off locations, I ran into Abdelrahman Nasef (Boody), new ventures manager at the time. He told me about how he was also there doing some discovery on this experiment called trella store that they started running offline. The experiment was showing promising results, but given the limited resources nature of startups, there weren't any product or engineering resources allocated to this new venture experiment. He explained how he was now looking into no-code tools such as Shopify and Webflow to build the e-commerce platform. I got super excited the second he mentioned Webflow and told him about how great I found it while building my portfolio website. He asked if I could give him a quick walkthrough of the tool and we were both so excited, we scheduled a call the very same day.
Fast-forward a couple of days later, Boody hits me up on slack and says: "Whats your schedule looking like for next couple of days? We have 2 days to build a TStore MVP on Webflow. We're lunching on Thursday". As I read the messages that were filled with enthusiasm, I thought "Thats impossible...there's no way we could build this in just 2 days!" I had to make sure I understood this correctly, I asked him if he meant building an MVP or just a quick prototype/demo. He confirmed that we were in fact building an MVP that we needed to launch in 2 days.
I had my doubts about whether this would be possible or not, but for the next 2 days, we started building the e-commerce site, treating it like a side-project where we meet at 05:00PM to work on it after getting through our busy schedules. And after a bumpy road, filled with obstacles, we actually did it. We launched the trella store MVP in just a couple of days.
It was only 3 months later, while the team was celebrating achieving targets when Boody told me about Parkinson's Law, which states that: "Work expands to fill the time allotted for its completion".
done is better than perfect
One of Trella's core values is "Done is better than perfect". And I'll admit, when I joined the company I didn't really agree with it. Design/creative circles have this culture that celebrates people that are obsessed with perfectionism, but this was the almost the complete opposite.
I mentioned the background story above to highlight the fact that the initial design process of building TStore was highly unusual. We did a lot of discovery and research, but for our MVP we skipped the wireframe sketches, Figma mockups and Engineering hand-offs. We were working against a very tight deadline and we needed to be agile, so we jumped right into Webflow and started building. Fortunately, we had a design system at Trella that made building it so much easier. The styles, guidelines and reusable components helped us move fast and focus on the user experience and implementation. Nevertheless, the first version we launched was far from perfect, but it was done. We had an 'okay' product out there in the world, where users could interact with it and we could get insights from their usage.
This was when it finally clicked for me, "Done is better than perfect" isn't about building products with no thought given to quality, it's about not getting lost chasing the myth of perfection and understanding that product development is all about constant iterations.
constant iterations
Building and releasing the product in such a short time, gave us access to incredibly valuable user usage insights that we would've never been able to acquire otherwise. We conducted user tests on a fully functioning product and integrated the site with Hotjar where watched recordings of user sessions and tracked user behaviour.
This combined with the fact that the platform was built using a no-code tool that enabled fast implementation, allowed us to experiment with different designs and layouts, validate our ideas and reach conclusions very quickly. We were constantly iterating on different parts of the website, based on analytics data and user behaviour, which led us to the product we have today.
learnings, decisions and the current product
Note: Given that our target persona for our launch year was truckers in the Egyptian market, we needed to build a localised product. This meant building the product in Arabic and designing the layout's orientation from right-to-left (RTL).
- All Trucking Supplies
- Best Prices
- Cash & Intalment Payment Options
While the program did not have a the largest contribution to the store's GMV, it was one of the channels with the highest conversion rates at almost 20%, with no push effort from the team.
We later on decided to display the referral program block in other parts of the products that made sense, starting with the order confirmation page (more on that below).
Watching users use the product, I realised that many of them do in fact use the footer to navigate, especially on the home page. I decided iterated on the very first version of the footer I designed, which had tiny text and small touch targets. The new version was built with more care to be easier to scan and interact with.
We realised that our user persona spent most of their time using mobile apps such as Facebook, Whatsapp, TikTok and the Trella Driver/Carrier apps. All of which had a bottom navigation bars which allowed users to jump to different parts of the app. This insight completely changed our design approach for the entire platform. We could no longer think of this as a responsive website, we had to design the mobile version like an app.
We later attempted to increase our average basket size metric by adding an "Add more products" button and experimenting with different positions for it. This included having it at the bottom of the sheet, right below the products and the one we finally decided to keep: At the very top.
For products such as tires the 'Country of Origin' was very important for our user's decision making. So we included it as a filter option as part of the revamp. We also added the Rim diameter option, which was incredibly helpful for customers to find the right tire for their truck. Both these options meant that users could search for combinations of brand, country and diameter, so that finding a 24" Bridgestone tire manufactured in Japan took seconds.
The section also aims to increase the average number of products (SKUs) per order, by showing users products they may not have initially considered. Users browsing tires would also see products such as lubes & batteries at competitive prices.
Given our operational model is one were users pickup their orders and not have it delivered, we only asked our customers for 3 things:
- Name
- Phone Number
- Instalments or Cash
Everything else would be provided in the order confirmation/processing call. The result was only a 1.1% checkout drop-off rate.
Since it wasn't part of the checkout form, we decided to include a button for the available pickup locations in the first block of this page. 53% of users clicked the button on this step.
That layout grouped the content by City, with all the locations in that city listed underneath. Users could then click locations to view the pin on the embedded Google map, which they could also click to navigate if needed.
- All Trucking Supplies
- Best Prices
- Cash & Intalment Payment Options
While the program did not have a the largest contribution to the store's GMV, it was one of the channels with the highest conversion rates at almost 20%, with no push effort from the team.
We later on decided to display the referral program block in other parts of the products that made sense, starting with the order confirmation page (more on that below).
Watching users use the product, I realised that many of them do in fact use the footer to navigate, especially on the home page. I decided iterated on the very first version of the footer I designed, which had tiny text and small touch targets. The new version was built with more care to be easier to scan and interact with.
We later attempted to increase our average basket size metric by adding an "Add more products" button and experimenting with different positions for it. This included having it at the bottom of the sheet, right below the products and the one we finally decided to keep: At the very top.
For products such as tires the 'Country of Origin' was very important for our user's decision making. So we included it as a filter option as part of the revamp. We also added the Rim diameter option, which was incredibly helpful for customers to find the right tire for their truck. Both these options meant that users could search for combinations of brand, country and diameter, so that finding a 24" Bridgestone tire manufactured in Japan took seconds.
The section also aims to increase the average number of products (SKUs) per order, by showing users products they may not have initially considered. Users browsing tires would also see products such as lubes & batteries at competitive prices.
Given our operational model is one were users pickup their orders and not have it delivered, we only asked our customers for 3 things:
- Name
- Phone Number
- Instalments or Cash
Everything else would be provided in the order confirmation/processing call. The result was only a 1.1% checkout drop-off rate.
Since it wasn't part of the checkout form, we decided to include a button for the available pickup locations in the first block of this page. 53% of users clicked the button on this step.
That layout grouped the content by City, with all the locations in that city listed underneath. Users could then click locations to view the pin on the embedded Google map, which they could also click to navigate if needed.
