Daniela de Oliveira

Color+Form

UX Project made in EDIT by Daniela de Oliveira and Pedro Adrião

Digitalizing a physical store

Our teachers challenged us to digitalize a fictional store, located in the historical center of Oporto, so my classmate and I developed a responsive website with the mandatory ecommerce features desginated by our teachers (shop, article's page and the check-out process). However, we decided to add a few more characteristics to the product in order to make it more interesting. The extra sections we added were an auction area, a blog, a donation space in the checkout process and a live streaming functionality to show store special events like book launches.

Competition analysis

We started off by analysing our competitors websites, their strength and weaknesses, their design, their tone, their features, etc. It was an interesting exercise to generate ideas for our project.
Some of the competitors analysed were: Vein.es, indexnewspaper and Cura Magazine.

Personas

The next step was to create Proto-personas. This helped us visualizing to whom the product was for. For each Persona, we made a scenery to understand how they would engage with product.

Online Surveys

After several online surveys, we gathered all the information and tried to find patterns in people’s answers. The results contributed to a pretty good update to the Personas.

Menu decisions

The menu was crucial to the design development. We thought about the tone and how we would split the sections. At the beginning we wanted to have the following menu: Home, Store (sub-menu: books, magazines and rare objects), auctions, blog, live streaming. Soon, we realized having this submenu could be a bit less effective because we are hiding information when there was no need to do it. We actually came to this conclusion after a little exercise: changing completely our target to someone totally different - the typical grandmother profile.
It would be easier for her if we just showed those sections as this was an e-commerce page.

Workflow and User Journey Map

The following challenge was the work flow of the web and the User Journey Map. This exercise helped clarify how the web would work.

Scratching on paper

Some sketches were made in order to start to form an idea and we used Pinterest as an inspiration source.

High Fidelity Gray

The wireframes were pixel perfect made in Illustrator.

Giving it a style

It was easier to add colors and images to the skeleton of the web as it was already high fidelity.

Time to make it interactive

Once the two prototypes were done, we did user testing in order to improve the prototype. Feel free to explore the prototype below.