Design Challenge: Wireframing

berna akpinar
4 min readJan 2, 2022

I have chosen for this challenge the Co-Tasker App, which I have recently used to find someone for transport & carry. It is a platform where people can offer and/or seek for lots of different kinds of services. While I was looking for a handy person I have received some answers for my post and I have chosen the one with the most good references. The reference system definitely makes it more reliable for users. However, I was fascinated most by how quickly I was able to publish a post, and found a co-tasker after logging in with my Google account. That great user experience had some issues only by payment, but the customer service was very prompt and helpful.

I want to wireframe the steps of that work flow and share a demonstration here with my prototype.

Co-Tasker (Google Play image)

Workflow

Why did I use this app?

It is usually difficult for me to find a handy person for moving or fixing things, especially when I want it to happen asap. Recently, I have found someone so quickly to carry second hand office furniture. It was a lifesaver experience! I believe more people should experience this. That’s why I gave my time to create a wireframe and its prototype for a useful app like Co-Tasker.

I have found the UI design and the transition of the pages very simple but quite elegant. The process was as easy as you will experience also in the prototype demo.

I have chosen this workflow to show almost every step in the “post of publishing a task to find a handy person”. Below are some screenshots of the workflow.

Screenshots of Co-Tasker App

Task Analysis

*What task should be accomplished?

“Post a task in the app and give necessary information for the co-tasker who will be helping you.”

*To complete this task:

To “post a task” to hire someone, you will need these steps:

  1. Select a category that fits the task from the first screen.
  2. Write a title and description for the task on the keyboard.
  3. Choose how the task will be occured (remote or in person).
  4. Choose the task location by writing only your street name from the map where the task will be occured. Then choose your street name and city from the dropdown text box. After that, select “Submit”.
  5. Give more details about the task or what you will need extra like a tool or a car etc. if necessary.
  6. Upload an image of the related object or place if necessary. Then select “Next”.
  7. Enter the ideally wanted date and time if you do not request it “asap”. Then select “Next”.
  8. Select the necessary button to set a budget for that task. To pay a price independent of how long it takes, select “Whole price” then write the price in euros; or if you are not certain how many hours it could be then select “Price per hour.” If you do not want to mention the price then turn the “ Open to offers” button on. After that, select “Next”.
  9. You will see at the end a pop up dialog box that you have successfully published your task. To go to “Home”, select the “close” button.

Inventory of UI Elements

I have used lots of icons and buttons, most of them were in the Ironhack wireframe kit but I had to also find some icons at the Noun Project. I have mentioned them as in groups below:

  • Search, notification, star (for logo), checklist, message, close, question circle, menu hamburger, arrow right & left, stepper and map pin icons
  • Radio button on & off, checked button, primary button,step button and 2 buttons,
  • Text-area/empty, image/placeholder, image/upload, input/search, input/text, text-area/dropdown (for map search) and dialog box/window (for pop up)
  • Keyboard and map

Lo-fi Wireframing

“Post a task” user flow with lo-fi wireframe

I used just the classic pen & paper method. Lo-fi wireframing gave me solid ideas on how I should use the buttons etc. However, I had to do it again because the first one was a mess! :)

Mid-fi Wireframing

I have thought that I like sketching more than drawing on Figma but I have realised that the more I learn the more I like it! The wireframe is as it is requested at the challenge only in black and white colours.

Mid-fi Wireframe

Prototype

By clicking here you can go to check my prototype of Co-Tasker “post a task” workflow. It has been created for a small android phone.

Conclusions

Definitely it took so much time but as a result I got better at Figma and finally I learned how to prototype a wireframe! And of course I need to learn to be faster.

Also I have realised in black & white mid-fi wireframe, we really did not focus on any colour or a better design. It looks like we just show how the app interacts in less time compared to a high-fi design. Time is precious!

Thank you for reading! Until next time…

--

--

berna akpinar

curious mind / psychology BA/ ux research- ui design / sketching & loving birds