October — December 2021

Joining the effort

MadeiraMadeira's post-purchase experience was known to be incomplete and hard to use by the design team. Later on, users scaled the usability as poor.

On top of that, the hybrid mobile app's experience was entirely different. I had been working on equalizations, so when I learned another squad was redesigning orders, I enlisted to help.

For this project, I designed a tracking component and later helped a newcomer UX intern onboard the team and refine the UIs. Both tasks were new to me.

In the end, the component was successfully designed, and we concluded before our 3-week deadline. The new experience is now awaiting development.

Orders in the app: order tracking was underemphasized and sometimes mysteriously unavailable.
Orders in the web: canceling, returning, and changing was hard to find.
Designing the component

Heatmaps, user flow analysis, and card sorting conducted by an UX Researcher had revealed that order statuses were confusing and structure was unintuitive. Misalignments and lack of contrast aggravated it.

I analyzed references in competitors and public design systems for the tracking component and kept an eye on our components for visual coherence.

Automating in Figma with slots and variants proved to be challenging, but it got done with advice from the team.

Original component: I noticed room for improving alignments and state contrast.
WIP: I explored adjusting spacing, line breaks and font-weights.
Final component: Dashed lines and outline markers improved completed and future steps contrast.
Guiding work

Another squad's UX Designer went on to design the order page UIs based on usability-tested wireframes. The new solution shows relevant information and functionality upfront, based on the research's user priority findings. Then, the newcomer designer adapted these layouts for our mobile app context with my guidance. We identified refinements that I helped pass on across squads.

Solution: the design our peers originated used collapses to toggle information on and off view.
Adaptation: as the app wouldn’t implement support tickets soon, we had help buttons temporarily linking to FAQs.
Workload: the finished design has over 100 screens

The moment of truth was finding out if the tracking component I had designed would be easy to apply and suitable to all needs. Otherwise, it would need adjustments and possibly delay the project.

Smooth sailing

It turned out that my teammate easily applied the component, and it was flexible enough for the 25+ variations of the order timeline. Likely because we used components and autolayout properly, we managed to finish the project earlier, using the last few days to calmly review and document.

Final work: light mode.
Final work: dark mode.
Outcome

I’m grateful to UX Intern Matheus Keller for his great work and skills. We stood on the shoulders of UX Researcher Rayza Maliszeski, through her studies and insights, and UX Designer Stefany Conduta, through her remarkable groundwork.

•••

I believe the project was noteworthy in improving consistency, visibility, and help. Communication and strategic planning contributed to a faultless workflow. While joining earlier may have benefited the project, it was still a valuable step towards cross-team collaboration.

Internally, the initiative opened a precedent for the mobile app squad to participate in projects sooner, empowering their work.

Giro.tech

Next, see how I led and collaborated to design a B2B internal tool

© 2022  Vinicius Rosa Frahm
Audiverso

Thesis
Accessibility App

MadeiraMadeira

E-commerce
Cart & Checkout

© 2022  Vinicius Rosa Frahm