UX Project made in EDIT by Daniela de Oliveira and Pedro Adrião
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.
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.
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.
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.
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.
The following challenge was the work flow of the web and the User Journey Map. This exercise helped clarify how the web would work.
Some sketches were made in order to start to form an idea and we used Pinterest as an inspiration source.
The wireframes were pixel perfect made in Illustrator.
It was easier to add colors and images to the skeleton of the web as it was already high fidelity.
Once the two prototypes were done, we did user testing in order to improve the prototype. Feel free to explore the prototype below.