Ngee Ann Polytechnic - Front End Development Assignment II
https://velocityfed.netlify.app/
https://github.com/CheeGuang/Velocity
For Assignment 2, we decided to explore building an interactive e-commerce web application complete with suitable gamification concepts and API calls. Our e-commerce website client is Velocity, an Official NIKE Retailer.
Average Website Visitor:
- From 18 years old
- Capable of making online purchases
- NIKE enthusiasts who live in Singapore
- Busy work-life and prefers shopping online
Velocity would like to be able to promote online presence and brand recognition through web branding. As a NIKE shoe retailer, they hope to have a website that is associated with being active, full of energy while maintaining a professional front. Velocity also aims to attract and retain more members to boost brand loyalty.
- Functional Website: Achieved through efficient use of APIs, JavaScript interactions, and dynamic content.
- Cross Browser Compatibility: Ensured by using responsive design tools like Bootstrap and testing across devices.
- Well-Written Code: JQuery and consistent coding practices contribute to readability and maintainability.
- Good HTML Semantics: Achieved by using semantic HTML tags and structuring the code for readability.
- Effective Version Control: Utilizing GitHub for project management, with regular commits and proper documentation.
- File Management: Adherence to naming conventions and organized file structure.
- API & JavaScript Interaction: High-quality API usage and meaningful JavaScript interactions enhance site functionality.
- Visual Aesthetics and User Experience: Responsive design, Lottie animations, and a visually appealing layout contribute to an intuitive and engaging user experience.
- Checkpoint Submissions: Regular submissions showcasing meaningful progress towards the project goals.
- Gamified Shopping Experience: Utilizing features like cash-back offers, member-exclusive shoes, a shoe finder quiz, and image search to create a gamified and interactive shopping environment. This comprehensive use of technology not only aligns with the provided rubrics for a functional, aesthetically pleasing, and user-friendly website but also ensures that Velocity meets its goals of being an interactive and engaging platform for users.
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
Responsibility : Raeanne is responsible for the Conceptualisation of Velocity website design. She ensures that the look and feel of the website clearly projects Velocity's branding images as well as translating Velocity's business requirement to functional UI. She oversees and communicate with developers to ensure features are implemented as intended.
Workscope :
-
Responsible for the Design of Velocity's Company Logo.
-
Gamifying User Experience (UX) : Raeannne is responsible for the UX design of the website, focusing on users' shopping experience. She specially designed and incoporated features that enhances user experience, motivating web-visitors to sign up to enjoy members' privilege. Other features includes the Shoe Finder Quiz to provide customised recommendation to meet user's need.
-
UI Design : Raeanne is responsible for defining the look of the website, paying attention to details from the use of whitespaces to visual cues like CTA, ensuring users are guided with intuitive design. Incoporating the use of animations (Lotties) and progress bar to reflect customers' spending to get free shippings are features to enhance user engagment.
-
Wireframing : Raeanne was responsbile for the creation and managment of interactive prototype content in Figma.
-
Management : Raeanne worked closely with team member to address UX feedback as well as UI supporting logic implementations. She analyses the impact of design and usability changes, ensuring cohesiveness in design without compromising on user experience.
Skillset:
- Design Thinking
- Gamifications
- Design and Prototyping Tools : Figma
- Graphic design
- Information Architecture
- Effective communication skills
- Adobe Illustrator
Responsibility : Raeanne is responsible for the implementation of the design created by the UI/UX Designer into a functioning website. (As stated above)
Other responsiblities includes the documentation of her codes and design in readMe.md.
Workscope
-
Development of the UI of all website pages, ensuring that the design are according to the prototype illustrated in Figma
-
Managing of team member's UI feedback which includes modification of codes to ensure design standardization.
-
Identifying data required and translating into information for display on forms etc.
-
Create (Adobe illustrator) and implemented customised Lotties in addition to incoporating preset Lotties to enhance visual cues.
-
Running through positive and negative test scenarios to ensure that the website runs as intended, and optimisation of codes ensuring that the website loads quickly and operates effectively on multiple devices.
Skillset:
- Javascript
- HTML
- CSS
- Adobe Illustrator
Taking into account Velocity's requirements, our proposed design aims to incorporate the following:
- Visual hierarchy: Using whitespace, font (size and color) and a simple layout to present content to users in a clear and concise manner.
The primary colours that are used in the website are:
- Shades of Light Grey
- Black
- Yellow
- Orange
This is to enhance Velocity's brand image as clean and minimal to bring the focus to the shoes. Bright and attention-grabbing colours, yellow and orange, incite positive and empowering traits like energy, active and freshness.
- To encourage membership signups, Members' Privilege includes:
- Exclusive designs for members only
- Earn and redeem points for cash rebates
- More cashbacks on birthday months
- Flash deals
- To entice and motivate customers, a progress bar is used as a visual aid to indicate how much more a customer should purchase to qualify for free shipping.
- Shoe Finder Quiz aims to enhance user engagement by deliverying a more customized shopping experience - recommending the most suitable shoe according to customer's answer.
-
As a first-time visitor to Velocity, I want to find a walking shoe that looks similar to the one I currently have as well as be able to look at the product details:
- Click on Camera icon -> Image Search Page
- Image Search Page -> Click on 'Choose Another File' -> Choose file -> Website redirects to product listing page with shoes that are similar
- Click on any product card -> Selected product detail page
-
As a first-time visitor to Velocity, I want to make an account and view account details:
- Click on profile -> Login Page
- Sign in with Google -> Website redirects back to home page
- Click on profile icon -> My Account page
-
As a member of Velocity, I want to browse the products that Velocity have and purchase a new running shoe for my brother as a birthday gift:
- Click on Men -> Product listing page that contains only men shoes
- Click on Filter -> Click on "Men" and "Running"
- Click on any product card -> Selected product detail page
- Select Size -> Add to Cart -> Website redirects back to product listing page
- Click on bag -> Click on Proceed to Payment
- Choose mode of payment (Card) -> Fill in details -> Click on Proceed -> Shipping page
- Click on 'Next Day Delivery' -> Fill in shipping details -> Click on Review -> Review Page
- Click on terms and condition checkbox -> Click Place Order
-
Image Search (Boosts Customer Experience)
- Using Google Cloud Vision API
- Detect what the type and color of the shoe the user uploaded is (E.g. sneakers, blue)
- Based on the type and color of the shoe, use JavaScript to populate Shoes that matches the corresponding filters
- Documentation for Google Cloud Vision API
- Using Google Cloud Vision API
-
Address Auto-Complete (Boosts Customer Experience)
-
Using Google Maps JavaScript API
- Facilitates easier and accurate checkout process
- Users spend less time typing out their full address
- Users will not make spelling mistakes
-
Documentation for Google Adderess Auto-Complete
-
-
Google Sign-In (Boosts Customer Experience and Personalisation)
- Using Google Sign-In
- Allow users to Sign-In conveniently
- Sign-In can be done in 3-4 clicks without any typing
- Display of Google Profile Picture to boost customer personalisation
- Documentation for Google Sign-In
- Using Google Sign-In
-
Remember Me (Boosts Customer Experience and Personalisation)
- Using Local Storage to store Log-In Credentials
- Customers do not need to keep sign-in in whenever they close the browser
- Customers can enjoy personal benefits such as Cash-Rebates
- Using Local Storage to store Log-In Credentials
-
Member-Exclisive Shoes (Gamify User-Experience)
- Using Local Storage to check if Log-In Credentials exists
- Encourages customers to join Velocity as a Member
- Leads to greater sales for Velocity
- Using Local Storage to check if Log-In Credentials exists
-
Item Finder Quiz (Gamify User-Experience)
- Using Tree Diagram Logic to recommend a shoe to the user
- Helps indecisive customers decide which buy shoes from Velocity
- Leads to greater sales for Velocity
- Using Tree Diagram Logic to recommend a shoe to the user
-
Cash Back (Gamify User-Experience)
- Using RestDB to store customer's current points
- Encourages customers to join Velocity as a Member
- Encourages customers to keep returning to Velocity to buy more shoes and enjoy rewards
- Leads to greater sales for Velocity
- Using RestDB to store customer's current points
-
Listing Products In Website From Database (Boosts Velocity's Expandability)
- Using RestDB
- When Velocity wants to sell new items on their website, they simply have to update the product details on their Database and the website will reflect the latest products available automatically
- Leads to greater sales for Velocity
- Credit to RestDB
- Using RestDB
The homepage includes a navigation bar consisting of links to all pages and a clickable Velocity Logo that defaults to the Landing page. Users can click on the bag icon to view added and remove items. Furthermore, Home Page features 3 shortcuts to the product page (filtered by shoe type), and a Shoe Finder Quiz Advertisement to help users who are overwhelmed and unsure which shoe to get, find a shoe. Lastly, there is a responsive footer for easier navigation.
Products are dynamically populated using JS card design, each include product image, shoe type and price. Clicking on each card brings the user to the product detail page. Additionally, Customer use the filter function to display by shoes by gender, colour, type and even price range.
When a user clicks a shoe they wish to buy, the user is redirected to the Product Details Page uses JS to dynamically display more information and allow them to add the shoe to cart. For Members Special shoes, only members signed in can purchase. Otherwise, a sign-in prompt is displayed.
All products added to cart would be displayed, with total cost computed. Users can still manipulate product quantity before committing. The checkout process is divided into 3 simple forms, namely Payment, Shipping and Review Pages. Each aims to clearly guide users through the checkout process with intuitive information input design.
This feature allows users to upload an image of the shoe they wish to purchase. Utilizing Google Cloud Vision API, it identifies the type and color of the shoe, listing all matching shoes available on the platform. This enhances the customer experience by simplifying the search process, making it interactive and highly user-friendly. Customers can find what they're looking for with greater accuracy and less effort, improving overall satisfaction.
Consisting of five HTML pages, this interactive quiz guides users through a personalized shoe selection process. Starting with a landing page, it progresses through three questions, each on a separate page, gathering user preferences. The use of query parameters ensures a seamless experience by remembering user choices. A tree diagram algorithm helps in displaying the result on the final page, where a Lottie animation celebrates the completion of the quiz. This engaging approach aids customers in discovering the perfect shoe, enhancing the shopping experience through personalization and interactivity.
Designed for customer personalization, the account page displays essential details such as the user's full name, email address, points and rebates earned, and includes a sign-out button. This page allows users to feel more connected with the website, offering them a tailored experience where they can easily track their rewards and account information, thereby enhancing their overall shopping experience through a sense of ownership and personal touch.
This page provides a seamless checkout experience by allowing users to choose their preferred payment method, whether credit or cash on delivery. For members who have previously saved their details, the RestDB API is used to auto-fill credit card information, streamlining the payment process. The use of query parameters to send payment method details to the shipping page further personalizes the experience, making it convenient and user-friendly.
Offering flexibility in shipping options, this page allows customers to choose their preferred shipping method. For orders over $200, customers automatically qualify for free next-day delivery, with the standard shipping option being disabled for such cases. The integration of Google's autocomplete API enables users to accurately and conveniently fill in their address, along with other details like name, unit number, and phone number. The use of query parameters ensures that payment and shipping details are seamlessly passed on to the review page, enhancing the customer experience with convenience and efficiency.
Before finalizing their order, customers are directed to this page where query parameters are decoded to dynamically display their order, shipping, and payment details for review. This transparency allows customers to confirm their choices, ensuring satisfaction with their decisions. Upon placing the order, a Lottie animation signals the successful transaction, and the customer's cart is updated accordingly—both locally and in the database. This final step underscores the website's commitment to a user-friendly, reassuring, and interactive shopping experience.
The Sign In Page offers a streamlined user experience by integrating Google Sign In, enabling customers to access their account with just 3-4 clicks. Upon authentication, JavaScript (JS) logic determines whether the user is returning or new. For existing customers, it pulls customer data from the database, ensuring a personalized experience right from the start. New customers trigger a PUT request to the database to create their profile, seamlessly integrating them into the customer base. After signing in, customers are conveniently redirected back to their previous page, maintaining a smooth and uninterrupted browsing experience. This process enhances the customer experience by providing a fast, secure, and hassle-free sign-in method, directly contributing to customer satisfaction and engagement with the interactive website.
- Purpose: Address Auto-Complete Feature
- Impact: Enhances user experience by simplifying the form filling process, making the website more interactive and functional. Assists in achieving cross-browser compatibility by ensuring consistent address input formats.
- Purpose: Google Sign-In Feature
- Impact: Streamlines the authentication process, reducing sign-in time and improving site usability. Contributes to site goals by making the website more user-friendly and functional across different devices.
- Purpose: Item Finder Feature
- Impact: Empowers users with a visually interactive search tool, enhancing the functional aspect of the site. This innovative feature supports the goal of providing a seamless user experience across platforms.
- Purpose: Used to remember one-time use information, prevent RAM wastage, and reduce application lag.
- Impact: Boosts user experience by making the website more efficient and less laggy, aligning with the goal of a functional and bug-free website.
- Purpose: Simplifies writing JavaScript code.
- Impact: Facilitates easier and cleaner code, contributing to well-written, consistent coding practices and enhancing site interactivity.
- Purpose: Stores user data for personalization.
- Impact: Directly boosts user experience by remembering customer details, aligning with the goal of creating a functional, user-centric website.
- Purpose: Retains data post-browser closure, saves login details, and prevents cart loss.
- Impact: Significantly enhances user experience by making the website more intuitive and user-friendly, meeting site goals of functionality and seamless user experience.
- Purpose: Creates responsive designs.
- Impact: Directly contributes to the visual aesthetics and cross-browser compatibility of the website, ensuring it is functional and appealing across all devices.
- Purpose: Semantic website structure with reusable navbar and footer.
- Impact: Enhances code readability and maintains good HTML semantics, contributing to a well-structured and bug-free website.
- Purpose: Styling and animations for an aesthetically pleasing, responsive site.
- Impact: Improves visual aesthetics and user experience, ensuring the website is appealing and functional across various devices and browsers.
- Purpose: Adds logic, dynamism, and API calls to the site.
- Impact: Boosts customer experience by making the site more interactive and functional, aligning with the goal of creating a dynamic and engaging website.
- Purpose: Version control and collaboration tools.
- Impact: Supports best coding practices by facilitating collaboration and version control, ensuring the code is well-managed and bug-free.
- Purpose: Custom domain, auto-deploy from GitHub, and debugging tools.
- Impact: Enhances user experience by providing a stable, memorable URL and ensuring the website is always up-to-date and functioning correctly.
- Purpose: Engaging animations for successful actions.
- Impact: Brings the website to life, enhancing the user experience and contributing to the site's visual appeal and functionality.
- Tutorials
- Resources
- Logos
- AI Tools
