My First Attempt to Practise UI/UX Design
I have been working as a backend engineer for quite a while, doing stuff like data engineering(Spark/Kafka), web backend (Micronaut, Spring & Dropwizard ) and a whole bunch of other random things. I have always wondered how a designer's work would actually be like. Often times when we show the skeleton frontend to business users, they would automatically think that the heavy groundwork is done because you know what? The look and feel is already there and the buttons are all linked and bring them to different pages. The UI/UX design leaves such an important impression on business users and the invisible backend functionalities are just always hidden from them thought they took loads of hard work. With that in mind, I was determined to look into UI/UX design one day. And here is what I have accomplished.
I have been prompted by quite a number of friends to start a website regarding this specific service - help bring something for someone in personal luggage in a timely measure. In current world, it would not be so affordable to send a bulky airmail or rather it takes ages for a sea freight shipment. In light of many life-changing sharing services(Uber, Airbnb), how could anyone haven't thought of sharing the baggage space on air due to the fact that the airlines charge quite a lofty price? Even back then, I remembered my colleagues one bench denoted some efforts to build something similar.
So, I had try to "design" (as if I could) a website regarding this service for the following four MVP user stories
- A user could login through email or SSO with common social medias.
- A user could lend a help by creating an offer with essential details.
- A user could search offers with regards to his/her specific requirements.
- A user could view the histories of his offers and requests.
My friends have suggested this app to be named TakeTake. Something easy to remember right? like it is a line from a Kanye West song or something.
Story 1: a user could login through email or SSO with common social medias.
I imagined the landing page to be something cooler that the trees would softly swing with breezes and the clouds floating like the real kinds. But, that is for a professional designer, I will save to do it later if anybody on earth wants to hire me as a UI designer. I am actually quite content with the minimalistic "design"(just allow me to call it ) of the sign in page, the elegant green and a pretty obvious orange sign-in button to catch the users' attention.
Story 2: a user could lend a help by creating an offer with essential details.
The user with the kindest heart chose to help others in the landing page will be directed to this flow. So the user would be able to enter his flight details such as the dates, the weight, offering prices and some additional information. When a request is created successfully, some matching algorithm would be triggered the in backend and the page would show the matched requests from other users in need of an offer.
Story 3: a user could search offers with regards to his/her specific requirements.
A user that in a hurry to help his mother on signing an important documents would be directed to this flow. He would want to send the documents as soon as possible on 20th Nov 2020 and the documents are blow 1 KG. After he clicks the green search button, there are two scenarios which could happen. First scenario, there are already quite a number offers that I could choose from with prices showing on each offer card and the sad second scenario, there are no offers yet so he would want to create one.
Story 4: a user could view the histories of his offers and requests.
On hover the avatar, user could go to the history page. For the offers, he would view the offers in various states: completed, in-progress, active and cancelled. The same would go for the requests. I designed a little feedback section for each offers that have been completed or cancelled.
Last words
That is the MVP I have "designed" (double quotes to refuse to receive any critics) for the TakeTake web app. You could check the overall version on Figma here. Thank you for reading and also please contact me should anyone would like to fund this web app.