Logo of Soteria with a dollar sign crossed out, slogan 'preserving small businesses' on black background.

E-Commerce System - Soteria

Project Type: Web Development & Design

Role: Web Developer and UI/UX Designer

Collaborators: Mofiyinfoluwa Adebayo (Product Manager), Ngwa Eden (Software Engineer)

Duration: 4 Months

The small-scale business sector lacks the adequate support it needs to thrive. The American University of Nigeria (AUN) student entrepreneurs are inclusive and need guidance and support to become masters of their trade. As a result of this, "Soteria" was born. This is a web-based application that will list all of the vendors in AUN on one platform for all members of the AUN community to see. In terms of businesses, it will give them the visibility they lack and gain more than they previously had. Customers also benefit from having a more comprehensive range of high-quality items and pricing to choose from and having more accessible access to local vendors.

  • Navigating entrepreneurship is challenging; small business owners often face uncertainty and abrupt closures. Prospective entrepreneurs require experience to navigate this dynamic market, shaped by factors like competition and evolving consumer needs. To address rapid business closures and foster growth, this web application tackles issues such as enhancing product visibility, facilitating face-to-face transactions, and mitigating the high risks associated with entrepreneurship. By offering solutions to these challenges, it aims to empower business owners, create opportunities, and contribute to poverty alleviation.

  • To develop a web-based application that will connect vendors in AUN to members of the AUN community, the objectives of this project are listed below:

    1. To increase the sales and profit of vendors through improved visibility.

    2. To provide a variety of quality products and prices for better choices.

    3. To give members of the AUN community easy access to vendors within the community.

    4. To give unsuccessful small business owners a means to generate capital to start up another, more profitable business.

  • In implementing this project, we meticulously outlined functional, non-functional, and hardware requirements to establish a comprehensive foundation. Leveraging a hybrid approach, we seamlessly integrated Agile and Waterfall methodologies to ensure adaptability and structured progress. Our methodology included the careful design of use cases and ER diagrams, allowing us to articulate the system's functionalities and structure. Furthermore, we systematically defined key features, creating a robust framework. The process advanced with the meticulous wireframing of the proposed system, providing a visual blueprint for our objectives. Subsequently, we translated these designs into reality through thoughtful coding and system development.

Soteria thrived on a balanced integration of functional, non-functional, and hardware requirements. The functional requirements dictated core system functionalities, while non-functional elements addressed performance, usability, and security. Concurrently, meticulously defined hardware requirements optimized the system's technical capabilities. This cohesive approach not only guided our development roadmap but also underscored our commitment to thorough and effective project planning.

Requirements

  • The buyers on this website are the people who are currently searching for vendors to purchase a product or service. The buyers should have the ability to perform the following activities on the website:

    1. Filter Product List

    2. Filter Business List

    3. Rate Transactions

    4. Leave Review

    The sellers on this website are the people or individuals with small businesses who put-up profiles to either sell their products or render services. A seller or vendor should be able to perform the following functionalities:

    1. Register

    2. Delete Account

    3. Upload Photos and Videos

    4. Update Prices

  • PERFORMANCE REQUIREMENTS

    1. The system must handle a significant amount of data from users and the database system without slowing down.

    2. The system should have a minimum downtime of approximately 1% daily.

    SAFETY AND SECURITY REQUIREMENTS

    1. The application and website should utilize a safe and secure database to function correctly. This database will possess encrypted files from the server.

    2. Users should only be able to access and control their accounts.

    3. We will use HTTPS (Hypertext Transfer Protocol Secure) to secure the data transferred between the web server and the website.

    4. Users will be required and restricted to sign in using their registered AUN email addresses to limit access and maintain security.

    ERROR HANDLING

    1. The program will handle errors efficiently using some error detection and correction codes. We will include these codes in the back end of the program.

    1. Operating system- We will use a server once this project is fully deployed. However, Windows 10 is used as the operating system to run the demo as it is stable, supports more features, and is more user-friendly.

    2. Database- The database to be used is MySQL, which is very secure.

    3. Development Tool- GitHub and Stack Overflow.

  • Intel Core i7 7th generation is used as a processor. This processor offers a large amount of space and operates very fast. The RAM required is 8GB with an SSD (Solid State Drive) of 512GB.

We prioritized clarity and precision by curating essential visual representations before system development. This included a comprehensive Use Case Diagram for system functionalities, an Entity-Relationship Diagram for structural insights, a Domain Mapping Diagram for holistic understanding, and strategic wireframes for visualizing the system layout. These meticulous steps ensured a well-defined foundation, aligning our vision and objectives with tangible design models, crucial for the subsequent smooth development of the system.

Design Models

Use Case Diagram of the Proposed System

Use case diagram for Soteria showing user roles like user, buyer, vendor, with actions such as visit site, create account, edit profile, search, review vendors, rate vendors, delete account, log out, create coupons, upload products, view statistics. It also depicts administrator roles for maintaining, registering business, approving, uploading announcements, and Vendor actions for registering and approving.

Entity-Relationship Diagram of the proposed System

Diagram of a database schema with entities and relationships, including Users, Buyers, Vendors, Administrator, and their related attributes and connections.

Wireframes of the Proposed System

Wireframe layout of a website with navigation menu including 'Terms of Use,' 'Privacy Policy,' and 'Contact Us.' Sections labeled 'Products' and 'Businesses,' and placeholder areas for images and text.

Home Page Wireframe

User login interface with fields for first name, last name, email, and password, a 'Log In' button, and links to Terms of Use, Privacy Policy, and Contact Us at the top, with a placeholder for an image or logo at the top left.

Login Wireframe

Website footer with links to Terms of Use, Privacy Policy, Contact Us, Login As Buyer, and Login As Vendor, along with two large empty image placeholders.

User Wireframe

Project Demo

After meticulous planning and crafting of design models, we seamlessly transitioned to the development phase. Armed with a clear vision and a well-defined foundation, we embarked on the final stages of creating the system. The careful consideration of these design models proved invaluable, ensuring a harmonious alignment between our initial concepts and the ultimate realization of the system. This meticulous process allowed us to navigate the development phase with precision, resulting in a robust and effective final system that met both user needs and project objectives.

Front-End (User & Vendor View)

Screenshot of Soteria homepage, featuring natural skincare products such as a pump bottle, jars, and reed diffuser, with the tagline 'Connecting you with nearby vendors' and a 'Shop Now' button.

Home Screen

Login page of Soteria with fields for username or email address, and password, and a login button. The website has a brown and beige color scheme, with the text 'My account' and 'Login' visible.

Login Screen

Online shopping cart webpage showing a single item, "Indomie with sausage and egg," with a small image of the food, price of ₦800.00, quantity of 2, and subtotal of ₦1,600.00, along with options to apply a coupon and update the cart.

Shopping Cart

Soteria dashboard page with a brown header containing navigation options and a shopping cart icon, and a main section titled 'Dashboard' showing no current listings.

Registered User Dashboard

Online registration form with fields for username, email, and password, and checkboxes for privacy policy and terms, on a beige background website.

User Registration Screen

Product listings on Soteria site with vendor names, top product images, and category labels.

Search by Shop (Category)

Soteria profile page. The page displays a large banner titled 'Designer Cuisine', showing contact information for a business located in Nigeria.

Vendor Page/Profile

Soteria contact form titled 'Leave Us a Message' with fields for name, email, and message, alongside contact information including a phone number and email on a beige background. Navigation menu at the top.

Contact Us Screen

Screenshot of a vendor registration form, showing input fields for email, phone, and store description, with navigation menu options for Home, Contact Us, Shop, Registration, Login, Privacy Policy, and icons for user profile and shopping cart.

Vendor Registration Screen

Soteria website with vendor profiles, food categories, and top products. Visible vendors include Corndog Hut, Designer Cuisine, Ice Cream Planet, and Mikaza Munchies.

Search by Product (Category)

Back-End (Admin View)

Screenshot of Soteria dashboard showing a report for the last 7 days, with sections for key performance indicators, store insights, visitors map, transaction details, and menu options on the left sidebar.

Vendor Dashboard

Screenshot of Soteria interface showing a list of vendors with usernames, names, emails, roles, posts, user types, and products.

List of Vendors

Screenshot of Soteria registration approval dashboard showing eight user entries with their names, emails, registration dates, number of products, and approval status.

List of Approved Vendors

A digital table showing pending product approval with columns for Vendor Name, Product Name, Edit, and Dismiss. Two products listed: 'Essentials by Mo' with '6ml Perfume Oils' and 'Chops By Ari' with 'Small Chops by Platter.'

List of Pending Vendors

Conclusion

Soteria is currently a scalable product that aims to address and tackle the issues that plague existing systems by reducing the competition small businesses face when using an e-commerce platform to publicize their business. This promises to give online shoppers an added convenience and security feature. This is done by connecting users with legitimate and approved businesses nearby. Soteria helps its users cut costs involved in delivery fees while also avoiding the plague of a delayed response system and image deception.

Next →
← Previous