top of page
cloud_shoping_image.png

June 2022

Cloud Marketplace
Redesign

My Role

Lead UX/UI Designer

Skills Used

IA, UI Design, Visual Design

My team was asked to redesign an existing web application with the primary goal of improving the aesthetics and a secondary goal of making usability improvements where possible.

Summary

The Cloud Marketplace is a web application where PepsiCo associates can procure and manage cloud solutions for their projects. My UX team was asked to redesign the existing solution, which was already under development but not yet live. The request came from the Chief Technology Officer who asked for my team to get involved in order to improve the overall aesthetics and usability of the solution.

Deliverables for the project included a heuristic evaluation and a full set of high-fidelity mockups. I served as the Lead UX/UI Designer and I was assisted by one additional jr. designer from my team. The new aesthetic we designed was much lighter, made better use of negative space. approved and immediately integrated into the solution. We worked with the product owner to prioritize the usability recommendations for incorporation in future releases as part of their agile workflow. Below are before and after screenshots of a few key screens.

Notable Improvements

  • A new look and feel was created based on the PepsiCo Internal Design System that my team was also previously responsible for, which would improve consistency and thereby usability. (heuristic #4)

  • Exposed the top nav to make it more easily accessible

  • Reworked IA to be more logical and scalable

  • Added more support information (e.g. additional homepage section, support link in footer, in-context help) (heuristic #10)

  • Incorporated consistent styles for system messaging (e.g. error, success, confirmations, alterts, status) (heuristic #1, #9)

  • Offloaded a lot of secondary information into side panels to achieve a cleaner more digestible design (heuristic #8)

  • Meaningful use of color (e.g. red used for reject buttons, cancelled status, error flagging, green used for approve buttons, completed status, success messaging, orange used for action required status, etc.) (heuristic #2)

Conclusion

The project was a success. Our designs were implemented and the solution is now live. The requesting CTO and leadership team was pleased with the results. Due to the success of our involvement with the initial redesign our team was asked to stay engaged for all future feature enhancements which we began work on immediately. The initial design contained 7 screens. My team has delivered 51 screens, modals, and screen variations to date.

bottom of page