Web-Scraping tool
UI/UX
Prototyping
E-Commerce
GWS Tool
Lead Designer and Developer
1 month
Design Research
Design Direction
Visual Design
Prototyping
Development
Deployment
GWS Tool is a user-friendly web application designed to streamline your shopping experience by providing a convenient platform to search for discounted items across South Africa's leading supermarkets. Featuring the top four retailers – Pick'n Pay, Checkers, Shoprite, and Woolworths – the tool enables consumers to effortlessly compare prices from various stores with just a single click, making the process quicker and more efficient.
See it live
[ Layout Concept ]
[ Low-Fidelity Prototype Design ]
[ Layout Concepts ]
[ Products Page ]
It's a known fact that most e-commerce sites use a lot of pop-ups and banners to keep users engaged with the site content and win their trust. While this is generally good for marketing purposes, sometimes it can derail users from the initial intent of visiting their site.
I opted to use a simple design approcah for this application, with clear headlines and call to actions to let users know where they can go to find what they are looking for. The listed supermarkets in the center of the top naviagtion let users know which store they can access and active. They can quickly switch the tabs to navigate to a different store to look for their desired items.
My primary technical hurdle was optimizing the application's load time, as responses from the API were often delayed by several seconds, sometimes up to a minute, owing to the volume of data involved. To address this, I delved into understanding caching mechanisms and discovered that implementing Redis proved to be the most effective solution. The outcomes justified the effort invested in tackling this latency issue.
Design
Development
Insights gleaned from the challenges encountered in design and development.
In addressing the challenge of extended load times from the API, a user-centric design strategy was implemented. By adopting a simple design approach, the application prioritizes clarity and ease of use. Clear headlines and prominent calls to action guide users efficiently, ensuring they swiftly locate the desired information without any unnecessary delays.
The app follows a minimalist design, avoiding pop-ups and banners to provide a clean interface. This simplicity enhances the user experience, aligning with the goal of facilitating straightforward price comparisons for discounted items from top South African supermarkets.
The design strategically uses images for visual engagement without resorting to excessive pop-ups. Supermarkets are prominently featured at the center of the top navigation, enhancing user guidance and providing a visually appealing experience that complements the overall design.
To maintain user focus on shopping, the content presentation is streamlined with clear headlines and well-defined calls to action. The centralized display of supermarkets in the top navigation serves as an organized hub, facilitating easy store identification and switching. This approach enhances application efficiency, promoting a user-friendly interface for swift and effective price comparisons.