Week 2 Ironhack — e-commerce site re-design

The Emporium of Worldly Goods, Fort William — Scotland

The challenge this week was to:

“help local shops improve their online presence to be more competitive in the market”

We had to adapt a bit to the pandemic and so the ‘local shop’ net was cast a bit wider. Instead of visiting shops in Berlin we could look anywhere we could as long as we could do research on it.

The project was to research, wireframe, prototype and test (and then iterate if needed) the e-commerce site.

The Emporium of Worldly Goods

I was really happy to be able to use the fantastic store: The Emporium of Worldly Goods in the Highlands of Fort William. They sell a great selection of sustainable, fair-trade products.

The first step was setting up an interview with the owner to gather information to better understand the business and its place in the market.

We gathered some important points from the interview to consider in our design:

• The website is used to engage with the community
• The online store is a secondary income stream
• The shop hosts events and workshops

We did a SWOT analysis to give us an overview of the business to refer back to:

Along with the interview findings we did online research into competitors to gain insights into the business model and contextualise it by identifying competitors and research best practices.

We created the Market Positioning map to visualise the business in its online and offline context:

Market Positioning Map

It was interesting because it really made us think of what competition really is for a particular business. It can be vastly different depending on the business type and in our case we widened the scope to include every shop in the Fort William area that can encroach on their business (Pharmacies, Supermarkets and clothing stores)as well as the larger established online stores that are starting to offer ‘ethical’ products and online stores with the same product ranges.

This also gave us ideas and insights into best practices for the site layout and design.

We didn’t have the time to research the users of the business, but got insights from the interview with the owner and from there we created a user persona to aid us in the rest of the project.

Our User Persona

Card Sorting & Site map

We used the card sorting technique to help organise departments and products for the site map. It was a really great aid to us as it lets the users organise the products together and label the departments giving greater insights into how the online store should be laid out.

The only downside is that it requires a lot more effort than a 5 minute survey and therefore less people were interested in doing it. Which is understandable. With more time to research, this would be an invaluable tool.

Example of the results from Card Sorting

With the responses from the Card Sorting, we looked for patterns and created the site map accordingly.

Our rough of the Site Map

As the shop hosts workshops and events to engage the community, we felt that the landing page of the website should reflect that so we chose to have the landing page be a blog page on events with the embedded instagram feed.

Wireframes

We used Figma to create wireframes for our website so we could all work together. We divided the work quite well, if maybe a bit messy at first. 2 of us laid out the structure while one of us created text and the other sourced icons. We wanted to get the most important information down first before fine tuning it.

A few wireframes using Figma

Prototype User Testing

Being on such a tight deadline, we tested the wireframe prototype with classmates and from their feedback, made a few changes to the wireframes. This included: adding ‘breadcrumbs’ for the shopping screen and a ‘return to store’ button from the purchase confirmation window.

Below you can see the final mid-fi prototype:

Mid-fidelity prototype of purchasing in the online store

Conclusion

I’m understanding more the value of the research and contextualisation which is necessary to inform the design decisions and support the creative process.

Working with a different team this week brought different challenges and interesting insights into how I work in a team and my role within it.

On reflection I think we would have benefited from a clearer low-fi wireframe which would have made the mid-fi less messy and easier to complete — but overall I’m really pleased with the project and how we worked together.

I’d like to continue refining this project and create a hi-fi prototype.