Maria Meireles
Designer

Shop in Porto

The largest digital storefront of street commerce in Porto, Portugal

Shop in Porto official logo

Shop in Porto official logo

What is Shop In Porto?

Shop in Porto is a website and app that gathers all street commerce in Porto to connect people that live the city with local shops. The town public services created it, Camâra Municipal do Porto.

They launched the website and app, but both had some usability and technological issues. They also wanted to find ideas to bring people to the city streets to do Christmas Shopping: the pandemic made the local commerce lost most of the customers. 

The Challenge

During one month (after work) I worked with a team of Designers, Marketeers and FrontEnd developers that were given the challenge:

Take the people that live the city to Shop In Porto


We work together to find a concept that would connect our re-design work and the marketeer's campaign. The main goals were:

  • Re-design mobile app and website 
  • Create a plan of digital communication for the months between September and December


Searching for the solution

For the first week, our team did research and gather together to think of a solution. There was a lot of post its, blackboard writing, and discussions about how could we find a way to bring people to Shop In Porto. 

We knew that there is a big sense of belonging and community between the people that live and work in Porto so we tried to understand how that can be translated into an app and website, and be used on a marketing campaign. 

But first... research to validate our ideas and understand the next step.

Week 1
Research and Heuristic Evaluation
Screenshots of reviews and gamification usage on the analysed websites

Screenshots of reviews and gamification usage on the analysed websites

Benchmark

Benchmark was made between 3 apps and websites

  • Booking 
  • Zomato
  • Vivino

These 3 companies aggregate different products that can be searched but they go beyond the simple aggregator concept: they use the concept of community to feed the pages and bring people together. 

What do we found that could translate our concept into new features on a Shop in Porto redesign:

  • Possible to create a personalized profile
  • Reviews from community feed content to product pages
  • Gamification to boost the creation of content
  • Use of leaderboards and badges on gamification
  • Reviews can be commented and receive feedback
  • Reviews default order prioritize active and positive users(that gather good feedback from the community)



Blackboard summary of the interviews 

Blackboard summary of the interviews 

Interviews and field research

We needed to validate our concept of community on the streets, where the shops are. Talking with shop owners it was clear that they did not see the value of being present in Shop in Porto, having a page there. Customers did not see the value of Shop in Porto. Some complaints about tech issues were also noted. 
We also tried some features of the app (see Heuristic Analyses bellow) and tried to see the presence of Shop in Porto inside shops. Shop in Porto gave each street shop that has a page on the app: a sticker to place on the door/window and an acrylic display stand with a QR code. Both used by shops but disregarded as just decorative stuff. 

Personas

After the interviews, we gather all feedback and tried to find patterns that led us to 3 different personas. We focused on people living or working in Porto, not tourists or people that rarely come to the city. This decision was made because we wanted loyal customers, people that would keep the app on their phones, people that already belonged to the city community in different degrees. 


André Marques 
  • Work in Porto, 28 years old, Architect
  • Social life in Porto. Likes new and different places

Alice Pereira
  • Lives and works in Porto, 53 years old, Teacher
  • All life in the city. Loves her family and neighbors. Shops and costumes in places close to home

Diana Moreira
  • Lives and works in Porto, 39 years old, Lawyer
  • Demanding professional life. Travels around the city a lot. Loves to be with friends and family

3 personas shown in the user component designed for the App and Desktop.

3 personas shown in the user component designed for the App and Desktop.

Acrylic display stand with a QR to

Acrylic display stand with a QR to "check-in" this shop.

Heuristic Evaluation

To redesign the app it was necessary to understand the usability issues that it had. We made a heuristic evaluation that found a lot of issues concerning the website and app but also with the connection between the digital and physical features. For example:

  • Image to the left: the QR code on the acrylic display stand inside shops allows the user to save the shop as visited "do the check-in". If the user forgets to use the QR code it's impossible to review the shop. If the user uses the QR code the review is only possible to make on desktop- the user uses the mobile app to "check-in" and needs a desktop to log in on the website to review the shop. We tried the responsive version of the website and only on a desktop was possible to review.
  • Mobile image bellow: The augmented reality map on the app makes it impossible to see the shop cards, distance or any other information
  • Desktop image bellow: Issues like an error saying a username is mandatory but no input for username exists.

We made a report on Airtable with the Heuristic Evaluation divided into 2 main topics: general issues found and user flows. Click the links to see the full evaluation. 

Shop In Porto Website Desktop

Shop In Porto Website Mobile

Shop In Porto APP Mobile


Screenshots from the current version of Shop in Porto. Left the augmented reality feature with errors showing cards; Right desktop with an error requesting a non existing input field.

Screenshots from the current version of Shop in Porto.
Left the augmented reality feature with errors showing cards; Right desktop with an error requesting a non existing input field.

Week 2
UX and Marketing Concept

Proximity, Credibility, Utility, Commodity

We defined our value proposition on 4 keywords that translated the logic of community. 4 words that connected our personas and would create a bridge between them, Shop In Porto, and the shop owners. It's what they need in their daily lives, what they value and want when shopping. 

We set the goal to turn Shop in Porto into a community digital service where the people that live and experience the city of Porto could read and share recommendations, through a system of personalized reviews with incentives, following a logic of marketplace of opinions. Everyone belongs to the city, everyone is its ambassador. 

Translation: So Close, So Porto. The background image is from the biggest celebration of the city, Saint John night.

Translation: So Close, So Porto. The background image is from the biggest celebration of the city, Saint John night.

How to turn this concept into features?

We already had a few ideas of what to do. Reviews, gamification, try to create incentives to participate in the community. But this needed translation into features before we could start the design phase. We already gather a lot of knowledge from the previous week's research. 

We worked 3 main concepts: 

Personalization

Personalization allows users to choose preferences, in this case, favorite shop categories; create content freely; edit content; organize content on a menu inside the user's account.

Gamification

Points given every time users create content or the content created receives positive feedback (comments, helpful and like button clicked by other users); levels of users and shops with top 3 users and 3 shops updated every month; rewards to top 3 users and 3 shops.

User-generated content

Homepage turned into an organic feed with followers, liked shops, and recommended shops new content like reviews and photos; Reviews occupying a big part of the shop layout in a logic of conversation- possible to comment and interact with any review (like dislike and helpful buttons)


Our work approach

Our team had 3 designers, so we went with 3 flows for 1 persona: André. 

Why André? In our daily talks with the Marketing team, it was possible to see he would be the first aim of their digital campaign. The most probable to download the app and keep it. 

Preparing the Design phase

As designers we discussed the approach of the design phase, and divided into steps:

  1. Design 3 flows that represent each one: Personalization, Gamification and User-generated content
  2. Create a Design System
  3. Design low-level wireframes
  4. Design prototype
All this process was presented to the Frontend and Marketing team on a daily basis to make sure not only that it was technically possible but also that is was consistent with the marketing campaign and concept. Many iterations and corrections were made based on these daily sessions. 


Mobile or Desktop?

Since the increase of app downloads was the main goal of the marketing team we went we a mobile-first approach when designing Shop In Porto. Another decision was that the website would not be responsive but when on mobile it would suggest the download of the app. 

Design: Personalization

Flow

  1. The user enters on Create Account
  2. The user fills the form and clicks button "Create Account"
  3. The user selects 3 shop categories of preference
  4. Account page is created with info from the form
  5. Account page a few weeks after with created content
    1. Reviews
    2. Favorite Shops
    3. Itineraries Created
    4. Check-Ins
    5. Following (users)


Wireframes

Redesign and integrate new features was our goal. It was possible to achieve and we were careful about that. Also, it was important to note that not only we add a low budget to implement this design but also the wireframes needed to be done by the end of the week. 
Keep in mind that we were all working for this project after work so the Frontend team was desperately needing wireframes to start their part... they only add two weeks to implement it. 

Mobile app low level wireframes created on Balsamiq for the Personalization flow.

Mobile app low level wireframes created on Balsamiq for the Personalization flow.

Desktop low level wireframes created on Balsamiq for the Personalization flow.

Desktop low level wireframes created on Balsamiq for the Personalization flow.

Images of the low level wireframes created on Balsamiq. The left one from the gamification flow, the right one from the user-generated content flow.

Images of the low level wireframes created on Balsamiq. The left one from the gamification flow, the right one from the user-generated content flow.

Design: Gamification & User-generated Content

Both these flows need login to fully take advantage of the features. 

Gamification Flow

  1. User Logged In sees community page with top 3 users and top 3 shop + personalized recommendations
  2. User clicks on a top user and sees user page
  3. User clicks on badge level and sees levels page (first image on right)

User-generated content Flow

  1. User Logs In on form
  2. Receives pop up with a personalized giveaway
  3. User closes the pop-up and sees the homepage with organic feed
  4. User click on shop page and explores the page

Week 3
Shop in Porto prototypes
Screenshots of the styleguide created on Figma and shared between the Design and Frontend teams. 

Screenshots of the styleguide created on Figma and shared between the Design and Frontend teams. 

Styleguide

With the low-level wireframes delivered to the Frontend team, it was necessary to create a styleguide to help both designers building the design system and the frontend developers. 

Consistency was key in this project since we had 3 designers working on 3 different flows. 

Mobile App prototype: Shop in Porto personalization.
Click on the expand button at the top right of the prototype to see on the full screen.

Personalization Prototype

André opens Shop in Porto App and is invited to create an account "Be closer to our community". He fills the account creation form and selects 3 shop categories. Since the categories are grouped by colors it's easier to locate the ones he likes the most. By selecting "Create Account" he opens an account profile that's still empty.

After a few weeks of interaction and content creation he is able to see, inside his profile:

  • Favorite Shops
  • Reviews
  • Itineraries Created
  • Check-Ins
  • Following (users)

Desktop prototype: Shop in Porto personalization.
Click on the expand button at the top right of the prototype to see on the full screen.

Mobile App prototype: Shop in Porto gamification.
Click on the expand button at the top right of the prototype to see on the full screen.

Gamification Prototype

André, with an account created, is now able to see the "Community" Page. This page has the top 3 users, top 3 shops, users, and shop recommendations based on Andre's profile and content. 
If André selects one of the top 3 users, that we called "Top Portuenses*", he can see the complete profile. Selecting the bag "Super Especialista" on the top left corner of the profile will take André to the page that explains the levels. 

As he progresses through the levels he will receive a pop-up notification of the level achieved.

*Portuenses is the name of the people that live in the city of Porto.

Desktop prototype: Shop in Porto gamification.
Click on the expand button at the top right of the prototype to see on the full screen.

Mobile App prototype: Shop in Porto user-generated content.

Click on the expand button at the top right of the prototype to see on the full screen.

User-generated content Prototype

Every time André logs In he will see a pop-up with a giveaway or promotion personalized for him: from a favorite shop, a giveaway from a shop category he likes, etc. 
Closing the pop-up will get him to the "Home" page. A page with an organic feed with user-generated content: content created by users he follows or shops he likes.

We also show on the feed promotions next to him or other personalized lists (like recommended users and shops, etc). 

If André selects a shop. The reviews start a conversation between users and between the shop and users. They are not just a place to evaluate but a place to connect the community.

Desktop Prototype: Shop in Porto user-generated content.

Click on the expand button at the top right of the prototype to see on the full screen.

Week 4
Campaign Material and Christmas

Campaign Material

By the third week, we were 2 designers working. The prototypes were being tested, and some changes were needed, but the marketing campaign material was essential to the project. It needed to be done! It started a challenging part of the project: no time and no previous knowledge of the theme. I don't have a background in graphic or communication design, and my colleague used to be a web designer. We faced the challenge of making muppies, posters, web content design, social media content design. In my case, for the first time in my life. 

My colleague made most of the material but took the time to teach me and give me tips. I end up being responsible for the graphic support and creation of a prototype for the Christmas campaign: and advent page on the app.

Images of the material created for the marketing campaing.

Images of the material created for the marketing campaing.

Christmas Campaign: Advent Calendar

Our Marketing team had this amazing idea of having an Advent Calendar for Christmas. Every day people would go to the app and open a present: a promotion from one of the Shop In Porto's shops. 

But they did not know how to do it so we came up with a different approach: one of the designers would give a graphic start point. I designed the "Advent" page visual. This was the visual design selected by the team:

The selected visual design for the advent calendar feature.

The selected visual design for the advent calendar feature.

Mobile App prototype: Advent calendar.

Click on the expand button at the top right of the prototype to see on the full screen.

Advent Calendar prototype

The flow is simple: every day, if the user goes to the app can open the gift of that day. A pop-up opens with the gift and shop where he can use the promotion. If the user opens a gift the gift/day is opened on the calendar if forgets the gift/day is disabled and can't receive the promotion. 

To see all promotions received, the user can click a button below the calendar that says "see all gifts".
Imagine the user wants to go Christmas shopping, doesn't need to remember the day of a given promotion, just opens all gifts and the promotions are all visible. 

Physical advent calendar.

Physical advent calendar.

Advent Calendar physical promotion

The Marketing team also wanted a way to promote the calendar inside the shops. Bring users to the app, not only new users but tell the people that have the app that a new Christmas special feature is coming soon. 

So I came up with this physical advent calendar with cheesy Christmas gifts like socks, love, stars. And inside we tell people that there is something better coming up. 

Countdown gif created to be shared on the social media pages before the beginning of the Advent Calendar.

Countdown gif created to be shared on the social media pages before the beginning of the Advent Calendar.

Advent Calendar marketing material

Since I was responsible for the Christmas Campaign I designed the marketing material in order to keep visual consistency between this campaign material. 

Final Thoughts
That very serious person on the left is me, trying to look cool before my time to speak comes up.

That very serious person on the left is me, trying to look cool before my time to speak comes up.

4 weeks to make a complete project and present it. To explain how we would take people that live the city of Porto to Shop in Porto. 

We were all working full time and facing a pandemic at the time. The first week we were able to be physically together but by the second week, we were forced to work remotely. There were personal challenges, family issues, professional problems. But every day we spoke to each other.

There's a lot of material and logic that I left behind this case study. I wanted to focus on UX Design's main work. 


In the picture to the left, you can see our presentation to the city council representatives and a panel of specialists of Design and Marketing. This presentation was the closing line, it also took time and hard work to make. 

I presented and defended my team's work with a colleague from Marketing, Ana Fernandes Martins. During our time trying to understand how to glue everything together in a single compelling story, my awesome colleague from UX Design, Leonor Castro Lopes, took care of the presentation design. And our frontend developer Luís Sousa finished the website just in time to make a live demonstration. 

In the finishing line, the team was smaller but focused and determined to shine. The biggest lesson learned was to never lose sight of the goal and always keep going. In the end, our project was very well received and we were proud to see it on screen.