Week 13 - Week 15
Ahmad Firas Bin Ahmad Fisal | 0345121
Application Design I | Bachelor of Design (Hons) in Creative Media
Final Task: High-Fidelity Prototype
INSTRUCTIONS
In this task, you will create a high-fidelity prototype for your mobile
application. This prototype should showcase your application's final visual
design, interactions, and functionality.
The high-fidelity prototype will serve as a realistic representation of your
application, allowing your users to experience and provide feedback on the
final design. It should demonstrate a polished and refined user interface
that aligns with the branding and usability principles established
throughout the design process.
REQUIREMENTS
Visual Design:
Implement the finalized visual design concept you created in the previous
tasks. This includes colour schemes, typography, icons, and any other visual
elements that contribute to the overall look and feel of the application.
Pay attention to details and ensure consistency across all screens.
Interactions and Transitions:
Bring your application to life by incorporating interactive elements and
seamless transitions between screens. Use appropriate animations and
transitions to enhance the user experience and create a natural flow within
the application.
Functionality and Navigation:
Implement the core functionality and navigation of your application. Ensure
that all interactive elements are fully functional and behave as expected.
This includes buttons, forms, menus, and other interactive components
specific to your application.
Content Integration:
Populate the prototype with realistic content to demonstrate how the
application will look and feel with actual data. Use representative content
and consider different scenarios to showcase various features and
interactions within the application.
Usability Testing:
Conduct usability testing on your high-fidelity prototype to validate the
design and gather user feedback. Recruit participants who match your target
audience and observe their interactions and feedback. Make a note of any
usability issues or areas for improvement. Minimum 5 participants for the
testing.
DESIGN EXPLORATION & PROCESSES
Transitioning from Low-Fidelity to High-Fidelity
After completing the Low-Fidelity task as documented before, I was also
required to conduct usability testing on my low-fidelity prototype and
gather the users' feedback.
The feedback attached is from the previous task:
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.
These amendments will be recorded below throughout this particular blog for
the High-Fidelity prototype for the application, Instax SHARE.
VISUAL DESIGN:-
As for the preparation of the visual design that I intended to apply for this
High-Fidelity Prototype of the Instax SHARE application, I will be referencing
my previous visual design concept that was compulsory for us to have in Project 03: Low-Fidelity Prototype.
Task 03: Visual Design Concept by Firas Fisal
This concept helped me gather my grounds before starting with the style guide
that I wanted to do to ensure that I have every element, icon, button, colour
palette, and typeface design in a single frame.
|
| Figma - My Style Guide |
Having to create this style guide before starting with the entire
high-fidelity project ensures that I have all of the elements that I would
need in this project in one place so that I can be more confident with my
vision and execute it efficiently.
I then proceeded to take all of the confirmed lo-fi frames and paste them into
the new file to officially start the hi-fi prototype. The figure below shows
the workspace in a wider view to check the colour consistency I would get with
this whole colour palette I have got going to the major structural elements in
each frame like the background and navigation bar.
|
| Progress - Colour Consistency |
How do I come up with the colours?
|
| Colour Palette |
These three main colours were derived directly from the Instax SHARE logo, My
main goal in adapting this to my version of the redesigned application is to
maintain the brand identity of the application. Moving on, by taking
inspiration from the visual design concept, I'm inclined to make a subtle
gradient background for the whole interface design made from the three main
colours of the application.
The longest part for me in both lo-fi and hi-fi tasks is to overcome the first
few frames where your creativity is truly needed because you're creating the
'template' that you would want the rest of the application to follow, so every
decision matters.
|
| Figma - Landing and Home Page |
|
| Figma - Onboarding Frames |
I've managed to complete these frames with the incorporation of both the
original logos of Instax SHARE and Fujifilm. I find that those are necessary
touch-ups that I should at the very least do to maintain the brand's identity
as mentioned. I find it to be harmonious in the view of the home page (1st
picture most left) because the background mimics the logo up there, so it
looks harmonious between each other which I really like. It's as if the
colours melt through the necessary parts of the page that introduce
consistency.
For the Onboarding Frames, I've also repositioned the small 'Next' button
because during the lo-fi it was mentioned that the button is placed too far
down and obstructing the flow because some users do not scroll entirely to see
that the button at the very bottom of the page, so I made the changes to make
it higher so now it is more noticeable for users but also not distracting the
users from looking at the onboarding frames.
|
| Frame Counters |
Since previously in Lo-Fi, everything is in grayscale so whilst I was deciding
on the colour schemes for the major elements, Something came to mind to
influence my decision in turning this onboarding frame counter that tells
users when the onboarding frames end, to be in the colours of the original
palette from the Instax SHARE app. This is for sure a minor detailing decision
but I'm positive that every decision for this stage of the project would be
highly impactful to the end product. In the end, I was super happy with my
decision because it blends well.
Features of this application:-
- Take a photo
- Select a photo
- Templates
- Templates
- Collages
- Photo Split
Seeing that it was instructed the lecturer that this time around for the
high-fidelity prototype, no direction can be given to the users during the
usability testing. In short, this requires you to make a free-flow prototype
where users can click on anything that they see on the frame and it will
direct you to the respective actions.
I managed to come up with around 100 frames in my Figma and although I was
notified there were certain minor flows I had to cut them due to Figma showing
signs of crashing, these minor flows are for example in Select a photo,
instead of making it flexible for users to click any of the photos I've
provided in the gallery, but instead I allow users to only click on one of the
images I've intended. I have to weigh in between at least showing one of the
variations of the full complete flow or creating multiple flows for that
feature and risk crashing and not being able to complete the project.
At the end of the day, the remaining features such as Templates, Collages, and
Photo Split offers much wider flexible flows where users can see different
collage type being applied to the photos and how they would look and the same
goes for photo split. So I don't feel that I am at a disadvantage for doing
certain limitations.
*I've noted in the usability testing instructions that I've made certain
icons in certain flows of the features restricted to maintain the
integrity of the flow and remove the risk of users experiencing an
unfinished flow. However, if it were to be a real application, those icons
are there for a reason, it shows that they will be functional and
clickable.
Feature A: Take a Photo
|
| Figma - 'Take a Photo' Feature |
This flow focuses on the user clicking on the first feature they could see
from the home page where they could take a picture with their device's camera
directly from the application use the instantly captured image and print it
out into Instax instant photo.
The disclaimer I mentioned earlier regarding certain icons was disabled to
maintain the integrity of the designer's intended flow since we must refrain
from having directed testing sessions with our users. To prevent users from
experiencing an unfinished flow experience for 'Take a Photo'. that is why I
made them icons such as 'Templates' and 'Edit' at the navigation bar below.
Feature B: Select a Photo
|
| Figma - 'Select a Photo' [Editing, Filters, Customisation] |
|
| Figma - 'Select a Photo' [Editing, Filters, Customisation] |
These two pictures project the complete flow of how a user would use the
'Select a Photo' and proceed with editing their pictures with the editing
bars, custom bars, and filters. Take note that the filters are clickable to
your liking to adhere to the instructions of having a free-flow flow to our
high-fidelity prototype.
This is also the part where I put a disclaimer that this feature would not
have the same long flow as shown above for the other pictures except for the
pink sunset used as the example. This is due to my Figma software showing
signs of crashing and I do not want to risk my entire final project. However,
the features in Templates are showcased with various template types for users
to enjoy slightly more flexible flows.
Feature C.1: Templates - Templates
|
| Figma - Templates [Templates] |
Moving on to the 'Templates' feature, there are three sub-features to take note of, the first one being just templates. This is where users can choose between those pre-made templates or real-time templates and they proceed in choosing the picture that they would want to be under the template and customise the wordings to their liking. This feature is more on allowing creative alikes to annotate their printed photos to their liking and these pre-made filters determine the usual recommended wording placements. Those 5 rows of multi-flows in the workspace showcase the flow if the user chooses each of the templates to their liking to accommodate the flexible flowing instruction.
Feature C.2: Templates - Collage
|
| Figma - Templates [Collage] |
The second sub-feature would be the Collage, where users can choose pictures
that they would like to make into a collage. The workspace shows different
multi-flows when users click on one of those three showcased collage
structures to their liking.
Feature C.3: Templates - Photo Split
|
| Figma - Templates [Photo Split] |
The final sub-feature of Templates would be the Photo Split. This is a feature that most creatives or users of Instax products would favour due to being able to split their photos to make a sort of creative collage or expression of creativity as shown in the workspace. Users can try out those three showcased options and see how the photo chosen would look with the respective photo split option.
Miscellaneous Settings
|
| Figma - Miscellaneous Settings [From the Home Page] |
From the homepage, you can see the four icons below that are universal icons
for their functions. Starting from the most left; downloads, settings,
reprint, share. These icons were made available to accommodate my opinions in
the UI/UX document where I wanted to introduce pathways that would make it
easy for users to download their printed photos in the instant photo format,
social media integration, and reprint feature if you feel like you want to
reprint the photos you've printed in the future and not at the time of
printing the original piece.
|
| Figma - Printer Connection Status and Error Prevention Feedback |
The printer connection status is one that I've integrated, inspired by the
original application. However, for my redesigned application, this icon could
be clicked and it will direct users to the settings and to the network
settings where they could do as they please after being directed there. There
is also the 'Gear' icon that represents Settings spread out through the entire
frames and features for direct access to the settings.
Another feature worth mentioning is the Error Prevention feedback. As taught
by our lecture on Usability principles, I always put those features in mind to
ensure that my redesigned application project would have a deeper meaning with
all those user-centred thoughts put into consideration.
Typography
Typeface: Titillium Web
After careful research, I have found that the standard font size for iOS
applications is generally 17 font size. Most of my main contents in the
prototype adhere to that suggestion.
INTERACTIONS AND TRANSITIONS:-
|
| Figma - Onboarding's Transition [Smart Animate] |
I've decided to use Smart Animate transition after knowing that it works well with frames that have similar elements inside. One main thing I could point out for mine is the user logo, it animates smartly from one frame to another due to the Smart Animate feature.
|
| Figma - High-Fidelity Prototype Transition [Dissolve] |
Other than that, the entire project was set to use On Tap - Dissolve at the
speed of 200ms (Ease Out). I find that this work well with the whole
interaction compared to the other types of transitions which I find to be
too much to view a project with such many frames as mine.
FUNCTIONALITY AND NAVIGATION:-
|
| Figma - Main View of Prototype Flow |
The flowing stage took quite a time because it is such a delicate process. To make this project with flexible flows where you could click on any of the icons and be directed to the respective actions, it is certainly not an easy task where you could slack because one wrong could backtrack you for quite some time trying to retrace your steps.
|
| Figma - Specific View of Prototype Flow |
I was surprised to see that this was the entire specific view of my flowing
and it just looks like a piece of artwork on its own too. However, I'm proud
to say that I've finished the project and did a checking on my own before
making it official for usability testing.
CONTENT INTEGRATION:-
|
| Figma - Adding Images for Realistic Content Integration |
Adding images to places that do need them may sound like an easy task, while
it is a rather easy task it definitely requires some focus and planning too.
Learning the Figma shortcuts from other experts out there really helped
minimise the workload for me. Those keyboard shortcuts to adjust, copy and
paste, cropping, etc. were really helpful working in a time crunch.
|
| Figma - Example of more Realistic Content Integration [Flexible Multi-Flow] |
As an effort to make my content integration ensure a realistic experience
when users try out the prototype, I've included many flexible flows like
this flow where I showcased the workflow of how a user would edit and choose
their filters before printing out their pictures. Other flows for this
effort could also be found throughout this blog for other features. This was
merely attached here to make a point that these are my efforts to make it
realistic by initiating content integration.
USABILITY TESTING:-
As instructed in our project brief, the final stage of this project would be
usability testing. This round however we are required to obtain five different
users to test our prototype undirected and record their feedback that would be
useful for areas to improve.
Instruction Message (Sent to the selected users)
Hello, https://shorturl.at/jPRV9
For the module Application Design 01, I'm trying to gather at least 5
users to test out my redesigned version** (high-fidelity prototype) of
the Instax SHARE application and share your feedback with me!
INSTRUCTIONS
*Kindly use your laptop with a mouse or the touchpad on your laptop for
the full experience (Mobile is not allowed)
*Avoid using your arrow keys to move through the frames
This version of the high-fidelity prototype integrates a rather
free-flow** where you can click on almost any buttons on your screen and
you'll be directed to the appropriate actions.
Features to observe:
- Take a photo
- Select a photo
- Templates ( 1. Templates, 2. Collage, 3. Photo Split)
- Misc buttons on the home page (settings, downloads, etc.)
Other aspects to observe:
- Visual Design (Colour Palette, Buttons, Typeface/Font Design,
etc.)
- How functional the application is? (is it easy to use? easy to
navigate? intuitive and direct enough for you?)
- Things that you might be against could also be listed here under the
feedback session
** Certain icons in the navigation bar for specific features have been
disabled to maintain the integrity of the usability testing to prevent
users from missing out on the true flow of the app.
Feedback Questions
1. How satisfied are you with the redesigned application? (State your
reasons)
2. Are the features well-rounded enough to be an application that
promotes "Instant photo printing with editing and customisation"?
3. What did you like the most about the redesigned application? (design
or feature aspect)
4. Any further improvements you would like to suggest?
|
| Usability Testing - Page 01 |
|
| Usability Testing - Page 02 |
|
| Usability Testing - Page 03 |
There are certain feedback comments made that were irrelevant to the usability testing due to miscommunication of the instruction message given. Some overlook that there is a disclaimer mentioning the purposely disabling the icon to maintain the integrity of the intended flow for the features without compromising too much on the flexible flowing instruction.
As for what User 04 has mentioned about the coloured instant photo borders, usually, the original application did not showcase that on the application because the film stock that you bought to reload it on the printer would already be coloured or white according to the version that you buy, however, that is also an interesting suggestion to take note, a feature where the application could detect which design of the Instax photo cartridge was put inside the printer and reflect the visuals on the borders of the photos in the application.
I will also take note of what User 03 has mentioned regarding the size of the
social media icons being too large and not communicating well with the already
good and well-planned theme going around in the prototype. Additionally, the
cancel button in the Take a Photo feature should be looked at too, to make the
flow more smoother than it already is right now.
Overall, the feedback given was really positive and I feel content to know
that all of my hard work and ups and downs trying to be able to achieve what
I've achieved throughout this journey of creating it did not go to waste.
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
view with a mouse or touchpad for a better experience. Mobile devices are not
favourable.
Comments
Post a Comment