Back to Portfolio

Design / MobileApp

Mybnb

  • Mybnb
  • Mybnb
  • Mybnb

Mybnb is a high fidelity UX/UI Design project. The goal is to provide a design of an app to book Bed and Breakfast lodges. This project (Flows, Design, Prototype, Guidelines) is a proof of concept to test a new way of development and designing.


For this proof of concept, I did use Figma as a design tool for the Wireframe, Flows, and Prototype. I'm using Flutter, a new framework created by Google, to build iOS and Android Applications with one codebase.


This project was the perfect opportunity to apply a UI to a codebase that works cross-platform (iOS and Android). This way, I can improve my skills on the frontend side and mobile application development.


For this proof of concept, I use Figma as a design tool for the Wireframe, Flows, and Prototype. For the coding part, I used Flutter, a new framework created by Google to build iOS and Android Applications with one single codebase.


This project uses a few recent interesting UX Patterns. For Instance, this application uses a multiple steps registration instead of one-page registration. The goal is to divide the registration form fields into five different screens. This way, the user believes the registration process is fast, simple, and accessible. Also, once the user is committed to the registration process, the conversion rate is close to 100% (due to the "Sunk Cost" bias we all have). Using human psychology to increase conversion rate is also part of the UX Designer job.


With this project, I have the perfect opportunity to apply a UI to a codebase that works cross-platform (iOS and Android). This way, I can improve my skills on the frontend side and mobile application development.


Flows


There are two types of Flow: one when the user is Logged In, and one when the user is Logged Out. In terms of UX, It is always frustrating to hit a "Login Wall" while using a Mobile Application. This is why I try to put the maximum of screen available on the "Logged Out" side. Therefore, The user will use the app for an extended time, which will increase the conversion rate and registration count.


my-bnb-flows


Artboard & Mockup


This is the library of artboards—all the screens of the Application in one single image. (Since there is a lot of artboard, please check the picture on desktop).


my-bnb-artboard-collection


The codebase


This is a code working on Android and iOS using Flutter.


my-bnb-code


The toolbox



Back to Portfolio

Let's work together on your next project.