Application Design 1 - Project 4: High Fidelity App Design Prototype
01.12.2024 - 12.01.2025
Michael Chan Henn Loong / 0363611
Application Design 1 / BA of Design (HONS) in Creative Media / Taylor's
University
Task 4: High Fidelity App Design Prototype
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1oEodTetpqo1R-aXdpL4tunCs9mnfk8rO/preview"
width="640" height="480" allow="autoplay"></iframe>
TASK 4: HIGH FIDELITY APP DESIGN PROTOTYPE
In this final task we are to use all the knowledge we've learned throughout
the semester for this application in task 4. We are tasked to create our own
assets and further improve and refine the lo-fi prototype into a complete
visual redesigned app.
So I started with the onboarding page as Mr. Zeon gave me suggestions on
having one to introduce steam to the users. So I took a picture of my steam
library and edit the colors a little bit and inserted it into the loading page
at first then into the welcoming onboarding page. The reason I kept the
onboarding page simple is that its easier for users to read the words and know
what are the main core functions of the app and what they can be using them
for. I've also asked user 2 and 3 who tested out the Lo-fi prototype like
whether they'd like to have an image background onboarding or a simple one as
shown in fig 1.0 and both of them said to have the simple one so it's easier
to read the words.
.png)
Fig 1.0 Onboarding Page
After the onboarding page I started to work on the home page. Since I'll be
using the scrolling method to show what content I have in my home page, so I
went to google the games that came to my mind and inserted them into the
frame.
Fig 1.1 Home Page High Fidelity
Fig 1.2 Home Page Figma Prototype
I actually played around with the layout for a few times while trying out
different compositions and noticed that only this one feels the best and most
comfortable. It's not complicated and consist of all the important elements
that a home page should have.
After that I did the search page, search result and game description page I'm
not really sure what to call this page so I named it Game des but it's
actually the page where you get to after you pressed into one of the game in
the search result.
.png)
Fig 1.3 Search, Search result and Game Des
Fig 1.4 Figma Search, Search result and Game Des
After inserting the images I noticed that I had a lot of fun doing this page,
it felt exciting and fun making this page not sure why but I enjoyed it a lot.
I was thinking really hard at the start of the designing phase as there's a
lot of content to put in so it was pretty difficult at first but due to the
scrolling element I need to put almost everything in the same frame. After
successfully doing the page I felt happy even though it was hard at first but
its fun.
I've also added in the payment failure as mentioned in user 1 feedback in the
Lo-fi prototype and also the bucket function as shown in Fig 1.5 below the one
on the most left.
.png)
Fig 1.5 Busket, Payment, Payment Successful, Payment Fail
When I'm done with the payments and stuff I started with the additional,
profiles, library, market, etc. The hi fi of these pages are as shown below.
.png)
Fig 1.6 Additional, Market, Library, Profile, Chat, Notification
So when I'm dealing with these pages it's actually not that hard and
complicated as I've already got the solutions on how to make the scrollable
page when I'm doing the Game des page, so it does take a while to finish these
but no big problems are faces during the process.
Lastly its the biometric function, code sign in and sign in failure shown
below
.png)
Fig 1.7 Sign in failure , Bio metric and Code sign in
Link to Figma File:
Fig 1.8 Figma Hight Fidelity
Link to Figma Prototype:
Fig 1.9 Figma High Fidelity Prototype
REFLECTION
I can’t even describe the relief I felt when I finally finished this assignment. It’s been such a long process, but honestly, the timeframe was so short with all the modules I'm having this semester that it felt like a mad rush. Just like with the last project, I realized that watching YouTube tutorials really helped me get things done while learning a lot along the way. I also improved my prototype by listening to feedback and making changes, though for this project, it was just small tweaks here and there. I’m just so glad I can finally submit it. This semester has been super exhausting, but I’m still really proud of what I managed to achieve.
.png)
Comments
Post a Comment