Wireframing with IronHack
Ironhack’s Prework: Emmanuel_Challenge2
This is an excerpt on the application Unfold By Squarespace. Typically, wireframing is a building process to put together concepts and workflows for the creation of an application. But In this instance, we will be breaking down the layout and some of the userflows that are taken to utilize it. This process opened up new ways to look at this app, brought up questions I would not have asked prior to this experiment, and revealed aspects about this app that I do and don’t like.
App in Scope: Unfold by Squarespace
Unfold by Squarespace is a storytelling toolkit that offers templates for creating stories for social media outlets like Instagram, Facebook, and Snapchat. Unfold has simple, but powerful functionality, and becomes more complex as more content is added. Its theme and template are minimal and invokes a strong sense of symmetry, building a contemporary application that relies on the users’ creativity to grow.
This application has a finite amount of directions for a user to take when navigating through it. The wireframes I built will focus on three:
- Adding Stories
- Purchases
- Settings and Customization
When analyzing the typical tasks this app can fulfill, it surrounds itself with these recurring themes:
- Adding and uploading content to social media platforms.
- The leisure of taking photos quickly for social exposure.
- An environment of social appeal when uploading multitudes of content.
Mid Fidelity Wireframes
Taking into consideration the general style guide Unfold used for its layout made its theme more apparent as I started this experiment. With its recurring curved boxes, san serif typography, simplistic iconography, and gray-scale color contrast, I came to understand it would be the responsibility of the user to personalize the app as they add content.
These Mid-Fidelity wireframes take into account Unfold’s:
- Functionality
- Style
- Overall Theme
Shade Wireframes
I took advantage of having the complete context of this application at my disposal and put together this wireframe using only the colors and shades that are used in this app’s design. This helped me understand some of the standards the designers who built this app conformed to, giving it a similar theme throughout the entire layout. This wireframe also brought out the white space that lingers on some pages. The emptiness, to me, gives off this vague, free feel to the application. I’m not sure if the original designers had this intention, but it again complements the idea of adding your own imagery to bring life into this application.
Low Fidelity Wireframes
When I put together these low-fi wireframes, I immediately understood why it, at times, gets negative feedback. It’s so undone and leaves everything applied to it only an opinion. It’s all up to chance at this phase as it screams unfinished. Taking advantage of this, it’s void and blankness opens up new ideas on how this app could have been laid out. And as it continued to irk me, the layout began to feel unresolved. There is so much in the final product that could be changed to improve usability. It allowed room for more features, and some of its recurring themes like the app’s symmetry could have been utilized more, giving this app a stronger identity.
The Sketches
I enjoyed this experiment. It’s not everyday someone can take apart a popular application and find these subtle inconsistencies. The most fun came from sketching out the wireframe. This process allowed me to think about ways to apply my inversions if need be. The freehand process allowed me to get more into the mentality of the builders of Unfold and gave me a feel of the time spent putting it all together.
Wrapping Up
When using applications daily, finding things about them that you don’t like can come from a simple error in the functionality when you need the app to work. You then notice a bunch of problems the app has, find yourself leaving a review, or not using the app again. In the instance of Unfold by Squarespace, It comes off as flawless, being as clean and subtle as possible. With this, it would have been difficult at first to find anything initially wrong with it. This experiment made it possible to dissect its layout and reveal things that could be improved for increased usability.
