Case Study - Pictoline, Quetzi Lading page
Context
The project started swith the company's scope document, which contained the delivery specifications, (this made planning possible and successful). After that, I received the mastergraphic, which I used as a model to make wireframes that met these requirements. I always do my job within the Design Thinking paradigm, grounded in User-Centered and Humane Design principles, and based on the Triple Diamond framework.
Empathy & Definition
I began with a Benchmarking by searching for analogs that would provide me with a current view on trends and enable me to produce appealing and inventive solutions. This would eventually inspire me to add intriguing concepts that enhanced the project and enhance the user experience.
Ideation
Wireframing, Stage 1
I started by looking into a number of high-level suggestions, such as a carousel and entrance animations, as well as a visually appealing parallax to increase the project's value.
In order to bring fewer recommendations to the stakeholder meeting, I eliminated the options that were unsuitable during this same phase.
I started by looking into a number of high-level suggestions, such as a carousel and entrance animations, as well as a visually appealing parallax to increase the project's value.
In order to bring fewer recommendations to the stakeholder meeting, I eliminated the options that were unsuitable during this same phase.
Wireframing, Stage 2
At this point, I let my creativity run wild and began creating vibrant and eye-catching ideas using a variety of visual components that were supplied with me. The goal was to produce a concept that improves the user experience from several innovative aspects.
At this point, I let my creativity run wild and began creating vibrant and eye-catching ideas using a variety of visual components that were supplied with me. The goal was to produce a concept that improves the user experience from several innovative aspects.
Wireframing, Stage 3
I had established the several routes that may comprise the website, its features, and its transitions at this point. Since the project was entirely conducted remotely, I made a video that helped the stakeholders understand the proposals and expedited the analysis process.
I had established the several routes that may comprise the website, its features, and its transitions at this point. Since the project was entirely conducted remotely, I made a video that helped the stakeholders understand the proposals and expedited the analysis process.
Wireframing, Stage 4
Based on the stakeholders' feedback, I created the final wireframes, which served as the foundation for the Hi-Fi references made in Figma.
Based on the stakeholders' feedback, I created the final wireframes, which served as the foundation for the Hi-Fi references made in Figma.
Prototyping
To wrap up, I created the essential documentation for the development handoff. This documentation includes a set of best practices, beginning with the creation of Hi-Fi references following the "mobile-first" approach. Additionally, I provided detailed explanations of each interaction using the acceptance criteria format, ensuring clarity for all parties involved. All of this allowing a fully responsive prototype and animated videos.
Site
Special regards to Luis Fernando Mendoza, Pictoline and Nao Mo.