Week 08 - Week 12
Ahmad Firas Bin Ahmad Fisal | 0345121
Application Design I | Bachelor of Design (Hons) in Creative Media
Project 03: Low-Fidelity Prototype
INSTRUCTIONS
In this task, you will create a low-fidelity prototype for your mobile
application. This prototype should include wireframes and a visual design
concept that aligns with the branding of your application.
The purpose of this task is to test and validate the user flow and user
experience of your application before moving on to higher-fidelity
prototypes. Creating a low-fidelity prototype lets you quickly iterate on
your design and make necessary adjustments based on user feedback.Requirements for this task:
Visual Design Concept:
Develop a visual design concept that aligns with the branding of your application. This concept should include colour schemes, typography, and imagery that convey the desired look and feel of your application.
Wireframes:
Create wireframes of the screens for your mobile application. These wireframes should illustrate the layout and content of each screen, including the navigation and interaction elements. You should use tools such as Figma, or Adobe XD to create these wireframes.
Usability Testing:
Conduct usability testing on your low-fidelity prototype to validate the user flow and user experience. You can recruit friends, family, or classmates to test your prototype and provide feedback. Make sure to document the feedback and use it to iterate on your design.
Deliverables:
Submit a digital document that includes your low-fidelity prototype, wireframes, and visual design concept. Also, include a brief summary of your usability testing results and how you used them to refine your design in your e-portfolio
--
Visual Design Concept
This is the part where I've created a mood board to visualise my idea of
the redesign. Integrating the previous ways around the app with a newer
modern feel to it is the main goal of the redesign.
Slides attached below are the rough concept of how the app is going to be;
Wireframes
Software: Figma
After reviewing my user flow map and the other progressions I've documented in my previous blogs, ideas came overflowing with how I want my redesigned app to look. The workspace for the wireframes is separated into different application flows/functions. Taking note of the data analysis from the survey that was made available to the public, they mentioned the flow of the application is already quite good and the only thing lacking is the overall design choices of the interface.
1. Onboarding
2. Connection (Printer)
3. "Take a photo" (Device Camera)
4. "Select a photo" (Gallery/Photos)
5. "Templates" (Template, Collage, Photo Split)
6. Social Media sharing
7. Settings
8. Saving printed photos
- - Onboarding
These wireframes for Onboarding are what users will see throughout starting from opening the application moving on to signing in and to the onboarding to give a little sneak peek at what this particular application could do.
 |
| Onboarding Wireframes |
- - Connection (Printer)
After the onboarding frames, the user will then be moved to this frame which allows the user to click on the 'get started' button to proceed in connecting our application with the printer model that we are owning before the printing session starts.
 |
| Connection Wireframes |
- - "Take a photo" (Device Camera)
This is one of the main features of the application, this particular feature is users will be able to print a photo that they will take directly from their device's camera. The feature ends with the error prevention stage of the frame where a tick symbol will appear notifying the user that the picture is printed out and to avoid unnecessary reprinting of the same picture unless intended.
 |
| "Take a photo" flow |
- - "Select a photo" (Gallery or Photos)
This flow is the longest one in the wireframing process because this feature is responsible for the "photo customisation and editing" part of the application. The user will undergo stages of editing, be it custom changes, filter options or even the orientation of the photos. All of that could be done under this stage. As mentioned, a particular flow will always end with the error prevention feature that shows the user if the photo has been printed successfully and prevents unnecessary reprints.
 |
| "Select a photo" Flow 1 |
 |
| "Select a photo" Flow 2 |
- - Templates (Template, Collage, Photo Split)
Other creative personalisation features are placed under the Templates feature, where users can find Template, Collage, and Photo Split features that they could use to make their printing experience more personal and fun, infused with their own creativity.
 |
| Template Flow |
 |
| Collage Flow |
 |
| Photo Split Flow |
- - Social Media Sharing, Settings, and Saving
These last wireframes are considered as the "others" feature as it it not as major as the other three flows. However, they add equal importance to the whole application that ties it back together. Users are able to share their digital prints online through the social media feature, and they are able to save the prints as well for safekeeping. The user is able to use the reprint feature to reprint photos that have been printed as well. Settings are also accessible through the gear icon on the home page, where features like feedback, account settings, and many more are added for a much better user experience.
 |
| "Others" Flow |
Usability Testing
As instructed in our project brief, this final stage involves letting our prototype be tested by other users. Noting their feedback and observing their actions and confusion if any is crucial in aiding our progression in the High-Fidelity Project in the future.
*Screen-recorded videos provided by these three users will not be provided here in the blog as it is only for the recording of their process of going through the prototype testing. However, the guidelines in written format, will be provided to see how the moderated testing was done to ensure that they are on the right path in going through all of the flows made.
Guideline (A guide was sent to the testers)
Prototype - User Testing
Guide
1. You will undergo a testing of how this app generally works. By that, you will be testing (clicking) every feature that is made available on your screen.
2. The flow starts with;
- Logging in as a new user
- Onboarding screen for an overview of the application
- Getting started by choosing your printer model
- Main flow: Select a photo from your photos and edit the pictures in-app before printing it out.
- Secondary flow: Taking a direct photo from your camera via the application
- Tertiary flow: Templates. (You will start with template, moving on to collage, and ending it with photo split)
- After these three main flows, you will then explore the social media integration feature where you are able to see logos of social media that you are able to share to then click back to move on to the next feature
- The settings feature
- Lastly, the "saving" picture is where you can save pictures in the instant photo format that has been printed out.
-End-
These steps will go in order. Could you also leave feedback on the flow while following these steps?
Do screen record your journey as evidence (you are recommended to use your other screen to read these steps while you do the testing on your other device). Thank You a bunch!
 |
| Compiled Feedback for Usability Testing |
A master video for the overall prototype will be attached here in video format. This enables readers of this blog to see how the actual flow of the prototype should be as a guideline for this Low-Fidelity prototype project.
Deliverables
How do I use the feedback for further refinement?
- Changes to the icon "Next" on the onboarding frames.
- Changes to certain icons to reflect the meaning well.
- To provide more flows to enable users to randomly click on the prototype and proceed with the actions, instead of having to follow the linear flow.
FULL PROTOTYPE - FIGMA
The link attached below will give users access to preview the full prototype that was created in Figma. *
*It is advisable for the prototype testing to be viewed from a laptop/desktop rather than a smaller device to view how the testing would look on a fake mobile device frame.
Video: Click here!
Comments
Post a Comment