E-Commerce Site
Responsive UI Design
Challenge:
Design a responsive e-commerce site where users can shop for clothing and save their chosen items to cart. Adjust design for mobile, tablet and desktop viewing.
Design Process
Inspiration and Mood-boarding
I began by gathering inspiration from existing clothing sites and exploring the strengths, weaknesses and commonalities between these sites.
I found consistently across these sites whether represented by photographs or graphic images, each site offered a system to categorize their clothes and allow users to navigate to specific items they might be looking for. While, some sites offered more general categories others were more specific. In my experience, sites that had too many categories or overlapping categories represented in different areas on the same page were a bit confusing and overwhelming. I preferred the simpler designs that clearly illustrated the categories and allowed for an overall smoother experience navigating the site.
I compiled a mood board of images reflecting the style of clothes I wanted to represent on this site to better inform my overall design.
Wireframing
I decided to design a site for women’s clothing, featuring, dresses, pants, skirts, shoes, tops and accessories. I created initial wireframe layouts to workout the basic style and flow of this site.
The promotional banner at the top of my site is intended to excite and engage viewers with current sales and promotions. The featured clothing categories then facilitates directing visitors to the products they are looking for, while broader categories are featured in the navigation bar. My goal was to keep the site clean and simple allowing users to seamlessly navigate to their desired product page and easily filter out what they are looking for.
High Fidelity Site Design
With a working layout, I began to finesse my design bringing in color and imagery. I revisited my inspiration images and incorporated them into each feature category.
I put together a mild color palette, since the site features bright and colorful clothing, I wanted a softer more neutral palette to modestly complement the collection.
I incorporated the soft green accent color to highlight my category images as well as my navigation banner.
After finalizing my design, I reformatted each page to ensure the responsive design of the site and accommodate viewing on desktops, tablets and mobile devices .
Prototyping
I tested out prototype drop down filters and size/ quantity selections to accomodate viewing on different sized devices.
