A Webshop Make Over (or sleeping with one eye open for Ironhack)
Introduction:
Welcome to project 2 of my Ironhack journey! Well, this project was fun, but also very chaotic and challenging. When in a group of 4 highly creative and quirky teammates a figma canvas can quickly turn into a creative mess (but it looked beautiful though!). We were signed up to create a webshop for an existing business. We decided to work with Colorama print, which is a publishing house located in Berlin, but also operating internationally.
Ok, let’s go!
Set and running for project 2! We started with deciding on which client to work with. Well that went smoothly and we all quickly agreed on working with a Berlin based publishing house. Colorama is a small risoprinting studio and a publishing house based in Berlin, run by Johanna Maierski since 2015. Colorama is operating with two websites, a main page, that recently had a massive make-over and an externally connected webshop. The main page connects all the several business strings of our client, printing, workshops, clubhouse, which is an annual event conducted by our client, as well as — yeah, working with a publishing house — books! (surprise)
The business relates to the self-publishing tradition from the early 1980s and is dedicated to giving voice to those who aren’t very well represented in the publishing market. The webshop also serves as an archive of all our clients publications and other items, such as a variety of merch and stationeries, a feature our client wants to keep in the upgraded version of the webshop.
The Stakeholder Interview:
But one step at a time! (we’re gonna stumble later) After scheduling an interview with our client we (quickly — there wasn’t much time, no no) conducted some secondary research to get a better picture of the market and business environment of our client. At the same time we were juggling interview appointments with our users and preparing questions for the stakeholder as well as the user interviews.
Our client was very eager to answer our questions thoroughly and gave us a ton of insights on her business during that one hour interview. She explained her struggles with the many business strings joined under her brand and how that also effects her online presence. The main strings are the publishing house itself, including the production and sale of the books, contract printing for individual clients, workshops and clubhouse, which is an annual residency program conducted by our client. These are quite well displayed in her main online presence, but the webshop itself is lacking a clear structure and also showing available items along with items out of stock with no clear distinction.
“The biggest problem for now is my online-shop, it’s really rudimentary. It serves as an archive as well, what is really important for me and I want to keep that. But it would be great to have additional features that highlight new books and to make it look more interesting, it’s really lame!” (stakeholder interview)
The User Interviews:
That gave us clear direction for our project and we proceeded conducting user tests with our clients online presence as is. We let the users walk through Coloramas two websites and discovered quite a few painpoints to work on. The main kicker here was that the webshop is not very visible implemented in her main page and the webshop itself is lacking a clear structure.
“I’m confused about what the webshop is actually offering, it’s a bit messy. But I appreciate that the brand is staying true to the community and its goofy vibe.” (Jeannette)
Overall we discovered a lot of confusion about the products offered in the shop. Especially when it came to sold out items being equally displayed among products in stock. Also our users found the site architecture quite confusing and inconvenient to browse. They felt lost and overwhelmed by the variety of products.
“Really cool features! But placing, technical stuff, nothing works.
I like the local artist, the quality of the graphics, but it’s overcrowded with the not working stuff.” (Tommaso)
Main pain-points we collected from our user interviews:
- Lack of structure in the webshop.
- Sold out items featured amongst items in stock.
- Confusion about the products offered by our client.
Day 2 of our project: Empathize…
Since we only got together as a group yesterday (yes, this was only day 1 so far), we were super busy scheduling and conducting all the interviews. Also we needed some time to get on track as a group and delegate tasks. This procedure took us some time and we went way behind. The workload of this day was something like everything, everywhere and all at once and turned out into a huge mess at some point. But one of our teammates held our backs and we managed to kind of complete (or at least touch) every mandatory task of this day. So then, we shifted gears and started gathering all the qualitative data from the interviews.
We synthesized our findings from yesterdays interviews in an Affinity Diagram, created a User Persona and a User Journey displaying Creative Charlottes struggle to purchase a book in our clients webshop.
Expectations of our archetype:
- Finding Coloramas online shop to buy a book.
- Browsing Coloramas webshop without confusion.
- Having a good overview on the available items.
- Getting more information on the artists represented by Colorama.
… and Define!
Which led us to a problem statement as the following:
Book buyers with a passion for art books need to find a way to have a better overview and be better informed about the services and products that are offered by Colorama, because the current website situation leads to frustration and confusion.
To get on track with solving that problem we defined 3 HMWs:
Get Corinne’s stories in your inbox
Join Medium for free to get updates from this writer.
How might we create a structure to make Coloramas online shop more convenient and accessible?
How might we help costumers navigate Coloramas onlineshop without confusion?
How might we help our client operate their three different strands in a clear and accessible manner?
Ready for Ideating!
Now comes the fun part! We started with the Crazy 8s to gather ideas and brainstorm on favorite features, which we then prioritized in “must haves” and “might haves” using the Moscow Method. Mandatory features are:
- “New in” feature.
- Visible and easy to access search button.
- More detailed information on the items sold and implemented links to artist pages.
- Show and Hide Toggle to keep the archive in place, but sort out confusion about availability of the products.
- Streamlined structure and information architecture, upgraded categorization hierarchy and the navigation bar.
From there we got clear on our first iteration to proceed testing and developing our product:
Our MVP is one (1) website with selected existing contents for the 3 available main products and services of Colorama: Printing-Service, Workshop and Bookshop (Publishing house), with a focus on the bookshop.
The available books, workshops or print services are reduced to a minimum of available items, in order to simplify the extent of the sitemap.
Day 3: Let’s start Prototyping!
Today is all about Information architecture. We started with mapping out the Sitemap of the existing webshop of our client. Unless that during our qualitative research with our users we found out that the site is confusing and doesn’t give a good overview, the sitemap itself turns out to be very simple. Also we defined our Happy Path and all we want for our clients costumers is to successfully find and purchase their desired products, in this case books.
With all that information at hand, we started sketching out our first low-fi wireframes. And now Testing? No — this is when we stumbled. Also during this process we had to learn how to deal with an overwhelming workload, how to delegate tasks and stretch a point.
Somewhen in the further course of this project… or the stumbling part:
After catching up on wireframing, we started testing with 5 users. Since our prototype didn’t really work as we wanted it, we had to improvise here. We guided our users through our frames on figma and asked them how they felt about the current pages and what they would click in the first place or what informations they would be interested in. We then introduced them to our happy path and asked them how they’d accomplish this mission. Even though it felt as if we totally messed up at this point, it was very insightful to interview our users in this step of the process. They gave us tons of information on what worked for them and what we should improve. Also it was indeed possible to identify certain painpoints — I wouldn’t have expected that. From there we started integrating these insights and informations in our wireframes. Also this was a good practice for gaining insights on our users behavior and intuitive actions. I didn’t at all expect an outcome as this and definitely learned that any results you reached at a certain point is good material to test with your users.
Testing:
The overall results were that users who were involved in the interviews in the beginning of our project did enjoy the changes we made on our clients online shop so far. They did enjoy to have a way better overview on the offered products and to have deeper informations on the artists represented by our client accessible on the web shop itself. Our client currently uses the online shop as an archive as well and has many books and other stuff displayed on here that is already out of stock. Our clients wish was to keep that in in the web shop some way. We therefore implemented a toggle to be able to show and hide archived products in the webshop. Our users did like that feature a lot. They enjoyed to have the option to browse through our clients entire portfolio and at the same time having the option to display available items only.
Day 6: User Interface
UI here we come! We started today with determining our clients Brand Attributes and a Visual Competitive Analysis, to get working on the look and feel of our clients Webshop. With these guidelines we created a Moodboard, which we then tested in class. We were way off regarding our classmates feedback, but hey! Been there, done that — we went back to work and came up with an amazing moodboard, that nails our clients brand attributes and communicates the look and feel of our product.
From there we picked colors for the branding, decided on the font, created a new logo and gathered all the information in our Style Tile.
And tadaaa! We finally made it and brought that beautiful Prototype home!
Conclusion:
Even though we put a lot of thought and effort in the overall category organization in the shop, we still have to:
- Streamline the structure
- Improve Usability in the Webshop
- Conduct more User Testing and Iteration
Further steps might be to work on our clients visibility by improving our clients google ranking and sorting out the confusion about our clients various business branches.
Learnings:
In this project I learned a lot! Not only from covering the in-class assignments, but from failing at a certain point at the process. My biggest takeaway here is that literally any result you reach at a certain point is valuable material to test with your users. There is so much you can learn at any part of the process, trust your present results and just go with it!
Well that’s all I had to share from this bumpy road a.k.a. Project 2 of the Ironhack Bootcamp. I hope you did enjoy the read! And kudos (big time) to my entire group! I think we did amazing :) Thank you!
