Responsive Store Browse Page (Completed 2013)
- Posted: January 20, 2014
- Category: Portfolio
- Tagged: fyeo
- No Comments
Design Problem
The landing pages for our product formats were not very user-friendly. Since we have sub-formats, we wanted a way for users to be able to filter and sort our format types, while also making it friendly across the widest array of devices.
Solution
We wanted to leverage Solr (the technology behind search on our sites) to power the landing pages for our formats. The previous incarnation of these pages had become a catch-all, so several rounds of wireframes were produced to whittle down the extraneous content. After each round, we tested the designs with users to keep us on the right track. Once the wireframes were approved, we produced a few rounds of HTML-based prototypes and tested each of these. The result was a sleeker, more usable, responsive format page, with filtering and search capabilities.
Roles/Skills Used
On this project, I performed the roles of IXD, visual designer, and front-end coder (HTML, CSS, and JS). We have 8 e-commerce sites that share a common codebase, but each has a unique template. I worked on the front end, handling the HTML, CSS and javascript for the base, and template tweaks where required for each site.
- Store Browse Page Wireframe, Round 1 (Balsamiq, using javascript for interactivity)
- Store Browse Page Wireframe, Round 2 (Balsamiq, using javascript for interactivity)
- Store Browse Page Prototype, Grid (HTML/CSS/JS)
- Store Browse Page Prototype, List (HTML/CSS/JS)