Application Design I - Task 4

13/12/25 - 02/01/26 ( Week 12 - Week 15 )
Application Design / Bachelors of Design in Creative Media / Taylor's University
Task 4 - High-Fidelity
Carren Yeliandi / 0376990

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Feedbacks

4. Reflections

Lectures

Week 13 - Monetization & Gamification

In week 13, We learned about Monetization and Gamification. Monetization is how an revenues can be earned from a product or service (Ex. Advertisement, Sponsors ; etc) while Gamification is how game elements are added in order to boost users engagement (Ex. Leaderboard, Points; etc).

Week 14 - Christmas

In week 14, There was no class due to Christmas Break.

Week 15 - Portfolio

In week 15, We learned regarding Portfolio which is important as it is what the company will be looking at during recruitment and shows what you're capable of as well as what they'll expect from you. A portfolio should contain :

Intro (What is the project ?)
Context (Why is it important ?)
Specs (Tools, timelines and limitations)
Demo (How it works)
Features (What it does)
Choices (Rationale)
Results (Success metrics and impacts)
CTA (Contact the author)

BACK TO TABLE OF CONTENTS

Instructions

I had showed my low fidelity and expressed my thoughts to the lecturer to gain some insight on what should be done to it before proceeding to coloring it and putting any images to it. Here I basically was asked to experiment on different types of layout and choose one that I think would suit it best. The lecturer also suggested for me to add something like a quests so that the user will withdraw their cashbacks much later.

Fig 2.1. Low Fidelity (Week 12 | 12/12/25)

I started to adjust the low fidelity and try out different layout, using multiple references while I'm at it. For the Homepage, I used Shopee as a reference to make another layout. I then had to choose between a "Balance" heavy layout and a "Promo" heavy layout. In the end, I had decided to go with the "Promo" Heavy layout as I felt that it looks more suitable for an app that offers cashback and encourage users to purchase items using that cashback.

Fig 2.2. Balance vs Promo Home page (Week 13 | 23/12/25)

I had also decided to change the category as I felt that it's too big just for it to show category options, if there are more options than the prototype, the user will definitely be overwhelmed with the size.

Fig 2.3. Category page improvement (Week 14 | 23/12/25)

Even after fixing that, I still felt a bit unsatisfied with it but I left it alone for now to fix the other parts of the app. I added some additional context details in the overlay so that the user know what they are actually doing when after each overlay. I then went back to the category but this time decided to make them square instead since I'm planning to use images as the background so it's more suitable if it's square and it'll fit better. I then proceeded to make what it looks like inside the category as well, adding a side navigation bar for easy category switch.

Fig 2.4. Inside the Category page (Week 14 | 25/12/25)

Before I proceeded to color it, I didn't forget to add some quests to encourage user to withdraw their cashback much later with the promise of a sum of interest if they reach a certain amount of cashbacks saved.

Fig 2.5. Overall app before coloring and images (Week 14 | 25/12/25)

When choosing the colors, I had ensured to use the Shopback brand color which is this bright reddish orange. I then went to Figma color palette and took it's complementary color to make certain things pop out more but I mostly uses it on things that show progress. I then added the neutral colors, white, grey and black to make the whole app look more cleaner and not overwhelming. However, when looking at the selection, I realized that it's too small of a range especially with how many elements there are in each pages. So I added 2 monochromatic colors, a darker and a lighter one, as a solution to that problem as well as to ensure that the app is not stiff and bland due to the limited use of colors. I then used a figma plugin for stock images and icons to use in the app (Ex. Unsplash for images and Iconify for icons; etc).

Fig 2.6. Overall after coloring and images (Week 14 | 27/12/25)

One thing I forgot to mention is the fact that I sometimes created duplicate pages of the same thing with the only difference is that if they click the back button they'll be lead to different pages. For example for the item page, one item page will lead back to the category page while the other one will lead back to the searched page.

Fig 2.7. Different page, Different origins (Week 14 | 28/12/25)

I had shown my finished app to the lecturer and gained some feedbacks from it. It opened my eyes to see from the customer perspective, making me add small details that would've impacted the user's experiences and trusts. For example for the addition of details regarding the points and cashbacks the users received to make the user know that they did receive the promised benefits and they were in fact not scammed by the app.

I also added more of the complementary blue as there's too little of it in the app, so I used it to highlights recommendations to differentiate them from the other options more as well as some other small elements that I wanted to pop out for example one of the newest thing I added which is quests reminder which will pop up if you are click on the LoyalQuests (Quests that will give you loyalty points) which will lead you to the corresponding page with the reminder.

Fig 2.8. Feedback Changes (Week 15 | 02/01/26)

I also made the balance number in any pages larger to emphasize that this app offers the users cashbacks, the main selling point of the app, s seen by the big number that they first see when they enter the homepage that shows them both the total cashback earns and how much money they have in shopback pay (a form of e-wallet). I also ensured to change the numbers so that it's a slightly more realistic colors. I then added a quick top up button as an extra addition based on one of the feedback given to me.

Fig 2.9. Home page Balance (Week 15 | 03/01/26)

As the last touch, I added 5 simple tutorial screens by manually darkening the background and only highlighting the parts I want to briefly explain using the text bubbles.

Fig 2.10. Tutorial pages (Week 15 | 03/01/26)

Fig 2.11. Overall finished app (Week 15 | 03/01/26)

Figma Lo-Fi Link

Canva Presentation Link

BACK TO TABLE OF CONTENTS

Feedbacks

Week 13 :

Experiment with different layout and decide which one you think might be best. Add some context in the overlay after the user finished doing certain actions to ensure that they know for sure what they did.

Week 14 :

Christmas Break

Week 15 :

After purchase from the quest, where is the details on receiving Cashback and points ? Add a overlay about it (and maybe a whole different version of the prototypes to actually show that something was given), make the cashback more obvious and prominent as it is the main feature of the app.
Points and RM balance should be bigger because it's the most important part.
The balance in the homepage should be more prominent as that's what the user want to see
Add a reminder if the user is going on a quest.
Make the selected item shops choices have a title and make the price and cashback more higher in terms of hierarchy.
The complimentary colors need to either be deleted or be added more.
Add a easy top up feature
Make the number more realistic
Make it easy to judge which product to buy, maybe make the product review under the shop box instead. But with the blue and spacing, this one is good as there is a primary and secondary option. The secondary option can either be drop down or just be there but with spacing

BACK TO TABLE OF CONTENTS

Reflections

I realized that I may have been to ambitious with the amount of features I wanted to add. Just with this much feature in the Hi-Fi already felt more than enough but the other features that I didn’t put it like additional items recommendations before/after the user purchased an item could possibly make the experience better but at the same time might make it too overwhelming as there will be too much features. However, other than that, I did manage to put in the rest of the features in and I’m pretty proud of myself for the result. Though I still have a long way to go since I still think I could insinuate the app purpose more, but with the result as of now is already more than enough and it’s something that I can proudly show to other people.

However if we speak technically, I learned quite a few things in this module. Such as the use of style and scale tool in Figma. It was also quite nice that every steps were explained in each lectures which made it easier for me to understand and proceed with the next steps of the tasks. I do find that making an app is quite simple but hard at the same time, it’s easy to make it but it’s hard to ensure that what the app needs and the user needs to align and ensure that user will actually want to use the app. For example, since the app is a cashback app, I need to emphasize the “Cashback” but for the user, I also need to emphasize what was promised was actually received so that they actually felt that they benefited from using the app and would want to return to the app again. I never though that there was so many things that needs to be thought throughly just to make the prototype. I’m pretty proud of the results so I’ll save this file for my future work portfolio.

Carren Yeliandi (0376990)

Search This Blog