Basket: The App
The next generation of Ecommerce
AppsUIUXWebsites
Basket is a startup, breaking the mold of the traditional ecommerce basket. The aim was to allow users to save a product from anywhere then monitor it for price drops, coupons, and comparisons with other retailers.
Our role
Defining the initial UX & branding for the mobile app
We were tasked with performing the discovery, branding and UX design of Basket with the browser extension to come at a later date. The app would be native across both IOS and Android and the front-end would be made in Flutter by their dev team.
For the UX – we championed the wireframes, user flows and information architecture for the app itself. For the brand – we crafted the messaging, tone of voice, logo, palette and typography.
Research & discovery
Discovering the users and their key tasks.
We worked in partnership with Basket to create four detailed user personas that would guide the project. The personas were created from insight gathered from video interviews with end users about the basket concept.
We mapped the feedback in the video against key criteria to understand the scope of requirements that we needed to accommodate. Key criteria included: current shopping apps and tools, online shopping habits, motivations and drivers, current typical buying journeys, level of spontaneity vs research, and their involvement with vouchers and shared shopping content.
Each persona helped us to define specific features and how we allow users to tailor the experience. For example, one persona would value support with organising their shopping, whilst another was very focused and would value price drop notifications. There were some really innovative solutions Basket could provide to save people time and money.
Wireframing & Prototyping
Figuring out the pieces of Basket
Basket had lots of moving parts. Some of the main components included card types for different types of lists and individual products. These had to have multiple layouts for different places within the app. For types of lists, there were 3 cards that had to be designed: Private/Public list, Group and a follower version of a public list. For the product card types, we needed to include; a product image, name, price and whether or not there was a discount or price drop. We also needed show which user had added a product if it was part of a group list.
Component library
Ensuring there is consistency
We created a low fidelity component library which we used to ensure that everything is consistent across the platform. This also enabled us to rapidly mock up the application, testing individual flows, making sure everything is a smooth as possible. We could then easily apply UI styles later down the line which would convert our wireframes into the final product.
Prototyping
Creating a list
One of the main user flows in basket is creating a list. This was one of the iterations we came up with in order to do this. The necessary information we needed to capture from the user included: List name, list type & description.
Prototyping
Sharing to basket
Another flow that we needed to figure out was how to add a product to Basket from both inside and outside the app. This used the native “share” feature on both IOS and Android, and we needed to design what this flow looked like. This is an interaction of how we envisioned this would work.