UI Design & Case Studies

Welcome to my UX Design portfolio.

This part of my portfolio includes 3 UI case studies, from research to hi-fi mockups:

  • Padoca app: e-commerce app for a Brazilian bakery in Montreal, QC
  • Florist NYC: responsive website for Florist NYC, a flower shop based in New York City, USA.
  • Healthy Food: social project to help people learn how to cook healthier meals. Including designs for an app and a responsive website.

Padoca’s app  project


  • Padoca Pâtisserie Montreal


  • UI for app


  • Low fidelity mockups
  • 1st round user research
  • Adjustments and high fidelity prototype
  • Styleguide

Experiencing bad delivery services with third-party partners, the Padoca’s owners decided that they will start delivering their products by themselves.

With a brand new app, they could control delivery and other options, besides having important data about their customer’s preferences.

The app would help them offer better delivery options and improve products development for their business.

About competitors

Montreal counts some 6 other competitors on Padoca‘s field, but no one has an exclusive app. They mostly use the telephone to get orders on third-party services as Foodora or Uber Eats. Or you can order send them an email.

None of them offers online orders thru their own website.

Who are Padoca’s customers? Creating personas for a better understanding.

After conducting research on Padoca’s customers, I create 2 personas, based on characteristics that stood out from the forms collected. The research method used here was a 10 questions form create on Google Forms. It was sent directly to the customers that accepted to answer it on their free time.

users’ journey and first mockups

With the 2 personas in mind, it was time to understand how people would use the app during an ordinary day. It was necessary to consider the users’ journey in order to build something it was easy and fast to use on a normal busy day. During the research, customers want to see two features (presented on the personas): table reservation and online order.

First I created examples of users’ journeys to imagine how Philippe would use the app on a busy day after work, while on the metro or bus going back home.

To read a more detailed user journey based on Philippe’s persona, please click here.

After a clear understanding of the user’s journey, it became easier to think and develop some mockup screens. I designed basically two sets of suggestions to submit for clients’ approval. I had to think about how to incorporate consumers’ needs into an attractive design.


Padoca’s owners had a clear idea of the path to follow on this app. Considering all the aspects of the user research, it was time to design the first wireframes on Figma. I thought it was important to do another research to validate the wireframes. It would also show if I was always on the right path. 

The original concept with 3 columns…

… was changed after user research.

Same for the review screen….

… where the option to change order was added.

Watch the lo-fi video tests:


With the 5 tests in mind, the hi-fi prototype was created. I had tests conducted after as well, to validate some changes made. I will share the screens made but you can test the full functional prototype clicking here.

Florist NYC responsive website  project

Florist NYC is a small flower shop located in New York City, USA. They needed a responsive website to show and sell online. As it is a crowded market, the challenge here was to incorporate some features and services users like but cannot find in other small flower shop’s websites.


  • Florist NYC Inc.


  • UI for responsive website


  • User research
  • Low fidelity mockups
  • Adjustments and high fidelity prototype

Florist NYC Inc.’s customers: creating personas for a better understanding.

I conducted online research to get flower shop customers in the New York area (you can see the research and results here). It was important to have people who buy online flowers, but also people who intend to buy but don’t trust 100% this kind of service. The goal here was to understand what features people would appreciate having in order to buy flowers online. And especially something that could make Florist Inc.‘s website stand out from the competition.

some mockup ideas based on the first user researches

Before realizing the first wireframes in Adobe XD, I sketched some ideas on paper to get some fast visuals about the problems to solve. As users want to choose and buy fast, a clear design with different shapes for images was the way to go. Visually, was more efficient to navigate from one section to the other. My hypothesis was validated by some research for the prototype test.

For the first mockups, I develop small sections where the photos would be placed to make the buying process easy and fast. As people sometimes want to purchase last minute, it is important to give them great suggestions on the home page or present an easy way to choose. Users identified that a link to social media would be great to have inspiration and ideas.


On the following galleries, you can find the hi-fi prototypes for the responsive website. At the top I added the mockups for the desktop version. At the bottom, the mockups for the smartphone version were added. For this mockups, I kept points that stood out during the research: Florist NYC social media customers and suggestions for quick buy.

for social good: healthy food app and website

Healthy Food app and website is a social good project to teach people how to prepare healthier food. Based on some research, I tried to design something to serve to basic clients: people who need to cook for themselves and /or their families; and people who need to cook something for special occasions, to impress family and guests on a special dinner party, for example. 


  • Help people to prepare healthier meals


  • UI for app and responsive website


  • User research
  • Low fidelity mockups
  • Adjustments and high fidelity prototype

Personas created after user research

I conducted online research to better understand what would motivate people to cook healthier. The act of cooking takes time and costs money. I discovered basically two groups: one who wants/needs to cook on a regular basis, and the other who wants to cook for special occasions. 

Both personas presented here synthesized these 2 groups and help me design features for the app and after for the website to serve both.

Here below you have journey maps and problem statements created to help ideate for the first sketches:

some mockup ideas based on the first user researches

The crazy eights were the first step to start getting some clear ideas about how to design and present the features for the app and the website.

For the first mockups in Adobe XD, I developed sections where the photos would be placed to inspire users to learn how to prepare that meal.

Here is the mock-up for the home screen in 3 versions: cellphone, tablet, and desktop screen.

hi-fi prototypes for app and website

After ideation and first mock-ups, it was time to develop hi-fi prototypes adding photos and some true texts.

One of the challenges here was design the app and the website and keeping branding consistent. On the app, I needed to add on the screens some functionalities that on a website we can place them differently, following another architecture.

Here is the basic workflow for some screens in the app on a short movie clip:

Following down here, you have some website screens, and the way they should adjust themselves (desktop and tablet).

I choose for the tablet version the hamburger menu. Here you can see the home and the fast recipes pages.


  • Genetec’s bistro.
  • The bistro’s chef wants to start to offer employees the possibility to buy frozen foods produced there to avoid waste. They can check the menu and pick the food the next week to bring home.


  • UX/UI for intranet webpage


  • High fidelity mockups
  • 1st round user research
  • Adjustments and high-fidelity prototype
  • Styleguide


I created two personas based on employee profiles research. After that, considerations on research, habits, opportunities, and pain points were analyzed to make the best and fast intranet layout to employees to order frozen foods.

Low fidelity prototypes were made considering the possibility of developing a mobile app as well.

Feel free to click on the window below and navigate to the file in full-screen mode. You can drag the page to see each detail and read.

The fully functional prototype can be seen and tested starting on the menu page.

Add quantities to the cart, review order,s and get on the checkout page. As each employee buys his/her meals, money will be deducted directly from the next paycheck. So I added functionality where each person can see how much is already spent, and how much will be deducted from the next week’s paycheck.

Feel free to click on the window below and navigate to the file in full-screen mode. You can drag the page to see each detail and read.

Thanks for your interest in my work!

I'm Available for Hire or Freelance
Web design PortfolioGet In Touch