Year: October 2019
Timeline: 2 weeks
Role: Lead UX/UI Designer
The article details the UX design work for Tilsta, focusing on creating tilt-interactive mini shopping carts for online fashion retailers to enhance mobile shopping within social or messaging apps.
Create an innovative, tilt-interactive mini shopping cart technology for Tilsta's clients, aimed at enhancing the mobile shopping experience within social or messaging apps.
Tiltsta is a mobile shopping solution designed to help online fashion retailers turn their marketing budget into a revenue generator; with delightful tilt-interactive mini shopping carts that allow impulse buying within any social or messaging app. Through the Tiltsta Studio, fashion retailers can choose relevant products and place engaging mini-carts directly into their users social media feeds.
Although the tilt-interactive experiences live in the social media channels, users are still taken to the retailers mobile checkout page (all without leaving their social media app). This is setup through an integration directly between their
e-commerce website and Tiltsta. The same integration allows Tiltsta to transfer all relevant images and information including real time size, availability and pricing between the website and social based tilt-interactive experience.
Tiltsta's client were predominantly Australian online fashion retailers. These were clients such as the ICONIC, Byron Bay's Spell and The Gypsy, Sunburn and other companies in a similar space. Based on the existing user information and data these established companies collected. It was quite conclusive Tiltsta's end users were predominantly aged between
18 - 35, both female and male, have a disposable income and own a smart phone.
With a clear understanding of who Tiltsta's end users now are, we began to conduct interviews. During this process we collected qualitative information around the behaviour of our end users within the environment of social channels. We asked questions to understand their pain points and frustrations when shopping via their smart phone online. Finally, using methods like affinity mapping, we collated and categorised the findings.
From these findings, we decided as a product to identify key business goals:
As a starting point, we conducted market research on competitors to investigate how they were solving similar UX/UI problems within their online shopping mobile apps and websites – taking inspiration from particular UX/UI features we liked about each app.
I then conducted a 15 minute rapid sketching session, encouraging each member of the team to generate and ideate solutions that address these problems.
I conducted workshops and sketching sessions with the team to map out the user flow and come up with a storyboard to capture the MVP. We identified the following key user stories:
In order for the engineers to begin on the architecture, I mocked up the main screens for the MVP based off the sketches created by the team and came up with the following:
User testing was an iterative process that was conducted at every milestone of the project to identify the biggest pain points in the current version. Once feedback was gathered, I would revisit the prototypes and test again.
Clickable version protoype here
For the brand, I wanted to create a refreshing, minimalist and clean UI that conveyed trustworthiness and progression for future-oriented individuals.
After loading, a user lands on the training screen. This was one of the most iterated pages as it was imperative the user understood how to use the experience. We also needed to ensure that a familiar user was able to bypass this step. Through user testing we finessed the UX/UI of this screen to minimise confusion and frustration that would lead to abandonment.
The user tilts their phone to add products to their wishlist. The progress bars at the top let a user know how many products to expect to see. Once an item has been added to their wishlist, the heart icon in the bottom right corner visually indicates the number of items added (highlighting in a red notification bubble).
The user has now selected items they desire and can view them in this shortlist screen. UI elements allows a user to select sizes, view multiple images of product, move between items and remove from wishlist.
This screen allows the user to checkout, email items to themselves, or save items in their wishlist. Each link will take them to a destination to faciliate that action. The 'Shop now' button being at the top as the user has followed that path to this page.
This screen allows the user to save items to their wishlist, email items to themselves, or checkout. Each link will take them to a destination to faciliate that action. The 'Save to wishlist now' button being at the top as the user has followed that path to this page.
the UI flow below shows the different user journey paths in relation to each other. See high resolution version here.
I used Figma to allow the engineers to inspect the HTML and CSS of the designs.The team used Glitch to develop the application and the platform was built using React. It is accessible via web based and native social media
applications on mobile.
The impact of Tiltsta's digital pop-up stores showed a 50 percent decrease in their clients bounce rates. The pop-up stores also showed an increase of products being added to end users baskets. This promoted further retargeting opportunities.
Some key takeaways from this project are:
