UX Design for a vibrant Kellogg's platform. Ideated, analysed, optimed and documented multiple features, bringing ethical design and impactful results.
Enterprise aimed to strengthen its vehicle eCommerce presence by overhauling the Car Sales platform. The discovery phase set the foundation through:
“Simplification is key: Now that the foundations are laid down, we need to keep in mind the essentials”
I was to be the UX Designer assigned to of the Home and Vehicle Details Page (VDP), which are among the most critical pages of the journey
Working with a UX Writer, we crafted a homepage narrative tailored to both personas. This structure informed the entire homepage design process.
"The homepage should tell a story, and that story should answer the questions and interests each of the user personas might have at different steps of the buying process"
Apart from the personas, we identified two distinct user profiles that shaped our design decisions:
This distinction ensured the homepage dynamically adapted to meet the needs of both groups. To inform what could be customized or not, we connected with the tech team to understand exactly what data could be fetched and used effectively.
Our design was guided by a thorough benchmarking process, where we analyzed competitors and selected the most impactful ideas to incorporate into the homepage. These included:
We refined these features to fit our user personas and Enterprise's goals, creating a cohesive and user-centric experience.
While working on the Vehicle Details Page (VDP) and Home pages, I delivered annotated high-fidelity wireframes for several complex smart features.
Acting as a bridge between UX, UI, Writing, and Tech, I ensured technical and visual feasibility while maintaining business alignment. The result was clear, validated, and actionable documentation.
This widget’s behavior relied on rules I had no prior knowledge of (e.g., American VIN Numbers and License Plates). To address this, I researched and used AI tools to quickly familiarize myself with these rules, ensuring I could accurately document the feature
To further assist developers, I generated Regex code based on the rules I learned. This proactive step improved clarity and implementation, ensuring my behavior annotations were easily understood.
"Gabriel went the extra mile and even dived into code for us, which was extremely helpful!"
Exploring multiple solutions is integral to my creative process. I delivered alternative design options, each with weighted pros and cons, encouraging productive discussions to identify the best approach.
My annotations included suggestions for the UI and Writing teams, creating a “living document” that facilitated cross-functional collaboration. This real-time brainstorming fostered alignment across teams, ensuring the final design was both cohesive and effective.
After validation, my wireframes were handed off to the UI team and evolved into polished screens ready for development.
Unfortunately, I had to leave the team to move on to my next project, as my UX work was complete, and the subsequent phases were more UI-focused.
However, the project manager took an effort to ensure I stayed on for as long as possible, recognizing the complexity of the UX work that I had started and the need for a seamless handoff to UI.
“Gabriel, I'm so glad you were able to stay on for additional time and really own and contribute to the homepage - I hope our paths cross again"
The subsequent team did an excellent job building on the groundwork established during the UX phase. I’m proud to have played a key role in shaping some of the most critical pages of this impactful eCommerce project.