“Content Is Like Water”
An exploration of Responsive Web Design (RWD) and Information Architecture (IA)
I absolutely love this analogy. Basically what Josh Clark (or Bruce Lee) is talking about here, is that content needs to be responsive or flexible. As smartphone and tablet usage rapidly increases, so does the importance of mobile-friendly websites. Nowadays, most companies won’t even hire you as a designer if you can’t design responsive websites.
Brief
For this project, I was asked to create a back-to-school pop-up e-commerce site for Blick Art Supplies to capitalize on the end of Summer. On top of that I would need to choose 100 items from their store that people would love to have for the school year.
My goals for this project were to focus on growing my knowledge of Responsive Web Design (RWD) and Information Architecture (IA) while creating the best possible user experience.
Research
I started by familiarizing myself with the company — Blick. I learned about their company culture and their commitment to provide the best prices, service, selection, availability, and knowledge — they call this “The Blick Advantage”. Among my takeaways from this research was the fact that their website’s information architecture is very confusing to first time shoppers and lends itself to a poor user experience. I compared this to the experience of two of their competitors — Michael’s and Hobby Lobby. I found that Blick and Hobby Lobby both have a 16 step process from Home to Checkout, where Michael’s has narrowed this down to 11. However, Blick offers some of the best discounts for users that purchase in bulk.
Next, I wanted to bridge the gap between design and business so I did some research on the back-to-school market. According to Deloitte’s 2017 Back to School survey, we are expected to see around $27 billion in back-to-school sales. Additionally, a whopping 98% of the participants in their survey plan on buying school supplies. And while 57% plan on shopping in-store and 21% plan on shopping online, there is still the 22% that is undecided. Deloitte estimates this 22% to be worth nearly $5.4 billion dollars in sales. From a business perspective, that is a number that can’t be ignored. So I wanted to find out how we could utilize design in order to appeal to that 22% of undecided users.
Personas
Although it’s not very common, at the start of this project I was given 3 personas, and I chose to design around one of them while still keeping the other two in mind. My primary persona was a middle school art teacher named John who cares about quality, price, and durability of the products he buys. Since he is an art teacher he has to buy school supplies and art supplies for his students every year. With budget cuts getting worse, he ends up paying out-of-pocket for supplies for the class and it adds up so he looks for deals and bulk discounts wherever he can find them. John is more inclined to use his desktop; however, the other personas prefer to use mobile and tablet.
Design
After several iterations of sketching, wireframing, and testing, I arrived at this responsive layout.
Information Architecture
Before I started sketching, I had to pay close attention to how I laid set up the IA. For those who don’t know what IA is, it is basically the art and science of structuring information in a way that users can easily understand where they are and find where they are trying to go. I did this by conducting several rounds of open and closed card sorting. In this exercise, I asked participants to sort 100 items into logical groupings and to title those categories. After several rounds of the open card sorting, I started to see patterns in how people categorized the items. In order to narrow it down I finished up with some closed card sorting rounds, where they had to put the items into pre-existing categories. I did this to validate whether the categories made sense.
Sketching, Wireframing, and Prototyping
Once I had my categories, I moved on to sketching and wireframing. I went through several iterations of sketches, user testing, wireframing until I eventually finalized it into a high fidelity prototype.
Conclusion
This project taught me the importance of Information Architecture. Without a properly structured website and unclear navigation, users are left to figure out where things are on their own through trial and error — which is bad UX design. Typically users will spend 30 seconds or less on a new website and if you can’t convince them to stay in that time, then you have failed. Information Architecture is extremely important in providing users the ease of use and keeping them on the site.
Additionally, I got some great experience designing for multiple platforms. I was able to understand how to translate screens from mobile to tablet to desktop.
