E-Commerce Log In Form
This project is a submission to a project brief on Uxcel. The goal of this project was to design a minimalistic, accessible, and user-friendly login/signup experience for a modern e-commerce platform that meets the WCAG accessibility standards (contrast ratios of 4.5:1 & 7:1).
01
OBJECTIVE
The goal of this project
was to create an accessible and intuitive login/signup experience for Sease, a SaaS e-commerce platform. The design prioritizes minimalism, accessibility, and usability, ensuring inclusivity for all users while maintaining a professional and modern aesthetic.
02
SOLUTION
Minimalist Visual Theme
A black-and-white palette was selected to enhance contrast and readability, aligning with accessibility standards. The choice also reflects inspiration from widely used login pages, balancing simplicity with functionality. Whenever I used other colors, I made sure that the contrast is correct, which leads me to...
WCAG Accessibility Compliance
All elements meet contrast ratios of 4.5:1 and 7:1, ensuring readability for users with various visual impairments.
Tested using accessibility simulators for:
Eye strain and light sensitivity,
Slight to severe visual impairments,
Red-green color blindness and total color blindness
(represents total color blindness; slight visual acuity; eye strain and light sensitivity in the respective order)
Usability Enhancements
Social sign-in options (Google, Apple, Facebook) were included to reduce interaction costs and simplify the sign-up process.
A seamless user flow from login to sign-up was achieved by adding an intuitive “Don’t have an account? Sign Up” text button.
While error and success states for the input fields were considered, they were not included in the final mockup for this submission.
Typography and Layout
The Satoshi font was chosen for its simplicity and readability, enhancing the clean and professional design.
Standardized spacing ensured a balanced and user-friendly layout across mobile devices.
03
RESULTS
Final Design
Created in Figma, the project includes interactive prototypes that allow users to test the flow. Access the interactive design by clicking the “View Full Project” button at the top of the page.
E-Commerce Log In Form
The goal of this project was to design a minimalistic, accessible, and user-friendly login/signup experience for a modern e-commerce platform that meets the WCAG accessibility standards (contrast ratios of 4.5:1 & 7:1).
01
OBJECTIVE
The goal of this project
was to create an accessible and intuitive login/signup experience for Sease, a SaaS e-commerce platform. The design prioritizes minimalism, accessibility, and usability, ensuring inclusivity for all users while maintaining a professional and modern aesthetic.
02
SOLUTION
Minimalist Visual Theme
A black-and-white palette was selected to enhance contrast and readability, aligning with accessibility standards. The choice also reflects inspiration from widely used login pages, balancing simplicity with functionality. Whenever I used other colors, I made sure that the contrast is correct, which leads me to...
Usability Enhancements
Social sign-in options (Google, Apple, Facebook) were included to reduce interaction costs and simplify the sign-up process.
A seamless user flow from login to sign-up was achieved by adding an intuitive “Don’t have an account? Sign Up” text button.
While error and success states for the input fields were considered, they were not included in the final mockup for this submission.
WCAG Accessibility Compliance
All elements meet contrast ratios of 4.5:1 and 7:1, ensuring readability for users with various visual impairments.
Tested using accessibility simulators for:
Eye strain and light sensitivity,
Slight to severe visual impairments,
Red-green color blindness and total color blindness
(represents total color blindness; slight visual acuity; eye strain and light sensitivity in the respective order)
Typography and Layout
The Satoshi font was chosen for its simplicity and readability, enhancing the clean and professional design.
Standardized spacing ensured a balanced and user-friendly layout across mobile devices.
06
RESULTS
Final Design
Created in Figma, the project includes interactive prototypes that allow users to test the flow. Access the interactive design by clicking the “View Full Project” button at the top of the page.
E-Commerce
Log In Form
The goal of this project was to design a minimalistic, accessible, and user-friendly login/signup experience for a modern e-commerce platform that meets the WCAG accessibility standards (contrast ratios of 4.5:1 & 7:1).
Role
UI/UX Designer
Responsibilities
UI Design,
UX Design
Tools
Figma, FigJam
View full project
01
OBJECTIVE
The goal of this project
was to create an accessible and intuitive login/signup experience for Sease, a SaaS e-commerce platform. The design prioritizes minimalism, accessibility, and usability, ensuring inclusivity for all users while maintaining a professional and modern aesthetic.
02
SOLUTION
Minimalist Visual Theme
A black-and-white palette was selected to enhance contrast and readability, aligning with accessibility standards. The choice also reflects inspiration from widely used login pages, balancing simplicity with functionality. Whenever I used other colors, I made sure that the contrast is correct, which leads me to...
WCAG Accessibility Compliance
All elements meet contrast ratios of 4.5:1 and 7:1, ensuring readability for users with various visual impairments.
Tested using accessibility simulators for:
Eye strain and light sensitivity,
Slight to severe visual impairments,
Red-green color blindness and total color blindness
(represents total color blindness; slight visual acuity; eye strain and light sensitivity in the respective order)
Usability Enhancements
Social sign-in options (Google, Apple, Facebook) were included to reduce interaction costs and simplify the sign-up process.
A seamless user flow from login to sign-up was achieved by adding an intuitive “Don’t have an account? Sign Up” text button.
While error and success states for the input fields were considered, they were not included in the final mockup for this submission.
Typography and Layout
The Satoshi font was chosen for its simplicity and readability, enhancing the clean and professional design.
Standardized spacing ensured a balanced and user-friendly layout across mobile devices.
06
RESULTS
Final Design
Created in Figma, the project includes interactive prototypes that allow users to test the flow. Access the interactive design by clicking the “View Full Project” button at the top of the page.
E-Commerce
Log In Form
The goal of this project was to design a minimalistic, accessible, and user-friendly login/signup experience for a modern e-commerce platform that meets the WCAG accessibility standards (contrast ratios of 4.5:1 & 7:1).
Role
UI/UX Designer
Responsibilities
UI Design,
UX Design
Tools
Figma, FigJam
View full project
01
OBJECTIVE
The goal of this project
was to create an accessible and intuitive login/signup experience for Sease, a SaaS e-commerce platform. The design prioritizes minimalism, accessibility, and usability, ensuring inclusivity for all users while maintaining a professional and modern aesthetic.
02
SOLUTION
Minimalist Visual Theme
A black-and-white palette was selected to enhance contrast and readability, aligning with accessibility standards. The choice also reflects inspiration from widely used login pages, balancing simplicity with functionality. Whenever I used other colors, I made sure that the contrast is correct, which leads me to...
WCAG Accessibility Compliance
All elements meet contrast ratios of 4.5:1 and 7:1, ensuring readability for users with various visual impairments.
Tested using accessibility simulators for:
Eye strain and light sensitivity,
Slight to severe visual impairments,
Red-green color blindness and total color blindness
(represents total color blindness; slight visual acuity; eye strain and light sensitivity in the respective order)
Usability Enhancements
Social sign-in options (Google, Apple, Facebook) were included to reduce interaction costs and simplify the sign-up process.
A seamless user flow from login to sign-up was achieved by adding an intuitive “Don’t have an account? Sign Up” text button.
While error and success states for the input fields were considered, they were not included in the final mockup for this submission.
Typography and Layout
The Satoshi font was chosen for its simplicity and readability, enhancing the clean and professional design.
Standardized spacing ensured a balanced and user-friendly layout across mobile devices.
06
RESULTS
Final Design
Created in Figma, the project includes interactive prototypes that allow users to test the flow. Access the interactive design by clicking the “View Full Project” button at the top of the page.