Week 3: Reverse engineer

Module

Module 1

Date

October 2, 2022

I found the article published by the Norman group (Laubheimer, 2022) on Wireflows as a good reference on how to reverse engineer an app which I frequently use - which is Google drive!

I started off by trying out the first prototyping approach: flow chart. I wanted to understand the back to end process of creating a folder in Google Drive. I thought this might help me as a reference to rebuild the app as a wire frame prototype. After making this chart, I realised that it was not enough information for me to create the wire frames, therefore I started to analyse the actual composition and layout of the app.
Secondly I started to understand the layout and how the different UI elements such as icons were used. When analysing the app I noted features that I haven't thought about before. For example in the fourth slide - two icons are shown: one of the project owner and secondary what type of project it is ex. docs, sheets etc.

‍

In the third step I created wireframes based on the current app. I translated the padding and distribution of objects, named actions and CTAs for the four frames.

In summary reverse engineering the app gave me an insight in how Googel app is composed - features I have not noticed before were now appreciated. For example the strict grid used in all frames - everything from padding between projects to the reoccurring elements of colors and icons.

‍

I have not seen this icon set up before and it made me think about if it is useful or not?

I especially found the overview page on the "projects to be shared frame" interesting. The have placed an icon for the project owner with a slight overlap on the project program. For example, if the project is made in word, there is a word icon, is it a map in google maps - it is an icon of the google maps pin, is it an pdf - then here is a pdf sign. I have not seen this icon set up before and it made me think about if it is useful or not? Perhaps it is an extra element that could be reduced to minimize clutter on the screen (even though the app is already very clean and structured). Perhaps it has another function which I do not use, for example if you have visual impairment and need to use the page read out loud function. Maybe this simplifies what you need? Is it a usability function? Either way, I do enjoy the functinon now when I have found it, but it would be interesting to know more about the thinking behind it.

As a next step I would like to build similar frames in Figma to both practice my hard skills and to understand how to use the reoccurring elements in a brand setting. Could I translate their UX and UI into another new frame for the app?

‍

Laubheimer, P., 2022. Wireflows: A UX Deliverable for Workflows and Apps. [online] Nielsen Norman Group. Available at: <https://www.nngroup.com/articles/wireflows/> [Accessed 2 October 2022].

All Posts