In the last assessment for Experience Design, we had to work as a team to develop the Go! Exercise app, which will be explained further in another blog post. But to be able to get the assessment on its way, we had to create some visual designs. One of my mistakes was apparently not reading thoroughly the assessment brief, I thought we had to do them all, but it was not necessary, we just had to do the ones we considered were most important for out concept.
After one of our classes, and after we had already done several visual designs, I understood this, but it was not very clear to me why we didn’t have to do them all. That is why I went researching a bit more and found several information that would explain each element better.
Why use these visual designs in a project? Experience design is becoming a very important element for any business. At the initial stage of a project, the designers need to confirm if the project and its features are as effective as required. It is important to find out if they meet the needs of the customer. The designer can explain his intentions to the team, but an image is worth 1000 words. A series of elements or visual design can be used to paint a clear picture.
These UX design tools are adopted along the development of the product, from initial wireframes design to high-fidelity prototypes. This allows the team to verify that the product is in the right direction. At this stage, it is important to get early feedback from the end user to save costs by minimizing the risks during the development.
The development can be divided into five stages:
Initial stage: Creation, ideation, and confirmation of what the user needs and who the user might be. For this stage the wireframes are used.
Detailed design stage: Screen flow design and verification. Storyboards and wireflows are key.
Prototype demonstration stage: High-fidelity design and product demonstration.
Testing: Usability tests to verify the functionality of the product.
Project launch: Final tests, trials and finishing touches in the product for it to be launched.
In this blog we want to focus on the visual designs used for the three initial stages of our app (Go! Exercise), starting with wireframe.
Wireframe
Wireframe is a drawing or a sketch that shows how the product or the system is going to be built. It is a simple and clear exercise that allows anyone to understand the intentions. It is important to show just enough information and not go into full details that are not necessary at this stage. They can be seen as blueprints to develop and describe each component and its content. The advantage of using wireframes is that they can be easily modified, and no coding is necessary to create them.
Storyboards
Storyboards are a visual description of the different scenes in a sequential order, that a user goes through with the product. It is used to show the different steps someone might follow in that certain product. These stages are linked to the wireframes developed in an earlier stage. It is a tool used to think of the features in a timeline and get feedback before any more development is done. In other words, it is a fun way to show how a user interacts with the system or what actions make the user use that product.
Wireflow
Wireflow is used to represent how the interface flows. A set of wireframes are put together in the order they should appear as the customer uses the product. Wireflows are displayed in a way that multiple interface flows can be shown depending on the features of that specific product. They are very helpful in the design of mobile apps and apps that can have lots of outcomes depending on the interaction of the customer with the app.
Mockup
A mockup is a high-fidelity design used to represent a product. Wireframes represent a screen or the structure of a product, a mockup shows the aesthetics side of the screen, how is it going to look like, how the brand comes into action and how the user will view the product. These are very useful to verify that the screen is readable, that the colours used are correct and that the information is enough. But they are not interactive, and so the viewer cannot “travel” from one point to the other.
Prototype
This is where the prototype comes into action. They are draft versions of the product that allow the user to explore through the interface. As well as in the mockup, the whole product is not designed, just those elements considered to be key to be shown for feedback.
In our case, I was responsible of creating the storyboards. The intention with those was to talk about the two different personas we had and what series of events made them choose the app. The storyboard was a good tool to understand what our customers might want to see in the app, what are the things they will be looking for and if they are easy to access. It was also important to have two completely different personas, this made the understanding of the customers and the flexibility of the app bigger and better.
If you want to see more of the app, you will have to keep reading the next blogs, there is more information to come. If you want to learn more of what I just talked about, go to this link: https://www.visual-paradigm.com/guide/ux-design/wireframe-vs-storyboard-vs-wireflow-vs-mockup-vs-prototyping/
Comments