Preo App Redesign


Preo is an app that change your receipts for points. Just taking a photo to any receipt an user receive points that could be changed by rewards in different bars and restaurants in Bogotá city.

  • My Role:

    UX Designer, Information Architect, UI Designer

  • Designed for:


  • Work Team
    • Oscar Florez - Product Manager
    • Camilo botero - UX Researcher
    • Felipe Pedraza - UI Designer

First Status

Everyone is attracted to Rewards Apps at some point in their lives, we talk about them and we love the idea behind them, but when it comes to actually use them, the excitement slowly fades away.

Many factors influence this. The lack of offer is only a start, there are endless loyalty and point based systems, but not many apps offer it in their core value prop. If people don't have/know them, people don't use them. Also, points systems have a long history failing big to its customers and have created a culture of distrust and disbelief... even if they use it, they tend to never enjoy its benefits.

Preo steps in with a main challenge, to drive and boost restaurant visits (Take them out of their home and into a restaurant) in a country where delivery apps are getting stronger for taking the product to the users' hand effortlessly.


Our challenges with preo were:

  1. 1

    Enhance the app experience to our current users.

  2. 2

    Increase the base of new users who understand the value proposition of the app.

  3. 3

    Increase DAU (Daily Active Users) encouraging at least one transaction per session (redemption - submissions).

  4. 4

    Build trust in our rewards program.

Our proposal/

The first impression is key for engaging the user with a digital product, that's why we have tested a set of hypothesis focused on first interactions, from On-boarding walkthrough, first interaction strategy, the reach for the a-ha! moment, home screen iterations and app navigation.

Each one of this solutions went through a process I called "UX Preo Product methodology", which was specifically planned to:

  1. 1

    Understand the actual status (the problem).

  2. 2

    Ignite research process that gave us insights and facts to design the solutions with arguments.

  3. 3

    Tests with stakeholders.

  4. 4

    Sketch ideas from a multidisciplinary team, later discussed to an agreement for a viable solution.

  5. 5

    Create amazing and down-to-earth UI proposals towards solving the problem.

  6. 6

    Involve the product team into the development process.

These steps provided the Team the key to solve problems and execute solutions the right way.

My Role

As the UX Senior designer, I was involved in each step of the process, as a viewer and as an actor, giving inputs, proposing and executing user center solutions for the app.

Design Process

UX Preo Product Workflow per feature
Each new feature in the app had a similar workflow, That's what I called UX Preo Product methodology.

Tools & Methods

According to the type of problem, there was a way to start working on it. Each method helps us to identify main problems and new points of view, which implies in the process a rethinking about the solution. The most used methods were:

  1. Surveys

    We send surveys to our current users asking about their experience with the app

  2. Guerrilla Test

    With Lo-Fi sketches and Hi-Fi mockups. In different instance of the UX process we use guerrilla test to validate if the solution was in the right direction.

  3. User Flows

    The users flows help the team to create the user stories given to the dev team, and also to visualize all the possible ways a user can navigate the app.

  4. Sketches, wireframes & prototypes

    We did some preliminary validation on the Lo-Fi UI sketches and used the feedback to refine the sketches and narrow down the solutions for the Hi-Fi mockups.

App Features

On Boarding Process

The on-boarding process is the result of several new user insights, who download the app and at the first time they open it, they don't understand what preo do.

The solution: Show how preo works, ask the user to allow the geolocation and the notifications messages and show the advantages of the app, in few steps.

Results: Now new users understand how preo works. but we have problems with the allowed geolocation and notifications messages. still working on it.

Home Screen

The home was the section with most changes in the preo story. Each change fulfills the business needs.

The first version includes color and elements that endorse the brand and the meaning of the reward program.

The second one includes a new section we called the Challenge list, the idea with this section was showing challenges to our users, as a way to gamification, without letting the redemptions and submissions (the main actions inside the app). The idea of this section was to increase the number of new users with a different and innovative way to give prizes.

The third one, shows a variation of this challenge list, is an iteration of a feature that works for our users.

Another important element was the navigation bar, which should change according to the main page change. In the design process we create our own icons (pixel perfect) who gives a new personality to the app.

Home V.1 - April 2018
Home V.2 - August 2018
Home V.3 - October 2018

Places & Map

The most visited section in preo after the home screen is Places section. this section contains our partners (places where people can go to redeem rewards), and the rewards they have.

The places section problems were:

  • There is no option to find and filter easily the partners
  • It was so hard to find the rewards
  • The users didn't know how close or far the partners are.
  • The redemption process is confuse for our users.
  • A lot of options to choose makes users didn't do anything. (they don't use the app)

The solutions:

  • Create a search bar to find partners name, type of reward and neighborhood
  • A better partner section with a bigger reward image and clear description and CTA.
  • Include a map as another way to see the partners, based on how near is the venue to the user.
  • New redemption process, with a transactional modal showing all the information about the reward and a slide button who helps the app and the user to avoid fake redemptions.


The challenges section were one of the most challenging sections to create and design.

The goal: Create a new way to incentivize our users to use the app. Increase the number of specific actions, increase the database and the data info about our users.

The solution: we create 3 different challenges

Challege 01 - Mystery Box

This challenge gives a box with prizes inside. The user scans in the app any receipt with a specific item inside the receipt and has the option to open a mystery box.

Challege 02 - Scan X Times

The scan x times is a challenge that gives a prize to the users who complete task X times. (The X number were defined according to the business need.

Challege 03 - Rate your last Redemption

This challenge gives the user the opportunity to win points rating the last experience with any partner.

Brand Color Pallete Redesign

The brand counts with a color palette, but according to the evolution and the major changes in the app, it was necessary to recreate this color palette and make a new one, more trendy, flexible and aligned with the new app.

This New palette works not just for the product also for the marketing team and gives more options to create marketing stuff.

Bellow, I show you the process to create this new palette:


New Pallete


Gradient Composition

New Gradient Pallete


What did I learn?

Designing the app has been a challenging and rewarding journey. It was clear from the onset that the major challenge will be to make Colombian users interested in something that competes with the daily habits.

We research the way our users see the app and consume the app, We understood this needs, listening and asking our users and partners what they expect about preo and fit into our reward program and the business needs. And Finally, we faced the challenge of creating an engaging app both form the user experience and the visual one.

What can I do better?

  • Deep research about specific features
  • Usability test of the prototype with users
  • A comprehensive business model
  • Research about features and results of competitors.
  • Usability test of the prototype with users.
  • Create a design system to improve our communication with the dev team.