16.06.2023 - 23.07.2023// Week 11 - week 16
Lim Yi Xvan 0354552
Bachelor of Design in Creative Media
Instruction
Task 4: High Fidelity Prototype
You'll build a high-fidelity prototype for your mobile application in this
challenge. This prototype need to demonstrate the functionality,
interactions, and visual style of your finished programme.
The high-fidelity prototype will act as a true-to-life depiction of your
application, enabling people to interact with it and offer suggestions for
improvement. It ought to show a clean and well-refined user interface that
adheres to the branding and usability standards established during the
design phase.
Progression
1. Visual Design and Transition
Welcome pages
|
fig 1 - welcome pages
|
I've added the Logo on the first page and then along with the welcome page
a doodle with the magenta colour paring with the theme and also a slogan
above as an inspiration message.
Log in, Sign Up, Forgot Password and Set up Face ID & Password pages
|
fig 2 - overview of login, signup, forgot password and setup
pages
|
|
|
fig 3 - added in the "continue as guests"
|
Well basically for these pages, I just added in colours and changed the
type, and added in logos too. Nothing much changes. The only thing I've
amended and added in is the "continue as guest" thing suggested from last
usability testing.
Onboard and Get Started pages
|
fig 4 - onboard and get started pages
|
For these pages, I've added in more illustrations to make the app more
into the style that I wanted to be. Providing users with a fresh look
and aesthetic pleasant visuals that will attract them. I've also added
the header and footer in border with the fill of soft pink to
differentiate it from the calendar while users scrolling.
Home pages
|
fig 5.1 - overview of homepage and its subpages
|
|
fig 5.2 - adjusting navi bar
|
In designing the home page, to be honest, it's a love hate
relationship. There're alot of elements and navi bar are to be
amended and rethink on how to place the design elements.
|
|
fig 5.3 - categorised symptoms and added in icons
|
|
With the feedback received on usability testing, I've done on separating
them and locate them into section where they belong. Graphic icons which
are related are also added in. It took me quite some time to figure how
should the icon looks like so that it's matching with the name. Anyways,
I did it and I am very satisfied for the outcome of this.
|
|
fig 5.4 - refinement of buttons
|
|
Besides, I've also made changes and added the drop shadow effect in Figma
for all the buttons in each pages. So that they look alive and are more
contrast which will be more likely to catch user's eyesight.
Calendar pages
|
|
fig 6.1 - overview of calendar
|
|
On this section, the most struggling part is the "add note" for period. As
a lot of icons need to be added and before adding in, I need to think of
what kind of icons should look like to match with its title, so ya.
|
|
fig 6.2 - creating shadows for the switch toggle
|
|
|
|
fig 6.3 - creating animation and transitions for
it
|
|
To make the toggle more alive, I've added shadows inner of the grey part
and outer of the magenta part, so they really looks like an alive toggle.
Then, transitions and smart animation were added, so they looks smooth
when clicking and switching frames.
|
fig 6.4 - transitions of toggle outcome
|
Self Care pages
For this part, basically it's just finding related pics and add into the
frame then adding its title too. Finding pics that shares the same colour
scheme and also are in topic was actually quite challenging.However, I
think the saddest part of this project is that I missed out the
interaction of health resources, that all the frames aren't alive, they're
just a dead frames with image and title. This was due to time restriction
and I couldn't get them to be done.
Profile and Settings pages
In the profile and settings page, iconography I've used are more
simplified in abstract forms compared with the symptoms as I think when
you entered this page will get into a more cautious and alert mode, so ya.
|
|
fig 9 - overview of high fidelity prototype
|
|
2. Functionality and Navigation
Last but not least, I correct several flow lines that were messed up
throughout the editing process by reconnecting them to the appropriate
pages. It is clear from looking at these twisted lines that there is a
lot of labour involved:) Gosh, this took so long to complete since I
frequently had to go back to the same location to reconnect it after
connecting it incorrectly the first time.
|
fig 10 - overview of user flow
|
Then, using ease in/out or transition effects, I made sure the
transitions between each page switch were quite seamless.
3. Usability Testing
It's finally countdown to finish this project!! I've been using the
same scenario as the low-fi one to see if the user flow in usability
testing would have had any changes. And with visual and colour
added, it seems to be much more better with clarity in app.
|
fig 11 - scenario 1
|
|
fig 12 - scenario 2
|
Brief summary of usability testing
-
With colours and visual elements added, the app design is
very feminist. and it gives a next level of user
experience.
-
The "Self Care" page would be better if have interactions
added and make widgets clickable.
-
Better and easier to view with the symptoms being categorised
in sections which they belongs.
From the usability testing, users are very satisfied with the
outcome of the apps, regarding to its designs, illustrations,
buttons and iconographies. However, there's an common issue that was
mentioned by few users during the play test which is that the "self
care" page could be nicer if there're interactions in it.
Design refinement that can be done (if have more time hehe
-
Could make the "self care" page widgets alive by adding
subpages to them.
Final outcome of Task 4: High Fidelity Prototype
Reflection
A major turning point in my learning process was reached when I finished the last objective, which was to design the high-fidelity wireframe for the Period Tracker App. I appreciate the knowledge and abilities I have gained throughout the course since they have given me significant insights into the world of user interface and user experience design. The process of creating the period tracker app has been enjoyable and hard. I have a deeper grasp of the value of putting consumers at the centre of the design process after performing user research and learning about the needs and preferences of the target audience. By developing user personas, I was able to relate to potential users and customise the app's features and interactions to suit their special needs.
In addition, creating low-fidelity wireframes taught me a lot about the architecture and flow of the app. I learned the value of a clear information hierarchy, straightforward navigation, and efficient layout design. I was able to test out many concepts and refine the design using the wireframes to come up with the most user-friendly options. It was a fun challenge to upgrade those low-fidelity wireframes to high-fidelity. I developed my visual design abilities by selecting colour palettes, fonts, and iconography that complemented the app's brand identity. I made sure that the app's graphic components not only had a good aesthetic appearance but also enhanced the user's enjoyment.
I gained an understanding of the value of feedback and the significance of iterative design throughout this project. Measuring the usability of my designs on actual users allowed me to confirm my design choices and identify areas for improvement. Observing how users interacted with the app and offered helpful suggestions that shaped the final design was a humble experience. Peer collaboration and getting input from my lecturers were both extremely important to my development as a UI/UX designer. It showed me the value of being receptive to constructive criticism and working tirelessly to improve my work.
I feel a sense of satisfaction when I finish this topic and am excited about what is to come. I am now prepared to take on more difficult design problems in the future thanks to the information and abilities I have acquired. I'm excited to put my abilities to use on actual projects and help develop user-centered, significant digital experiences. As a UI/UX student, I am aware that this is only the start of my adventure, and I can't wait to keep learning and developing in this always changing industry. I am appreciative of the advice and assistance I have gotten throughout this subject and am eager to take the following steps in my design education and profession.
Comments
Post a Comment