My Kensington
More than just e-commerce
As the consumer changes check-out lanes to favour the convenient aspects of online shopping small businesses will have to adapt to fit in with the changing environment in order to survive. Do we risk losing the unique atmosphere attached to local markets and small businesses by adding an online element to them, or can the two co-exist? In this case study I want to take you through my journey as I sought out a way to answer that question for my own project.
The Opportunity
I was presented with the challenge to create an e-commerce site for Toronto’s own Kensington Market. Kensington Market is a diverse community downtown Toronto that has many small businesses that all offer up something unique. Kensington is sought out for the eclectic environment and bustling market feel.
In addition to all the aspects we dove into last week (covered in the case study Mind the GAPP) this week we explored more heavily the wire-framing process, and the journey of taking our wireframes from sketches to a digitized mid-fidelity prototype. Before expanding on the wireframes I’d like to go through all the steps that made wireframes possible.
The Research
The Survey
In order to collect quantitative research on my users I created a simple 10 question survey, asking really general questions just to understand a little better what impact Kensington made on the average user and how they would feel about an e-commerce aspect to it. The feedback was remarkably educational, and I was able to create an affinity diagram successfully from that and from my User Interviews.
The Interviews
I conducted 4 user interview and the information gained through these interviews was of a much higher quality, and much more in depth on the various users. Some of my key findings through this research were
- My users were excited, and enthusiastic about Kensington
- They described it as eclectic, free, groovy, and cultured.
- 80% of survey respondents said they would be open to an e-commerce element to Kensington.
- Their biggest frustration was lack of information about Kensington.
One underlying frustration that was interestingly the same throughout all of my user interviews was that all of them were frustrated by the same thing: lack of information.
There is something so powerful about feeling informed about the place you’re in, teachers do this for Kindergarten students by giving them a daily agenda; it gives them a sense of security but also peaks the interest and brings their attention back to their environment.
Knowing this I was then able to build to main user personas, and design a solution for both, despite them being very different individuals.
I would like to say that from here I began right away knowing which direction my research was taking me and that I created a simple solution, but I got lost in the planning and stumbled a little off route.
The Planning
Then this happened:
But the good news is it happened just like that. I was a little lost in the planning and started drifting towards a redesign of the current Kensington website that had an interactive element. It wasn’t until I went back to my initial research that I could again see the direction that my users needed.
The Storyboard
After exploring my storyboard a little I had created a solution, and a good one. But not the solution that resonated with my users needs, and that was to be more informed about Kensington and what events were happening there.
So I began back on the original track again and created a user flow for the idea of event exploration at Kensington Market.
The User Flow
This is where I regained a sense of who my user was, and what there goals were and I was able to create this User flow and begin the wire-framing around it!
The user flow was a process of deciding which actions were necessary for my user to take to achieve the end goal of adding an event to their “favourites”. The wireframes were designed then around this model!
The Design
Basically there was a lot of trees used in this portion of the design.
This process tied in neatly with the planning process as I had learned from my past mistake and if an action didn’t fit my user goals I promptly threw it out (but for process sake, I threw it out into a neatly organized folder).
But eventually I was able to understand the direction my wireframes and I could start digitizing my sketches. The first iteration of wireframes was a very rough copy to get all the sketches off my table and onto my computer!
Wireframes
This was mostly just to understand the feel of what I was going for, and on my second iteration I was able to add more detail and fill in the boxes with actual text.
I took my wireframes into InVision then and created a responsive prototype so that I could walk some of my users through the rough copy of the app and work out some of the kinks in the flow.
The Prototype
This part of the process is always so fun, clicking through the design that you have created is such a fulfilling experience but it quickly turns to testing as as there is no rest for the wicked.
While clicking through the InVision prototype there are many things I would like to fix, but I mostly am just thrilled to have a prototype like this. To see something so physical that you have created is rewarding to say the least.
The Testing
Project 2 was a two week process however I found I had very little time for the testing aspect of my design. Some of the key things I discovered with the little testing done was that some of the text on buttons was too small/unreadable, and that some of the screen functions (such as the carousel scroll menu) are not pleasant for the user to work with and I would take them out in the third iteration of the wireframes!
The Conclusion
Project 2 offered many ups and downs to say the least, but I learned an incredibly valuable lesson: it is about the user. No matter what I did, coming back to what were the goals of my user was the most important thing. Learning to let go of my ideas of what was a good design idea, and go back in another direction was a tough lesson but essential to the learning experience.
