User Centered Research: Wireframing an E-Commerce Experience

Skills Practiced

The Brief

With this project I demonstrate the value of conducting user-centered research in order to inform website design. The brief required me to identify a store in Ponce City Market and create an e-commerce experience for a persona.

Weekend warrior wear

I found the project interesting because I was not familiar with the brand and through the process of analyzing their digital experience, their competition, and their branding strategy I came to really admire the digital work they do.


Contextual inquiry

I began by visiting a few retail locations, collecting observational data, and researching the brand.

I then reflected on the wants, needs, and pain points of the persona I selected and began creating a sample inventory of products that would be of interest to that persona but are not currently being sold on the brand’s website.

Once I collected my inventory I then began exploring the information architecture strategies I might deploy in my microsite.

Information architecture

Open card sorting

I began this exploration by recruiting several potential users to complete an open card sort activity.

Although I had strong ideas about how I might arrange these products, after the open card sort I began to see that there were other ways to organize the information.

I then recruited more potential users to complete a closed card sort activity and compared the time it took to complete the open card sort to the closed card sort

From this data I created my sitemap.

Comparative analysis

I then conducted competitive analysis of the ecommerce experience of my brand’s competition. From this I was able to identify the areas in which my brand excels and also opportunities for improving my brand’s experience.

A competitive analysis enables us to focus on opportunities

Diagraming a userflow

Because I had completed several checkout procedures with my brand as well as its chief competitors, I was then prepared to draft userflow strategies and also sketch-out wireframes for potential layout solutions.

Mid-point critique

My cohort and I presented mid-point critiques in which we offered one another feedback on design choices and communicated conceptual stumbling blocks we were encountering in review one another’s process.

From reviewing the work of my peers I drew inspiration for my project and presented suggestions for clarifying problems and solutions.


This led me to begin creating wireframes in Sketch based on the paper wireframes I had been generating throughout the week. At this point I also began to create slides for my presentation of the project.

Long screen is loooooooonnnng

User journey mapping

I also created a user journey map to help me visualize the ways in which my persona engages with the ecommerce experience of my competitors.

With my heuristic and competitive analyses, paper sketches, revised userflows, and user–tested sitemap, I was ready to create a low-fidelity, wireframe prototype of my ecommerce experience.

Usability testing

Usability testing with a classmate.

Based on the user testing I was able to confirm some of my hypotheses and also identified ways to improve my design.

I revised my initial design to reflect the data I gathered in testing and conducted two more guerilla-style user tests.

Wireframe clickable prototype

I recorded a click through of my prototype to illustrate my process during my presentation to the cohort and instructors.

Limitations & Affordances of Recruiting Colleagues for Usability Testing


Now, it’s important to recognize the limitations of recruiting team mates or colleagues when doing user testing. As the Norman Nielsen Group point out, it will be very difficult to capture authentic behavior when using internal employees (or my classmates in this instance). This is because folks close to the company will likely come to the test with insider knowledge about the product (and they will probably want it to succeed), the people involved (and so will want to manage their relationship with those folks), and ultimately they will likely feel coerced.


As Jamie Allen points out, there can be advantages for the UX team to conduct this kind of usability testing. Working together in this way a team can come to feel more cohesive, the team can find in this process a new way of understanding how they work together, and working together in this way can help the team members gather an inventory of the strengths and weaknesses of each of the team members.

These findings are clearly outside of the scope of what a usability test, properly deployed, is supposed to achieve. But this is excellent information for building a collaborative creative team.

I then finalized my slides and practiced my presentation.

Personal reflections

I found the user research process itself to be really interesting and I want to continue doing that work.

I felt really challenged by this project at first: I wasn’t initially sure about the scope of the project and because I didn’t have an actual user from whom to draw inspiration (the persona was so artificial that it made it hard for me to empathize with their problems), so I wasn’t sure where to go with my solutions.

The “naturalness” of e-commerce

Through conducting this project I came to the surprised revelation at how natural and seamless an e-commerce experience typically seems to me.

I found myself having to revise my sketches several times because I hadn’t noticed some small detail in a checkout process or in a product page.

By the end of this project I had gained a greater appreciation of all the efforts that go into building an e-commerce experience.

I now have a greater respect for the efforts that are necessary to create that feeling of naturalness.