Challenge 2: Wireframing
Ironhack Bootcamp — Pre Work
Here we go again! To solve this new challenge, I will have to ‘reverse engineer’ the user flow and interaction design of the Bumble App.
Bumble is like a dating app, where you can connect with people in three different categories, dating, BFF (best friend), and Business.
The app is simple and intuitive, a swipe to the left is yes, and a swipe to the right is no. Once we match, we can start chatting.
While working on this app, I found elements such as Buttons, Text fields, Sliders, Icons, Notifications, (pop-up), Toggles, and Radio buttons.
and I had the chance to get familiar with them (great).
Bumble User Flow — Lo-fi
I have been using Bumble almost every day, so I chose a user journey that’s familiar to me: login, connecting with people, and sending them a message.
I drew a simple flow scheme that made a lot of sense to me as a user.
The user interaction in an App like Bumble is simple and intuitive. It starts with the login, of course, where you have a few options.
Once logged in, you go directly to the main page where you can swipe right for yes, and left for no.
If your yes is reciprocal, you get a match and are directly directed to a page where you can send the first message.
To begin with, I analyzed all the screens that appeared while I was trying to achieve my goal: to match and chat with someone new.
You can check the screenshots below
With that in mind, this is what my final wireframe looked like:
Interactive prototype, check out here:
Although it was challenging, I had fun. This challenge was an excellent opportunity to learn more about tools in Figma, and get familiar with them and understand UI elements, and how users interact with them.
Simplicity is the best way, it is not worth wasting time when the goal is to test ideas. This challenge brought me this extremely important lesson.
I know I still can improve a lot of things, but for now, I’m very proud of the small achievements through my work and that keeps me going.
