ECOSCOOTING
(Webpage)
This project focused on redesigning a package tracking webpage to enhance navigation efficiency and improve customer satisfaction.
About
Role
UI Design
Team
Tessa Cervantes Roth
Client
ECOSCOOTING
Time
3 weeks
Problem
The existing Ecoscooting delivery webpage was outdated and lacked design consistency. Visual elements such as icons were misaligned, and several buttons did not provide proper navigation, leading to a confusing user experience. These issues reduced the site’s usability and weakened the brand’s digital presence.
Solution
A comprehensive redesign of the Ecoscooting delivery webpage was undertaken to improve both functionality and aesthetics. Key improvements included the creation of a modern graphic logo, consistent design elements, and enhanced navigation accessibility, ensuring a seamless and user-friendly experience aligned with the brand’s identity.
Ideation
During the ideation phase, I focused on reimagining the user experience of the Ecoscooting delivery platform by identifying key opportunities for improvement. Central to this process was the prompt: “How might we improve navigating through tracking packages online?” This question guided brainstorming around enhancing real-time visibility, simplifying navigation, and ensuring greater reliability of delivery updates. By framing the challenge this way, we generated user-centered ideas aimed at improving both functionality and customer satisfaction.
Solutions
1
Tracking packages
A streamlined tracking system was implemented to provide users with real-time package updates. The enhanced design improves visibility of delivery status, reduces uncertainty, and increases customer confidence in the service.
2
Communicating with customer service
An integrated communication feature was introduced, enabling customers to quickly reach support through accessible channels (homepage & customer service icon on each page). This solution ensures faster response times, builds trust, and enhances overall customer satisfaction.
3
Navigating the web page
The webpage was redesigned with clear navigation pathways, consistent iconography, and optimized button functionality. These improvements simplify user interaction, reduce friction, and create a more intuitive browsing experience.
Sketching
To lay the foundation for the redesign, initial wireframe sketches and low-fidelity prototypes were developed. These early design explorations focused on structuring content, testing navigation flows, and visualizing key features such as package tracking, customer service access, job postings, and locker hosting information.
Lo-Fi
By starting with lo-fis, I was able to iterate quickly, validate layout decisions, and ensure that the user journey was intuitive before moving into high-fidelity designs.
Iterations
The Ecoscooting webpage underwent multiple phases of iteration, with each stage focused on refining the presentation of information to ensure clarity and ease of use. Content was reorganized to highlight key user needs, such as tracking packages, contacting Ecoscooting and customer service, exploring job postings, and accessing details about hosting a locker at a business. Through continuous cleanup and restructuring, the site evolved into a more intuitive and user-friendly platform that prioritizes accessibility and quick access to important information.
Mockup
Building on insights from the wireframes, detailed mockups were created to establish the visual direction of the webpage. These mockups incorporated branding elements, typography, color palettes, and iconography to ensure consistency while aligning the interface with Ecoscooting’s identity. The mockups served as a bridge between structural design and final implementation of the hi-fi, allowing for feedback on aesthetics and usability.
Final Design
The final prototype established a cohesive and modern look for the Ecoscooting delivery service website. The redesigned experience brought a clean and intuitive design to life, making core user flows such as navigation, contacting customer service, and accessing contact details seamless, intuitive, and easily accessible.
​​
Design System
​
The interface was designed with the MacBook Pro 16" (1728 × 1117 resolution) in mind, utilizing a 6-column, 2-row grid with 80px margins and 20px gutters. This layout provided a clear, balanced structure that supported intuitive navigation across all screens.
​
The color palette expanded on the original cool tones by introducing vibrant accents, adding energy and visual interest to the webpage. Motion was incorporated through parallax effects on key screens and subtle animated icons when scrolling, bringing information to life and enhancing user engagement.
​
For typography, Raleway was selected to achieve a balance between distinctive character and optimal readability, while reinforcing the brand’s visual identity.
Throughout this project, I gained a deeper understanding of the importance of designing with both clarity and emotional impact. I observed how subtle details such as color choices, animations, and typography can foster a stronger sense of connection and interaction. This experience reinforced the idea that thoughtful design not only supports usability but also evokes emotion and builds meaningful user relationships with the product and through trial and error time and dedication can create something amazing for others to appreciate.
Takeaways
​
I encountered unexpected challenges, particularly in refining and simplifying the original concepts. At first, the interface included unnecessary elements that consumed more space than needed and distracted from the core experience.
​
Through iteration, I strengthened my ability to adapt, experiment, and prioritize what truly matters for both users and the client. Most importantly, this project reaffirmed the power of design to create space for reflection, emotional engagement, and personal storytelling.
Next Steps
1
I plan to conduct usability testing with a diverse range of users to gather feedback and validate the accessibility and emotional impact of the experience.
2
My next goal is to reach out to Ecoscooting to showcase the UI design for their webpage.
3
My goal is to ensure that visitors can track their package easily and efficiently.