e — Commerce/Practicioners Website

Overview

Hello to all the comic readers manga, enthusiast and pop culture fans out there! With this Medium post I will show you the journey that my partners Vera, Melissa, Mara and I took in order to make an e — Commerce website for our client, the 40 years old experience comic bookstore “Grober Unfung.”

The team approached this project with a deep curiosity and enjoyment about geek and pop culture and we were very willing to help this so beloved artistic under world.

Our e — Commerce was made with the objective of expanding our loyal and lovely clientel from the physical store to a digital one to make them also (and not exclusively) enjoy the offers that a digital option can provide.

With the use of clear symbols, simple minimalistic designs and easy to find information we applied what we learned in Informaton Architecture in order to make the information really accessible so that we could improve drastically the enjoyment of sporadic comic consumers and also traditional, classic collectors, making their user experience a lot better.

This artsy world was our starting point, the place where we, Vera, Melissa, Mara and I were going to start with the information gathering.

This beautiful topic really made easy conducting some benchmarking and market research, the topic was interesting for us plus the stake holders had also a really friendly nature.

Users and Audience

For the team the personas had an immense importance, we considered that a deep understanding of the people we were working with was crucial.

We try to implement a more humanized approach, giving them context and personality all based on research done with real people, with real opinions and real problems. We did surveys and interviews to determine and be sure that our solution would work for real humans and not a superficial estimate of what a person wants and needs.

Some examples are:

Martin Engelhardt: The minimalistic detailed oriented comic consumer, enjoys reading in rainy days and has a strong set of values regarding mainstream and offbeat content. Enjoys travelling. Shy.

Linnea Blomquist: Fed up, shy and quietly excentric young girl, has a deep understanding in human behaviour which causes her to distract herself of everyday life reading comics and graphic novels, such an intense reader that needs more absurd and bizarre content to not get bored.

Scope and constraints

In the beginning comic bookstores can be seen as something small and simple with not so many types of audiences and variants, but as the team got more and more deep into the topic we realized that is a wider market that what it looks like.

There are serveral types of users with serveral types of needs, but as tough as it is the team had to choose one of these types.

Something that I would like to remark is that many times designing its not about what you want to do but rather what you can do with the tools provided.

The team was reduced to choose one type of goal, to work for one type of user with one kind of behviour making us being reduced in one path and one sided directions.

The good part is that as the options narrows the creativity rises.

Process

To create such an efficient solution takes time, our team was working on the project for ten days making the following process

In order to be organized we created a Kanban board an applied to ourself time restrictions

The process was the following

Research, qualitative and quantitative data gathering

As it tends to happen we had to start from the basics, so we conducted a desk research which resulted in the following information.

Competitor Analysis

In order to examine the business’s needs and goals and understanding the Business needs we conducted the business analysis to be able to create solutions that will deliver value to stakeholders and improve our product.

After having this information at hand we decided to make an affinity diagram to be able to narrow down the information so we could make an appropriate problem statement focus on a specific group.

Our Problem Statement and Hyphotesis

Audience and Personas

In order to create reliable and realistic representations of our key audience, we gather quantitative and qualitative data, we this we created the User Persona.

Ideation Phase

Now with a more clear understanding of the goals and needs of our users we can go to the ideation phase to see how we can make our app so with it the users can overcome their challenges.

In order to have the best ideas that we could we applied some techniques learned in class like

  • Round Robbin
  • Dot voting

The idea was to get as many ideas as we could and with that amount realise dot voting on them so we knew to which one to proceed.

User Journey and User flow

Next step was to understand how the users feels and is going to feel after using the website, for this we created the user journey and the user flow.

By understanding better the user persona, — Bruna — her needs and frustrations we were able to dive into the sitemap.

SITEMAP

Wireframing

To verify and validate if our app was going in the correct way we decided to do first a low-fi wireframing, test it and then pass it to figma adding some more information and passing it to a mid-fi wireframe.

UI and high-fidelity prototype

In the high-fidelity prototype, we decided to go for a more minimalistic aesthetic, using mostly the brand colours, we had some references and we wanted to mimic the look of the store, our vision was to make the digital experience as similar as the physical experience.

Final thoughts

As my second project working in teams I can deffinitely see some changes respect the first one. First of all I learned a lot about working in teams which my experience way more fun and enjoyable, second the topic was one of my interest. On the more technical side of things I realized a valuable leson which is that despite the time, if there are changes needed to be done, even if they take time, they have to be made. I think a good designer should never be afraid o resist to changes in the design. As improvements go I would like to improve in serveral things such as designating tasks, having more definited time constraints and have a better organizational system in general.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Federico Schlagheck

Federico Schlagheck

Beginner UX / UI Designer. Visual artist and psychology enthusiast.