The challenge

Tok&Stok is a major brazilian retail brand for furniture and decoration. The app works as an m-commerce platform and includes many fun features to inspire its users, such as augmented reality. 

The MVP kick-off was after a Design Sprint immersion week at the company in Sao Paulo, Brazil. After the MVP was ready, we had a Design Thinking immersion to ideate the after sales features and participated at Apple workshops at WWDC20 to create Widgets and AppClips. Before the launch of the app in the stores, we made a UX Research to validate and make improvements. The app was developed by the Kobe team in both SwiftUI and Kotlin programming languages and is currently available in AppStore and GooglePlay

My tasks as the lead UX / UI Designer were:

  • User journey maps

  • Userflows

  • Sketches and Wireframes

  • UI Design & Prototyping

  • Sprint documentation

  • UX Writing

  • Animation and Illustration

  • User research & Analysis

  • Design System Guidelines

  • Client meetings

 

The project arises from the need to create a new shopping channel aimed at people in the process of acquisition or inspiration, in search of design and quality. As part of Tok&Stok's digital transformation process, the App is a new possibility for technological and omnichannel experience.

The Minimum Viable Product

In June 2019, a part of the Kobe team went to Tok&Stok's headquarters in Barueri, São Paulo, to facilitate an immersion process in the company. For a week, activities from Lean Inception format, a methodology created by Paulo Caroli, which aims to help companies and businesses to create their ideal MVP to validate their idea in the market.


Our challenge was to develop MVP in 3 months in two native programming languages SwiftUI and Kotlin, for iOS and Android respectively. After intense three months of work, the MVP was delivered. After delivering the MVP, Tok&Stok ran internal tests with the beta version for selected users to initially test the minimum viable product.

ar.gif

Inspire and facilitate product discovery

Navigation through inspiring environments, facilitating the visualization of products for purchase, was one of the guiding points for the development of MVP. The implementation of Augmented Reality brought an innovative way to discover brand items, enabling customers to view products in their own environment and share the composition created with other people.

Innovative shopping experience

Through the omnichannel strategy, we created features that contributed to the decision making of users in different sales channels. We seek to bring the experience of physical stores to the app, allowing the user to initiate a purchase through the app and end at the store with a seller.

Group 604.png
inpiracao-ios.gif

Customizable Platform

New product lines are always being launched, whether permanent or seasonal. To make it easier to update the application by Tok&Stok's own internal team, we implemented the CMS client, allowing the inclusion and alteration of banners, promotional and inspirational content, creation of hotsites and customization of the platform.

Order Management System

In December 2019, Kobe returned to Barueri, São Paulo to perform a new immersion at Tok&Stok, this time a week of Design Thinking. We use the approach created by Tim Brown and David Kelley to solve problems in an innovative and creative way. During this period, we discussed and raised hypotheses for improving the After-Sales system with different sectors of the company.

 

We also have a workshop day with Apple to share with the Kobe and Tok&Stok team vast knowledge about innovation and creativity. With new inputs, we started to plan and develop a new large product module, with the objective of creating an excellent OMS system with a focus on autonomy, transparency and ease of use.

Group 552.png
43.png

First concept of the order tracking flow, created at the Design Thinking immersion week

Intuitive and uncomplicated order tracking

We designed a navigation and interaction that facilitates the tracking of orders for users. Through animations, colors and details on the interface, we show in real time if the order is in separation, with the carrier, on the way home or ready for pickup at the store.

44.png
ezgif.com-gif-maker (34).gif

Final concept of the order tracking flow, improved with animations and CRM APIs data

Simplifying customer service

We provide the user with several service channels so that their doubts are resolved quickly and without bureaucracy. In addition, we created a system of Frequently Asked Questions, customizable according to the needs of Tok & Stok, where customers enjoy a quality self-service, without having to contact other people.

48.png

Frequently Asked Questions system

Dynamic profile with voice command

We developed a profile concept based on social networks, bringing modernity and dynamism to the interface. In addition to being able to view personal data, trends and favorite products, the user can follow orders from his account by voice command, inside or outside the application.

ezgif.com-gif-maker (3).gif

User profile interface

49.png

Voice command feature in iOS and Android

UX Research

Between June and July 2020, we conducted UX Research, planning and applying different research and testing methodologies, which contributed to validate the main functionalities of the application. We conducted remote, moderate usability tests and a continued use diary. These techniques ensured the generation of development backlog and improvements based on the analysis of the data obtained.

Usability Tests

Using Lookback, alongside Tok&Stok research team, we conducted two usability tests, first with Tok&Stok employees and then with real customers, where we were able to measure the ease, navigability of the application and users needs.

Feedback

  • Overall, the information is clear and easy to understand

  • Many inspirational collections make users confortable to find their own style

  • Augmented Reality works fine and helps a lot to try furniture at your home before purchase it

  • The lack of product evaluations and comments by other users that purchased make users suspicious

  • It would be interesting to provide login and sign up by social media accounts

20

Usability tests

89,7

Excellent

System Usability Scale

56

Great

Net Promoter Score

85%

Successful

completed tasks

Continued use diary

We made a selection of heavy users of the brand's services, known as Tok Lovers, to follow the entire purchase process through a diary of continued use by WhatsApp. Each participant received daily activities and recorded their impressions. 

Feedback

  • Users do not understand what search for image is used for

  • There is a lack of certainty on checkout of what products are being purchased

  • Inspirational collections page is difficult to find

  • Users get confused whether they need to keep the chat open while they wait for an answer on Help page 

  • Users want to see the history of recently viewed products

Screen Shot 2021-05-14 at 4.58.55 PM.png

WWDC20

Apple innovations workshop

After the launch of the application at AppStore and GooglePlay, our team was invited to participate in WWDC 2020 innovation workshops, to create user flows, interface and experience for the newest Apple technologies: Widgets and AppClips. Those features were a challenge for the team but were developed and delivered in one month.

Widgets

Two kinds of widgets were created according to the app users needs:

  • Order tracking: Shows last order details until is delivered / picked up last order details until is delivered / picked up

  • TokStories / Collections: Shows new product collections, that changes every hour. Users can access through their home screen the inspirational tab or the product detail page on the app.

45.png

Order tracking Widget enables users to get informed about their products delivery or pickup status

46.png

TokStories Widget enables the user to check it out the newest product collections and inspirations

AppClips

Our team decided to create different user flows and prototypes for AppClips to two features: Augmented Reality and Stores. The goal was to give the opportunity to the users to try the brand products at their homes and to visit the stores nearby. 

ezgif.com-gif-maker (1).gif

Augmented Reality from a QR Code AppClip prototype

AppClips-Tok&Stok-AR-Flow.png

Augmented Reality AppClips userflows

AppClips-Tok&Stok-Store-Flow.png

Stores AppClips userflows

Get the app

Mask Group.png
images.png
1280px-Download_on_the_App_Store_Badge.s