Assessment Two: Concept Blog
Assessment two for UX design 2 tasks students with a variety of briefs that must be deconstructed to enact a series of user based and UX based objectives. This includes the creation of different variations of one app that cater for various sub-categories like context, aesthetic and accessibility. To begin the process students had to complete a 7 step canvas on the three different briefs.
7 Step Canvas
This is the 7 step canvas on the pet brief that was supplied. A simple task that requires the designer to answer a series of 7 questions that will roughly overview the basic wants and needs of the app in question. The task itself was simple and was used as a blueprint and reference for the remainder of the process.
RSPCA: A pets best friend
On the completion of the 7 step canvas, the full brief was provided that outlined the process and variations that had to be included. The RSPCA pet brief focused on providing an app that helps users enhance their pet care knowledge and practice whilst also catering for both new and old pet owners.
Ideation
The ideation sketches created were simple and quick ideas that came to mind, but in a drawn and written form. The process took around 10–15 minutes per variation. Ideation like this is intended to generate low quality but high quantity ideas that leverage the 7 step canvas ideas too.
Context variation looked mainly at screens or processes that aimed at the pet adoption aspect as the app itself should help with the integration of the pet into the users lifestyle. As in, the app itself features aspects that will help guide the user with life after adoption. Therefore, the ideation focused on pet adoptions and how the user can adopt a pet around their area.
The aesthetic variation is harder to show on paper as it relies heavily on colour. The ideation looks to use annotations and iconography to demonstrate the Firefox Photon design language but the quality is low. I focused on trying to take original screens and changing them in some way that reflects the Photon design language.
The accessibility variation relied on larger text, less information crowding and more button prompts. I chose to focus on these aspects as well as considering contrasting colours that the vision impaired user will have to deal with.
Wireframing
The wireframing was completed in Adobe XD and took a lot longer than it should have. As it can be seen, there were a lot of screens, variations to screens and new screens made. The wireframing is basic but sets the basic layout per page and serves as a blueprint for the high-fidelity mock-ups.
Context variation saw additions to the beginning of the process that allowed users to explore pet adoption options.
The aesthetic variation did not have much change or variation made upon it. This was mainly due to how the variation would exist in the colour change, however you can see minor changes made such as iconography and image/button placement.
The accessibility variation saw changes made upon that existed in size and scaling as well as accessibility options and menus. It saw less information crowding and the use of larger text and graphics that a low impaired user could view better.
Prototyping
The prototyping was also completed in Adobe XD. The high-fidelity mock-ups had to reflect a finished (or mostly finished) product that could be seen as a published app. Each variation allows for differences that can be compared and contrasted to see how they suit their purpose. It also gives a full scope for users to compare later on when deciding which variation to continue with. The main similarity exists in the main aesthetic that reflects the existing RSCPA aesthetic (except for the aesthetic variation which reflects the Photon design language).
The context variation attends to the RSPCA aesthetic whilst being user friendly and easy to navigate. It relies on readability and colour to convey the information accurately and purposefully.
The aesthetic variation utilises the Photon design language from Firefox. This design language has a certain font typeface (Segoe UI) and specific colours that mean specific things. It also relies on illustrations and simple iconography. For example, the blue is a primary colour that is used for main information, buttons and icons. The ink black is as a secondary colour used for text. The illustrations usually reflect information present, however in this case it is more of an aesthetic choice. And finally, the iconography portrays the information it is presenting (i.e. scales for weight or paw for animal).
The accessibility variation uses scale and size to emphasis the information and increase readability. It also relies on graphic and icon use in large scale to demonstrate the appropriate information.
Summary
The design process for assessment two was much more time consuming than assessment one. This is mainly due to how the app had to be made from scratch rather than treated as a feature of an existing app. It required a lot of attention to detail in the wireframing and prototyping and relied on different aspects to the design sprint process.
