Tiisetso Ntsoane

AboutProjectsContact

GWS Tool


Web-Scraping tool

UI/UX

Prototyping

E-Commerce


GWS scraping tool main display project showcase image

Company

GWS Tool

My Role

Lead Designer and Developer

Timeline

1 month

Responsibilities

Design Research

Design Direction

Visual Design

Prototyping

Development

Deployment

Overview

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

Project link icon

Designed with simplicity in mind, provides a user-friendly interface for effortless price comparisons among South Africa's top supermarkets.GWS Tool enhances the shopping experience with a sleek design, emphasizing clarity and simplicity for quick and efficient comparisons.

[ Layout Concept ]

Low-fidelity prototype concept for GWS tool.

[ Low-Fidelity Prototype Design ]

Prototype of GWS tool landing page section.

[ Layout Concepts ]

Polished Low-fidelity prototype concept for GWS tool.

[ Products Page ]

High-fidelity prototype showing an overview of items from to stores in South Africa.

The Design Strategy

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.

GWS tool detailed product page

The challenges

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.

GWS tool final design page

Unlocking Potential: Steering Toward Triumph with Our Array of Tools

Design

Adobe Xd logo
Adobe photoshop logo

Development

Html-5 logo
Css-3 logo
Javascript logo
React js logo
Node js  logo
Redis  logo

Final Design

Key Learnings

Insights gleaned from the challenges encountered in design and development.

Web design icon

User-Centric Efficiency

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.

Web design icon

Minimalist Design Philosophy

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.

Web design icon

Visual Engagement Through Images

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.

Web design icon

Streamlined Content Presentation

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.

The next project

Introducing "Transformative Impact, Touching Souls" – Building on Our Last Success.

See it live

home
Final design for Life changing and touching lives website

Version

2024 © Edition

Local Time

10:39 GMT + 1

Socials

LinkedInFacebookWhatsappGitHubInstagram

All Rights Reserved | © Copyright 2024