April — June 2021

Leading change

I was the sole designer in MadeiraMadeira’s hybrid mobile app’s squad via Esparta. The app had steady growth since its soft release 4 months before, but the cart and checkout experience was substandard. Changes were time-costly, and there was an opportunity to simplify flows.

So I proposed a redesign, believing an easier, more flexible solution would cut costs and benefit users.

I ran into the many requirements and restraints of an established, 10-year old e-commerce. Managing business expectations from executive stakeholders was a valuable takeaway, and the solution is now pending release.

Creating concepts

On top of a previous heuristic analysis by two senior designers, I first audited a few e-commerce mobile apps to develop an understanding of the industry’s patterns.

The heart of the matter was that the purchase experience tried to be both a multi-step and a one-step model. In doing so, users benefited neither from progressive disclosure nor from concise control.

Issue: the total summary expanded by default in the delivery step.
Issue: payment options were unsuggestive, and there wasn’t a final review step.

Having developed an understanding of the problems, including working out technical details with our PM, I started developing multi-step and one-step concepts under UX Designer Daniel Peticor. Referring to Baymard Institute’s e-commerce guidelines and running a critique session helped shape the first version.

Three cart and checkout mobile screens in a one-step model
One-step version: in this model, the checkout page concentrates all detail and control.
Three cart and checkout mobile screens in a one-step model
Multi-step version: in this model, details and controls are progressively shown.
Opportunity: we realized the one-step model favored a buy now/express ordering feature.

The high point was presenting the prototypes to the executive stakeholders. With a better sense of the inner workings and a more logical and flexible structure, we agreed the one-step concept was befitting although not without adjustments.

Following up

I assessed all feedback and sought to refine a second version. The main concern was the price breakdown section, which then became a fixed element.

Finally, I documented and annotated the design. The multiple attributes and payment methods caused many variations, which I mapped with the help of the engineering team.

Refinement: I hit on the flap idea to soften the visual weight of the price breakdown it would also remain opened or closed according to user preference.
Flexibility: the “more options” menu provided room for future secondary functionality, like “save for later” and “change color”.
Specs: total summary.
Final work: light mode.
Final work: dark mode.
Outcome

Looking back, support for research and testing would have contributed to a more impactful solution. Going further, I'd test for information overload, potentially simplifying the experience to users' needs.

I’m grateful to UX Designer Daniel Peticor for his detailed counsel, UX Designer Rafaela Raboni and Claudio Rezende for their insights, PM Carlos Perussi for his seasoned technical knowledge, and Dev Leonardo Felipe for his skillful execution.

•••

This project was a remarkable exercise for comprehension and self-management. Presenting design in a business context was also a lesson — it demanded careful synthesis and listening. My organizational skills played a valuable part in seeing the project to completion.

The initiative also led the development team to refactor the cart & checkout codebase, likely improving performance and workflow.

MadeiraMadeira

Next, check how me and others designed the post-purchase experience

© 2022  Vinicius Rosa Frahm
Giro.tech

B2B
Internal Tool

Audiverso

Thesis
Accessibility App

© 2022  Vinicius Rosa Frahm

April — June 2021

The purchase problem

I was the sole designer in MadeiraMadeira’s hybrid mobile app’s squad via Esparta. The app had steady growth since its soft release 4 months before, but the cart and checkout experience was substandard. Changes were time-costly, and there was an opportunity to simplify flows.

So I proposed a redesign, believing an easier, more flexible solution would cut costs and benefit users.

I ran into the many requirements and restraints of an established, 10-year old e-commerce. Primarily, managing business expectations from executive stakeholders was a valuable takeaway. The solution is now pending release.

One-step and multi-step

On top of a previous heuristic analysis by two senior designers, I first audited a few e-commerce mobile apps to develop an understanding of the industry’s patterns.

The heart of the matter was that the purchase experience tried to be a multi-step and a one-step model. In doing so, users benefited neither from progressive disclosure nor from concise control.

Issue: the total summary expanded by default in the delivery step.
Issue: payment options were unsuggestive, and there wasn’t a final review step.Uncomfortable and unsuggestive payment selection.

Having developed an understanding of the problems, including working out technical details with our PM, I started developing multi-step and one-step concepts under UX Designer Daniel Peticor. In the process, referring to Baymard Institute’s e-commerce guidelines and running a critique session helped shape the first version.

Evolution: product card.
Evolution: warranty selection.
Variations: one-step and multi-step.
One-step and multi-step

On top of a previous heuristic analysis by two senior designers, I first audited a few e-commerce mobile apps to develop an understanding of the industry’s patterns.

The heart of the matter was that the purchase experience tried to be a multi-step and a one-step model. In doing so, users benefited neither from progressive disclosure nor from concise control.

Issue: the total summary expanded by default in the delivery step.
Issue: payment options were unsuggestive, and there wasn’t a final review step.Uncomfortable and unsuggestive payment selection.

Having developed an understanding of the problems, including working out technical details with our PM, I started developing multi-step and one-step concepts under UX Designer Daniel Peticor. In the process, referring to Baymard Institute’s e-commerce guidelines and running a critique session helped shape the first version.

Evolution: product card.
Evolution: warranty selection.
Variations: one-step and multi-step.
Opportunity: we realized the one-step model favored a buy now/express ordering feature.

The high point was presenting the prototypes to the executive stakeholders. With a better sense of the inner workings and a more logical and flexible structure, we agreed the one-step concept was befitting although not without adjustments.

Follow-up

I assessed all feedback and sought to refine a second version to successfully meet expectations.

Finally, I documented and annotated the design. The multiple attributes and payment methods caused many variations, which I mapped with the help of the engineering team.

Refinement: I hit on the flap idea to soften the visual weight of the total summary, and it would also remain open or closed according to user preference.
Flexibility: the “more options” menu allowed for future functionality, for example, “save for later” and “change color”.
Specs: total summary.
Outcome

Yet, I believe the project raised the bar and hopefully provided a solid basis for future user-centered refinement.

I’m grateful to UX Designer Daniel Peticor for his detailed counsel, UX Designer Rafaela Raboni and Claudio Rezende for their insights, PM Carlos Perussi for his seasoned technical knowledge, and Dev Leonardo Felipe for his skillful execution.

•••

This project was a remarkable exercise for comprehension and self-management. Presenting design in a business context was also a lesson — it demands careful synthesis and listening.

The initiative also led the development team to refactor the cart & checkout codebase, likely improving performance and workflow.

Looking back, support for research and testing would have contributed to a more focused, impactful solution. I also realized I could have shared progress more often for a smoother process.