Ryno's Portfolio

Heckers Garden Centre

Back To Featured Projects

Overview:To create a user-friendly, safe, and responsive e-commerce website for Heckers Garden Centre that would let users browse gardening supplies, buy them, register for events, and find out about special offers.

Role: UX/UI Developer, UX Researcher

Toolkit:Figma, Visual Studio Code, XAMP and MySQL


Test Project Prototype

1. UX Research

1. Overview

  • Objectives:

Make an online storefront with a user-friendly product catalog.

Put in place features for account administration and user registration.

Create a safe and easy checkout and shopping cart experience.

Make advertising displays and event sign-ups functional.

Make sure it is accessible and responsive on all devices.

To safeguard user information and transactions, incorporate security mechanisms.

2. Project Scope

Core Features:

  1. 1. Product Listings:
  • Display categorized gardening products with images, descriptions, and prices.
  • Include search and filtering functionality.
  1. 2. User Registration and Account Management:
  • Allow customers to sign up, log in, and manage their profiles.
  1. 3. Shopping Cart and Secure Checkout:
  • Enable users to add/remove items from the cart.
  • Implement secure payment gateways.
  1. 4. Event Sign-Ups:
  • Allow users to register for gardening workshops or events.
  1. 5. Administrator Panel:
  • Manage products, events, and promotions.
  • View and manage customer orders.

Additional Features:

  • Homepage with featured products and current promotions.
  • Contact page with a form and business details.
  • FAQ and support section for user assistance.

3. Functional and Non-Functional Requirements:

  1. Functional Requirements:
  • User authentication (registration, login, logout).
  • Product management (CRUD operations for products).
  • Event registration with user notifications.
  • Admin features for managing website content and orders.
  1. Non-Functional Requirements:
  • Security: Data encryption, secure login, and HTTPS.
  • Performance: Load time under 3 seconds for all pages.
  • Secure transactions with payment processing.
  • Scalability: Ability to add more products or users without performance degradation.
  • Accessibility: WCAG-compliant design for all users.

4. Project Timeline with Milestones:

Project Timeline

5. Tools and Technologies:

Project Timeline

2. UI/UX Design

UX Design

Wireframes

I went with a clean flexible layout with a touch of green and white.

Each Wireframe is designed to mimic the design of the actual website.

I used a shopping cart logo as my link to the cart. Also I designed the header to showcase the user's Profile Picture

Home Page Product Page Cart Page Checkout Page Admin Page
View Full Wireframes

UI Design

UI Components

Custom created components which includes, icons, images, tables and layouts.

Low-Fidelity wireframes are also included with the components to create an environment called UI Library.

Pieces of Prototyping was extracted and used to create visually appealing background Images.

Home Page
View Full UI Library

3. Usability Testing

Prototype

This is a prototype I made for Heckers Garden Center. It was in early development the DREAMS floated around in my head like it's from outer space. Until I saw that a DREAM can be turned into a REALITY.

I came up with the idea to create a user-friendly and visually appealing E-commerce site. Heckers Garden Centre needed a website to digitalize their Marketing Method so that customers can comfortably in their own homes browse our latest products and services. You can also even register for an event that might take place.

Outcome

Overall the Testing and Prototyping was a huge success. Everyone loved it. It has some minor issues but easy to fix.

Outcome Diagram

Iterations

I made several iterations of the prototype to make it better. Here are some of the improvements I made:

1. Added a search bar to the header.

2. Added a dropdown menu to the header for easy navigation.

3. Added a "Create an Account" link to the Register.

4. Added a "Log In" link to the login page.

5. Changed the color scheme from black and white to green and white.

6. Added a "Return to Home" button to the checkout page.

7. Added a "Add to Cart" button next to each product.

8. Changed the layout of the product page to make it more visually appealing.

View Full Keyframe Library
🚀

4. Test Project Prototype

5. Key Takeaways

Challenges

The challenges I've met was working on a 11 day deadline is quite overwhelming and challenging to keep my head around especially when it comes to big projects like this E-Commerse CMS.

Lessons Learned

Keep a tight schedule. Don't waist valuable time. Design with accessibility in mind. Iterate and make improvements. Use wireframes and prototypes to test and improve your design. Don't be afraid to ask for help.