e-commerce website: eratronix.com
Leading the Way: Layouts and Design System for Our Company's First E-commerce Website
Overview
Our Company’s First E-commerce Website
Eratronix.com is our company’s first e-commerce website project: I was solely responsible for designing all the pages of the eratronix.com. My role involved understanding the company’s requirements, offering design concepts, and validating them through iterative design processes. I began by carefully studying the company’s needs, which helped me create wireframes and prototypes to explore different layouts. After validating the designs through internal feedback and usability testing, I focused on enhancing the user experience and interface design of key areas of the platform.
My Role
- Market Research
- Wireframing, Mock ups
- UI design System, Logo Design
- Prototyping, User Testing
team
- Me- UX/UI Designer, Lead Designer
- 2 Front-end Developers
- 3 Back-end Engineers
- 2 Marketing people
Tools
Photoshop, Figma
E-commerce Website Design
I was responsible for designing all pages of the website. This involved understanding the company's requirements, offering design concepts, and validating them through user feedback. Additionally, I enhanced the user experience and interface design of key platform areas.
Problem and Challenge
The main challenge was designing the entire e-commerce website by myself under a tight deadline. There was no previous experience or support for e-commerce website design within the team, so I had to conduct extensive research and learn independently.
Project Goals
Our goal was to create our first e-commerce website, similar to Amazon.com, to attract and retain customers. We aimed to make the site engaging and easy to navigate while reflecting our brand identity. Additionally, we focused on maximizing sales potential by enhancing user engagement and streamlining the shopping experience.
Solutions
To overcome these challenges and achieve our project goal, I researched e-commerce best practices and user experience design principles. I made a project plan and timeline to keep on track. By using online resources and design communities, I quickly learned what I needed. I also stayed in close contact with the developers and marketing team to ensure everything was aligned and to get feedback. This teamwork and dedication helped me deliver a high-quality e-commerce website on time, meeting all our goals.
Design Process
The design process for Eratronix.com began with analyzing the company’s requirements. I created detailed wireframes and prototypes to explore various layout options and functionalities. To ensure the designs were effective, I gathered internal feedback and conducted usability testing. This iterative process helped refine and validate the designs, ensuring they met our goals for user experience and functionality.
Collaboration
I led the design process, working closely with the marketing team and developers. Together, we tested and refined our designs based on feedback from our team. This collaboration ensured the website met our company’s goals and reflected our brand identity.
I tested these plans with our team and internal stake holders, making changes as needed. I stayed in touch with the marketing team and worked closely with the developers to make sure everything was possible and matched our company’s style.
Wireframes
I created several mockups of wireframes, which I suggested to the web developers. These wireframes served as the foundation for the final designs, ensuring that all elements were well-organized and user-friendly.
My Account Pages
I improved the “My Account” section, which has four main menus: My Profile, My Orders, My Address, and Password Changes. For the “My Orders” page, I had many discussions with the developers to ensure it worked smoothly and was easy to use. This page includes important features like order returns and detailed order information, which are crucial for our customers. Each page was designed to be user-friendly, making it simple for customers to find and manage their information.
My Profile page
Password update
My Address page
My Orders page
Order Confirmation page
Returned Orders Page
Check out Pages
I improved the layout for the checkout pages, collaborating closely with the web developers despite facing some initial conflicts due to functional restrictions. To address these challenges, I proposed several versions of the checkout process, putting in significant effort to find the best solution. Through this iterative process, we were able to arrive at a solution that satisfied both parties, enhancing the overall user experience.
Shopping cart page: Order Summary, Item Remove, Save for later button
Check out phase-1: Shipping Address, Shipping Method
Check out phase-2: Billing Information, Payment information
Check out phase-3: Review order, Update Address and payment info. Confirm order
Order Confirmation page: Detailed item information. Order summary
Design System
As part of the design process, I independently created and established a color palette that aligned with our brand identity. Additionally, I selected typography and buttons that enhanced readability and contributed to the website’s overall aesthetic.
Final Design
The final designs were presented with detailed mockups, showcasing the responsiveness across various devices. Included in this section are screenshots of the wireframes with descriptions, illustrating the thought process and iterations that led to the final design.
Responsive Layout
I worked closely with the web master to make sure the website looked great and worked well on all devices, from desktops to mobile phones. We designed layouts that adapted to different screen sizes and continuously tested and refined the responsive design. Our teamwork ensured the website was both attractive and functional on any device.
Mobile Layout
I designed an easy-to-use and visually appealing mobile interface for our e-commerce site. This involved adapting the desktop design to work well on smaller screens while keeping all functions and navigation simple. My work ensured the site was fully responsive, offering a great experience on any device.
Achievements
Successfully launching Eratronix.com on schedule, we achieved a modern, customer-centric platform that significantly improves user experience and engagement. The website’s design not only met but exceeded our initial goals, providing a seamless and intuitive shopping experience. This effort supported business growth by attracting more customers and improving sales performance.