E-Commerce Bike Web Application
This mockup web application serves as a training module for developers or software engineers.
My Role
UI and UX Designer
My Responsibilities
Visual Design
Wireframing
Prototyping
Design System
What challenges did I face?
Lack of knowledge
As a junior designer, I encountered numerous challenges in developing a responsive web application, refining a design system, creating skeleton or loading screens, and addressing negative or error scenarios without the presence of a senior or veteran designer.
Revamping
The initial designs for the web application lack breathing room and had a high cognitive load. Furthermore, it has a poor color contrast and poor readability.
Overwhelmed
I did not know where to start when creating a design system and I was overwhelmed with the amount of requirements and project deliverables. Also, it was my first time collaborating with developers.
So... what did I do?
Lots of design research
I invested considerable time and effort into researching how to create a polished and structured design system, ensuring responsiveness across both desktop and mobile wireframes. I compiled a checklist of essential components needed for the process.
Redesigned the web application
I revamped the web application, giving it a clean and modern aesthetic while enhancing user experience through typography and color updates that adhere to WCAG guidelines and other industry best practices.
Before
After
What did I learn so far?
Guide your stakeholders for new changes
Don’t forget to guide your stakeholders through any changes or updates you've made to your designs to ensure proper documentation. So, a note to self: do not delete your old or initial design files, as you never know when you might need them.
Always communicate
As an introvert, I learned communication is highly important, most especially when you are a user experience designer because you need to collaborate with developers and stakeholders in order to achieve the look and functionality of your designs.
Seek design advice and guidance
I was the only designer in the project and not to mention, I was a junior designer with basic knowledge and minimal experience on user experience design. I realized that it’s okay to ask for help from fellow designers sometimes. Also, it’s important to understand the perspective of a developer on your designs.
Organize your design files
I might sound like a perfectionist but it is important to organize your design files by naming layers and files, utilizing components and auto-layout, sectioning low-fidelity and high-fidelity wireframes, etc. So, it will be easier to hand over your design project to future designers, developers, and stakeholders.