The Challenge was to build a responsive website with 100 curated items for Blick Back 2 School Pop up Shop
The beginning of the school year is a hectic time for Teachers, Parents and Students. To save time lots of shopping occurs online, but what if the website isn’t organized well and completing your transaction becomes frustrating in an already stressful time? What if there was an eCommerce pop up shop specifically organized for back to school shoppers? I set out to discover making a delightful shopping experience yo complement the Blick art supplies brand.
*Disclaimer: Blick is not associated with this project*
Discovery
The current Blick site can be intimidating for a first time visitor or person unfamiliar with art supplies. The navigation is organized into primary, secondary, and tertiary with links to shopper benefits deeply embedded in menus. To put it plainly you really needed to know where you were going to accomplish your goal. As a business you want to make it very easy for people to buy things.
Exploration
I started by visiting the brick and mortar store, I wanted to get a sense for the shoppers by conducting field research & contextual inquiry. Next challenge to tackle was organizing the navigation categories building the information architecture. Open and closed card sorting was going to reframe the organization of the 100 items. It was important to speak to users of varying experience levels with art supplies. Experts, Mid-Level, and Beginners all interpreted the items differently.
Insights
Most shoppers are pretty happy with variety and quality that the store provides
Competitors with fewer clicks in checkout process are more profitable
The insights lead me to create a new feeling with color strategy, simple navigation and easy to find benefits designed around neutral familiarity with art products.
Design Strategy
My process begins with Low-Fi wireframes. I thought about how each element would be re-interepreted based on device type for responsive design. Page layout for mobile first following the golden rule, proceeding with reworking my ideas for desktop and tablet.
Designing for Mobile website instead of mobile app was a new way of thinking and I quickly understood that designing for multiple devices is a way to re-interpret your ideas and design elements in keeping with the hierarchy created. UI Strategy typography sans-serif for cleaner layout. Blue color theme to provide unique branding for pop up shop.
Card Sorting and Information Architecture
Wireframes
Wireframes began by thinking through the site map and information hierarchy discovered through card sorting research. In creating the layout I built around the User’s needs to easily find categories of interest and provide one click solutions to lead to shopping, deals, free shipping promotions and clear checkout process
Prototype
Follow along as we shop for color pencils and complete a transaction
Feature Considerations
Member benefits were buried in the original Blick webpage. There are so many great offerings that Blick provides to customers, I wanted to make these options easy to find. During field research I spoke with users who specifically shop with Blick for their special discounts, ability to create supply lists and re-order previously bought items. By adding a membership benefits section on the home page the shopping experience is improved.
The Checkout Process
The checkout process is essential to eCommerce success. When reviewing competitors checkout processes, the less clicks the higher the conversion rate and sell through. I designed the check out flow for transactions to be completed in 5 steps. The interface was kept clean to reduce decision paralysis.
Takeaways
Information architecture was very helpful in building a understandable structure for shoppers to view items on a web page through mobile, tablet and desktop. Conducting open and closed card sorting provided insight into the way people shop and think about taxonimy. Reformatting the design elements to fit with in each device interface made me think about usability, functionality and consistency of the user’s experience. Analyzing competitors in the art supply business guided my design choices to implement a simple check out process with fewer clicks and screens. Designing for responsiveness is a need that will only increase as users are accessing website through multiple devices. Providing a cohesive user experience across devices builds trust and confidence with your users.
