capa 2.png

Novo Mundo

Home appliances and more to a smooth day-by-day

The challenge

Novo Mundo (translation to english for New World) is a major midwest brazilian retail brand for mainly home appliances, electronic devices and furniture. The m-commerce gives their user's the opportunity to find and purchase their wanted items in a smooth and easy flow.

The MVP kick-off was after a online Discovery in 2020. The app was developed by the Kobe team in Flutter programming language and is currently available in AppStore and GooglePlay

My tasks as the lead UX / UI Designer were:

  • Creating and validating personas

  • User journey maps

  • Userflows

  • Sketches and Wireframes

  • UI Design & Prototyping

  • Developers Handoff

  • UX Writing

  • Animation and Illustrations

  • Design System Guidelines

  • Client meetings

 

The company already had an app being used but were not satisfied with it. The project comes from the need to redesign the features, create a customizable home and a faster interaction. As part of Novo Mundo digital transformation process, the App is a new possibility for technological and omnichannel experience.

Discovery

In September 2020, a part of the Kobe team to facilitated an online Design Sprint. For a month, 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.

Benchmark

The first step was to present a research of business references and features.

 

The observed positive and negative points were discussed with the team and classified in a 0 to 5 ranking, analyzing content, user flow, interface and innovation.

49.png

Personas

In this stage, I had some interesting interviews about the brand main public with some of the company workers from marketing and business intelligence to gather information to start creating personas.

 

We made a collaborative activity in Figma to define who those personas would be and the result is those three different kind of customers / users. 

Persona Rose
Persona Rose

Persona Djalma
Persona Djalma

Persona Gisele
Persona Gisele

Persona Rose
Persona Rose

1/3
Jornada Rose
Jornada Rose

Jornada Djalma
Jornada Djalma

Jornada Gisele
Jornada Gisele

Jornada Rose
Jornada Rose

1/3

User Journey

Alongside the personas validation with the client, I also created one user journey to each one of the personas, identifying their mood during a purchase flow as it was in the old application.

User Flows

Next step was to create the main user flows for the app features and structure based also on the APIs and CMS system, Contentful, we were going to use for development.

UserFlow Home.png

App Map

To facilitate the Design System creation and development structure for setup the project, I made a app map with the possible components we would use in each part of the application.

output.png

Wireframes

After the userflow and app map creation, I finally started to design the wireframes of the purchase flow. First I created a medium fidelity version that was being improved with the styleguides to a high fidelity wireframes and later to a final design prototype.

48.png

Medium fidelity wireframes of the purchase flow

50.png

High fidelity wireframes of the purchase flow

Styleguides

Based on the brandbook and concept created in Discovery, I made a basic styleguide to the final design and Design System kick-off.

Conceitos de UI.png

Minimum Viable Product

After finishing the Discovery, validating all the work with the client, our team started the development of the MVP using the Scrum framework. Working alongside with the product owner, project manager, developers and quality assurance, I needed to ensure every Sprint handoff based on BDD (Behavior Driven Development) of the features including interface on Zeplin, components, assets, userflows and Figma prototypes.

Design System

The Design System was the first thing to be created. Using all the materials that were made in Discovery, I was able to improve and deliver the main components at the beginning of the project.

51.png

Final Design

Using the wireframes that were validated in Discovery and the Design System components, the final design was done Sprint by Sprint.

52.png

Animations

To generate more value to the product, I created some animations in Adobe After Effects, such as onboarding, loader, success, critical error and minor error, that later were exported to Lottie. 

Loading-Sucesso-Erro.gif
Onboarding.gif
Favoritar-AdicionarCarrinho.gif

Get the app

App icon.png
images.png
1280px-Download_on_the_App_Store_Badge.s