Wireframing exercise
Going backwards to move forward
The aim of this exercise was to create a bunch or wireframes. The difference laid on the process’ sequence: in the UX methodology, once the main features of an app and the user flow have been decided, it’s time to start sketching to later move to wireframes that will evolve into mock-ups and then a final product. This, was a case of “reverse engineering”, from a final image of the screens I had to be able to create the wireframe. The images given were seven screens from the emov app, the car-sharing company. These screens included the home page, the map with all the cars available, the map filter screen, the results of a search, the menu screen, and the sign up and log in screens.
I have to admit that I enjoyed it this approach much more than if I had follow the conventional workflow. The wireframe versions would have to maintain the same functions that the original but in a simpler and lack of styling design, mostly based on basic shapes. So, my first approach was to look carefully at each one of the screens to elucidate what the purpose of each one was and what information should I keep. Deciding what information to keep and what not to has been a bit of a challenge; I didn’t want to oversimplify the wireframe, but I didn’t want the screens to be incomplete either.
I then created simple sketches of the screens with the information I had decided to keep (I always work better with pen and paper first) and then I moved to Sketch to create the final versions of the wireframes. This time, I found myself more comfortable working with Sketch, mostly because all I have to do was rearrange geometrical shapes on the different screens. And here are my wireframes. I hope I have found the middle ground of creating a simplified design but conveying the message of the original screen on them.
