07 | User experience design
Yomato: Ecommerce application
Project Brief
This project builds on a corporate identity project in the Branding and identity category of this portfolio that asked for the development of a brand that inspires and creates a positive environmental impact. The brand that was created is called Yomato, a yoga mat company that uses tomato peels as an alternative filler for natural rubber to develop biodegradable yoga mats. For this project, it was required to build on the insights gained during the brand development project to create a UX/UI outcome for an e-commerce website or mobile application that focuses on the core functions of a chosen user journey for the brand created.
Deliverables
01 Overall system functionality.
02 Wireframes and structured layout of the site/app.
03 Final digital execution.
04 Vertical narrative (view the vertical narrative here)
Design Strategy
The strategy for this project was to create an e-commerce mobile application for Yamato customers to buy new yoga mats. In keeping with the brand’s sustainable promise, two user journeys were developed. The first user journey focused on a collection point application where customers go to recycle their mats. The second user journey focused on the customization and purchase of a new yoga mat. The design strategy was to create a seamless user flow and experience for Yamato customers using our collection points and mobile e-commerce application. The final solution also needed to be in keeping with the brand values and form a cohesive image in line with the Yomato brand.
Taking our solution digital and beyond
To keep our sustainable promise, we recycle our mats to make new ones or process them into compost that we donate back to farmers. Therefore we have several recycling points located at fitness and wellness centers and selected fitness stores. Our recycling program encourages our customers to recycle their Yomato mats and other yoga mat brands to make your planet more sustainable, one yoga mat at a time.
Crafting the perfect solution
Yomato developed a digital solution to make recycling an old and purchasing a new Yomato yoga mat as seamless as possible for our customers from beginning to end. Therefore, multiple e-commerce avenues and solutions were explored to find the best digital solution to fit our customers.
During our research phase, we created a user persona to better understand our customer’s needs, pain points, and motivations.
The user journey
Because our digital solution consists of a yoga mat recycling point and the purchase of a new yoga mat using a discount code received after recycling a yoga mat, the user journey consists of two parts.
User journey part 1 | Recycling and collection point
The user wants to recycle their yoga mat at the collection and recycle point to redeem their discount. This user journey happens dually on our collection point screen and mobile application.
The user wants to recycle their yoga mat at the collection and recycle point to redeem their discount. This user journey happens dually on our collection point screen and mobile application.
User journey part one.
User journey part 2 | Mobile e-commerce application
The user wants to buy a new Yomato mat and redeem the 15% discount they received when they recycled their mat.
The user wants to buy a new Yomato mat and redeem the 15% discount they received when they recycled their mat.
User journey part two.
Perfecting our pose
Below is a breakdown of the key developmental stages of the wireframing process, specifically looking at the development of the customisation screens that form a part of the e-commerce application. This breakdown gives a good overview of how the development and refinement of each screen were approached both for the collection point and mobile e-commerce application. All wireframing and screen development of both user journeys can be viewed on Figma.
The beginner phase
Once the user journey was finalised, low-fidelity wireframing was done by hand to visualise the initial customisation section of the second user journey and everything that needed to be on the screen.
The intermittent phase
Once initial wireframing was done, the mobile screens were digitised into medium-fidelity wireframes to be used for user testing.
The initial six low-fidelity- wireframes were cut down to 5 screens once user feedback was implemented.
The final phase
The final phase included the application of the brand to the screens as well as additional refinement, tweens, and iteration after more user testing was conducted.
The continuous user testing proved instrumental and rewarding as the initial six screens were cut down to four screens after user feedback was implemented. This ensured fewer screens to navigate and more time saved when the user customises their new yoga mats.
Final screens
Below is a prototype video and wireframe structure layout for both parts of the user journey
User journey part 1 | Recycling and collection point
The user wants to recycle their yoga mat at the collection and recycle point to redeem their discount. This user journey happens dually on our collection point screen and mobile application.
The user wants to recycle their yoga mat at the collection and recycle point to redeem their discount. This user journey happens dually on our collection point screen and mobile application.
User journey part 2 | Mobile e-commerce application
The user wants to buy a new Yomato mat and redeem the 15% discount they received when they recycled their mat.
The user wants to buy a new Yomato mat and redeem the 15% discount they received when they recycled their mat.
Design system
To ensure consistency, the brand was translated to a design system that lays out the colors, typography, spacing, grid system, ions, holding shape, buttons, and image treatment for all digital applications. Click on the images to view the design system.
