Ux case study: Redesigning a Local e-Commerce website

June Calderón Ortega
3 min readOct 27, 2019

--

2nd project as UX/UI student in Ironhack Berlin

For this project, my team and I had to redesign a website for a local business, focusing our efforts on delivering great shopping experiences for the end-users. The goal was to start using the Agile KANBAN methodology, to build documentation for the website (Information architecture, sitemap & user flow), to deliver mid-fi wireframes of the website and to perform usability tests.

First steps

We chose a ceramics shop close to our campus so that we could do some observational research of the shop and a stakeholder interview.

From the interview with the shop owner we gathered a lot of information about the business and her story, this gave us already a direction to focus on and to understand what kind of products she’s offering.

With this in mind, we did a business and competitor analysis to identify where we are right now and where we want the shop to be. Through the competitor analysis we found out that all of the ceramics shop in the neighborhood offer pottery workshops but none of them has the option to book the workshops online.

This gave us already an idea of a feature we could implement on the website, but since “you are not your user”, we had to do some user research to find out if potential customers would be interested in this feature or not. We created a survey and we found out that 19 out of 23 people answered they don’t buy ceramics online but 19 out of 23 are interested in taking a pottery workshop and they wouldn’t mind booking it online.

Next Steps

Now that we knew what could differentiate our ceramic shop in the market we had to start organizing the content of our website prototype.

We first started with a Sitemap. In order to decide the label of each category/subcategory we did some user testing and some card sorting tests, below you can see the final sitemap.

The user flow we wanted to focus on was booking a workshop online, so to understand the decisions of the flow, we created a user persona, and afterwards the user flow.

With a clear task and flow sketching the low-fi wireframes was an easy job.

Lo-fi Wireframes
Mid-fi Wireframes

This is the original website:

This is the our prototype:

Homepage prototype

Learnings form this project

The more you test, the better. In several stages of the process we had to change things after usability testing, and this helped me understand how important it is to be sure that our app or website is easy to navigate and that tasks can be completed with ease, otherwise people will leave and go to a competitor’s site.

Thank you for reading this far!

--

--

June Calderón Ortega

UX/UI Designer. Positive attitude. Vegan for the animals and the 🌍