Bremsen is a Chilean Start-up company, which developed e-commerce for tires sales.

Problem statement:

• Users can't browse for products. They are not experts, and filters are not intuitive.

• UI, especially iconography is confusing and not concise, so users can't understand the interaction on the screens.

• The differentiating business value is not clear for users. They can't identify the delivery options until the end of the flow.

Our goal is to design a digital platform that enables users to search for their tires in an easy and intuitive way, without the need to become tires experts, through a delightful and concise flow. While providing clearly all the delivery options. 

Previous website

Bremsen provides the opportunity to explore an E-commerce problem-solving. It's a particular nature of high value and low-frequency transactions present a unique design challenge.

In my role as a Ux Designer, I designed a new responsive website based on user-centered approaches.

• Conducted research, and found key points to target users and understand the business competitors, working closely with stakeholders, being able to analyze the information.

• Created sitemap, user flows, wireframes and prototypes based on research findings.

• Designed the UI for the digital platform.

• Supervised the digital platform development, working with the engineering team.

The new digital platform now provides the users:

• Easy filters.

• Clear and concise shopping flow, with clear delivery options.

• Use of the correct icons/UI.

Final prototype

Approach

How did we start? These are the steps we followed to articulate the business strategy and create the IA of the platform.

Research findings.

Users testing:

• Unuseful filters.

• User are not expert.

• The preview website had confusing UI, specially icons

• Confusing checkout process

User quote: “I don’t know my tires measures….” While quitting the task.

Target users & Personas

Francisco is a business manager in a tech company. He has a demanding job so he is busy and focuses at work. He lives in a lovely traditional neighborhood with his wife and 3 kids, which he tries to spend all of his free time. Since he has a good economic situation, he prefers e-commerce services that help him to reduce tedious task, despite the value, so he can spend more time with the family.

Carolina is a single independent woman, that works as a psychologist. She drives her beloved Suzuki swift every day to work, which she has in perfect conditions, like everything else in her life. As she is a natural researcher, she read internet review about every product she buys. Even though she is nothing like a car expert, and she is pretty busy with her work and dating life to spend time on tasks that she can delegate.

Design Process

And now, Hands-on work..... these are the steps for the design process and digital platform development.

Defining Information architecture

While designing the sitemap, I focused on organizing hierarchically all the screens, especially for product stacks.

When designing the user flow we worked first the golden path, where we identified 5 main phases for the shopping flow. After this was solved we continued with complementaries flows like "My Account". For the golden path we focused on:

• Developing a concise and intuitive flow

• Adding action buttons to helps users to stay in the shopping flows, without the need of going back

• Conducting users through the flow with one mindset at the time, so they can focus on one task at the time

• Not leaving loose ends to guide users or help them to ask if it's needed

With a clear Idea of IA and feedback, I started sketching to present to stakeholders an align idea between IA and wireframes solutions. 

A critical point of the website was adding a "double main filter" to search for tires. This means to filter by car, model and year, and a second by measures. Based on research finding searching by car becomes the default and most useful filter.

Designing useful filters

Based on the nature of the business, I developed an easy to learn experience, through clear interaction actions buttons, icons, action colors from beginning to the end of the shopping process.

Specifically for the Product gallery, I decided to bring several interactions to the product card, so users can get a better sense of their purchase through a concise flow.

• The possibility to change the amount, because users generally buy at least 2 tires.

• Add a buy button on the card product, that links straight to the shopping cart. Based on user testing users buy the tires they need for their car and filter by brand, so browsing is not as important as in other retails.

• The opportunity to verify stock directly from the product selected

• Design several wireframes to always informed users if the product is not found, or not available, while providing the option to contact the client.

When designing the checkout process I worked on 3 different phases to keep users on one mindset at a time. Simultaneously defining the user flow for unlogged and logged users.

• Shopping cart: where users check the selected product, choose a delivery option and add promo codes. This gives clarity to the final price.

• Checkout form: where users focus on filling out their personal information and if wanted, creating an account.

• Payment methods: where users need to use a complementary payment platform, similar to pay pal.

One of the biggest challenges was designing the delivery option. Users need to have a clear sense of the variety of delivery options and prices offered based on their location, and perceive them as an additional value of the service. For this specific task I conducted several user testing and based on the findings, I develop a box with more visual weight using:

• Numbers and header, to give a sense of steps

• Icons for each option to make it easier to understand

• Adding a button coded with the price of the delivery option

• Display information, forms, and icons in an interactive way.

UI - VISUAL DESIGN

The Client provided the brand logo and color. From that, I defined a style guide, including color palette and a san serif font to convey simplicity, modernity, and formality that the Brand wanted to project.

I created a collaborative chart that specifies every content on the website. This help to specify color, sizes, font, images and styles for headers, paragraphs, and links, define the style guide. This chart facilitates front end coding and UI communication.

Conclusion

Results

We designed and developed a digital platform, built from scratch in AngularJS, that allows the stakeholders to customize the business, to maximize revenues and meet user's needs. 

We provided users a concise and intuitive flow which allows them to have a delightful digital experience.

Most important things I learned

• Asking feedback in early stages, including stakeholders, users and developers help to create a unique and more valuable product.

• Designing for users also means to communicate the differentiating value of the service in the right way.

• Checkout forms are a critical conversion point, and to solve them also needs to meet clients requirements to save critical information.

• When designing and developing a whole e-commerce platform is essential to plan a timeline so every team is informed. Good communication and visibility build trust.

• Always keep learning. Details matter.

• When designing UI is important to design beautiful and trending interfaces, but more important is to communicate the correct message. Having clear the nature of the business and what users are expecting to see is key. Always research.

"I'm proud of how a group of collaborative people can build a new service."