The Opportunity
Blick is one of the leading art and craft stores in the city. The aim of this project was to create a pop-up e-commerce shop for Blick for the 'Back to School' season.
The Solution
I designed a responsive website for Blick to optimize it across all devices.
My intent with this project was to bring the Blick store experience to the site. I wanted to design a clean responsive website with a smooth checkout process that would allow the user to buy an item with ease and keep a short purchase cycle. Also, the responsive design would make the site optimized across all devices.
*Disclaimer - Blick is not associated with this project in any capacity.
Blick Hi-Fidelity Mockup
The Design Process
Research
1. Field Research
2. Heuristic Analysis
3. Competitive Analysis
Strategy
1. Information Architecture
Design
1. Wireframes
2. Usability Tests
3. Hi-Fidelity Mockups
Deliver
1. Clickable Prototype
2. Client Presentation
Research
Field Research
To get an overview of Blick's business, I visited the physical store to do field research and observe closely — the layout, products, employees, shoppers and the various relationships between them.
I conducted brief interviews with a few people in the store to understand their motivation and pain points.
Key Takeaways
Most of Blick's customers are artists or art students who are loyal to the brand. They prefer shopping at the store because they are assured of higher quality, even if that means paying a slightly higher price.
Competitive Analysis
Before beginning the design process and to further reinforce my initial research, I looked at a few of Blick’s competitors to understand their business models and to see what they were doing differently. I looked at the heuristics of these websites and compared them to Blick’s website.
Strategy
Information Architecture
Once I had a fair idea about the direction I wanted to take with the design, the next challenge was to arrange all the information in a way that made sense to the users. To understand the mental model of the users I used the 'Card Sorting' method.
Open Card Sort - Discover
I gave 5 users 100 cards with Blick products on them and asked them to group the products into categories that made sense to them. Patterns began to emerge. It also gave me an initial idea about how to group my products.
Closed Card Sort - Validate
After the open card sort I asked users to group the same cards into categories (that I came up with based on the first card sort) or put them under any other category that they saw fit. This was to validate the categories.
KEY TAKEAWAYS
1. Most users validated my initial decision for the categories. However, 2 out of 4 users placed a couple of items under 'miscellaneous'. I conducted 2 more tests with just those cards to arrive at my final categories
2. My takeaway from this exercise was that professional artists who shop at Blick know what they want and can easily find it under the new categories created in the pop-up site
3. Based on the Information Architecture, I created the sitemap for Blick's new pop-up e-commerce store
Blick Sitemap
Design
For this project, I started mobile first as it is easy to scale things up rather than the other way around.
Sample medium-fidelity wireframes of key screens of the mobile devices.
Usability Testing & Iterations
I conducted usability tests with 4 users. 100% of the users could complete the scenario successfully.
5 suggested changes were incorporated in subsequent iterations.
Prototype
Scenario
Our primary persona is looking to buy an easel for his studio from the Blick website. This prototype shows his journey from searching for the easel on the site to the completion of the purchase cycle.
Next Steps
For the next steps I would do a couple more rounds of user testing and continue to work on refining the UI elements of the website.
“Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.”