Here’s a UX challenge from IronHack — they asked me to do it.
I’ve joined a UX/UI programme, and upon my second challenge, I embarked into the world of components and wireframing… Let me tell you something: name your layers!
The outline of the deliverables of this challenge was to ‘reverse engineer’ an app — either Glovo, Blablacar or Treatwell. Naturally, I wanted to treat myself to an app that I’m familiar with, so I chose to reverse-engineer Treatwell.
The challenge, as IronHack likes to say, is to understand “the power of wireframing” — and I did just that. Like most people who are new to UI/UX design, tasks like these may seem easy. A phone outline, throw some blocks on there — or even better yet, download a wireframe kit and reiterate — then click a prototype flow into the mix and voila!
Little did I know…
Welcome to components! Have you tried to resize a modal 🙄
Let me start from the beginning of this project. Luckily, it was not that hard. There are UI kits that you can download for free and the Figma Community offers many wireframing kits at your disposal.
As per the assignment, I chose the IronHack IH Wireframing Kit and as much as it helped, it was a great learning curve for me to understand how to edit these components in a manner that suited my look and feel. Other wireframe kits that I downloaded were the Woilonn free wireframes kit and the Minimal Wireframe Kit on Figma (proudly brought to you by Tailwind CSS). The Noun Project is also a good platform to create icons for your designs — and cheaply! So, one can definitely say that the Figma Community is a big plus for anyone out there trying to dip their toes into the UX/UI design world.
What helped me greatly was taking screenshots of the Treatwell journey that I wanted to reverse engineer. I simply downloaded the app and then re-engineered the onboarding process. Look below to see how:
SIDE NOTE: I had trouble with resizing the modals, so you’ll see where it says “masc” and “femme,” I honestly did try to put “other” there to make the language more inclusive. But now, typing this, I realise that “other” may also be a problematic UX-writing term.
Once I took the screenshots of the user journey, I copied over the wireframes to my artboard. I then looked at the onboarding journey of the app once downloaded from the App Store. The best part of this onboarding is that they look into what the user needs rather than forcing them to log in or sign-up immediately. This shows, to me, that the UX designer thought about the onboarding process as the main priority — rather than bombarding the user with administrative tasks. A great way to decrease drop-off rates and meet user needs in the process.
Learnings:
I realised that editing modals to make them look how I want was quite a complex task — and one that I have not fully mastered. I also had issues embedding the prototype into this post, so I used my Premiere skills to help me showcase my methodology.
Wireframes need to showcase the usability instead of what an app looks like. Making workflows using Figma is an essential task for creating MVP products that work off data-informed decisions and should never be overcomplicated.
Creating wireframe quickly is key (something that I knew throughout the process but struggled with). I did manage to keep the details and information to a minimal in order to communicate ideas successfully. There were times that I had to include copy to make the prototyping journey clearer for someone that hasn’t been working on this project. I tried to find some balance.
I hope you see the basic flow that I’ve gone with here. I’m happy to hear comments on what could have been improved in the comments below.
I’m new to this and am very open to learning more. So here I go, venturing into the world of UX. Enjoy!
