Application Design / Project 3

31.10.2022 - 21.11.2022 (Week 10 - Week 13)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Application Design / Taylor's University 
Project 3 : Lo-Fi Prototype

---

LIST

• Instructions
• Progression
• Feedbacks
• Reflection

OTHER POST:

• Application Design / Project 1
• Application Design / Project 2
• Application Design / Project 3
• Application Design / Final Project
• Application Design / Final Compilation and Reflection

---

INSTRUCTIONS
<back to top>

fig 1.1, Module Information Booklet of Application Design

High fidelity prototype. Submit your final link of your figma/XD and your blog link.

PROGRESSION

<back to top>

WEEK 10 (31/10/2022):

Mr. Shamsul agreed on my UI Styleguides, I can start on making the wireframe, which later be tested on 3 people to see whether it's better than the previous app or not. I started to create the wireframe based on my proposal sketch. I follow certain elements I wrote in the UI Styleguides, example; the space and font sizing, to make a uniformity.

First, I created the main interface page, the income and expense window, after I finisih the interface, I make the wireframe to see whether it works or not.

fig 2.10 Previous Feedbacks, Week 10 (31/10/2022)

Moving forward to the calculator part, I follow Monny's default calculator, just remaking the model.

fig 2.11 Previous feedbacks Week 10 (31/10/2022)

Then, I make the calendar, which I refer back from my UI Styleguides.

fig 2.12 UI Style guidelines, Week 10 (31/10/2022)

WEEK 11 (07/11/2022):

Mr. Shamsul gave me some feedbacks on my prototype, as can be seen on feedback. Some elements are needed to be change. First, I started with doing the smallest thing, replacing the arrow button.

Then, I moved forward to make the add-choose expense/income window. I planned to just make it simple, plain blurry background with buttons of choice.

fig 2.13 Adding window, Week 11 (07/11/2022)

Then, I move on with the calculator, I refer to android's as recommended by Mr. Shamsul.

fig 2.14 Samsung calculator layout, Week 11 (07/11/2022)

I add scrolling effect for the choice of categories, so it'll be easier. Then, I remembered that Mr. Shamsul recommend me to put description below the icons, so I add it.

fig 2.15 Content Description, Week 11 (07/11/2022)

Moving on to replacing the column of the first page with lines as preferred.

fig 2.16 Changing column to Line, Week 11 (07/11/2022)

After that, I started to continue with my wireframing, from the add input window, hamburger menu, to the challenges.

fig 2.17 Lo-Fi Prototype Preview, Week 11 (07/11/2022)

I also created the script which later I made for the User Testing. The keypoint I made for this prototype was testing the main feature of Monny, and the challenge feature which is one of the Monny's MVP. Thus I only created task on how to check balance (because the original app has problem with the income - expense window), to add money, until ended with challenge feature that have been improvised.

Thus, this is the task I'm preparing for the User Testing:

fig 2.18 User Testing Scenario, Week 11 (07/11/2022)

To make it not boring and burdening the subjects of the user testing, I created a story/script for the user testing.

fig 2.19 User Testing Script, Week 11 (07/11/2022)

WEEK 11 (07/11/2022) - WEEK 12 (14/11/2022)::

Thus from that, I conducted user testing to some people following the targeted user, and here are the results: (for proof of time and video can check here.)

The results are:

fig 2.20 User Testing Result, Week 11 (07/11/2022)

So from the test conducted, most users feel better with the new interface and it's introduce a faster and simpler way with more modern design for the user to use. But then, they still have pain points. The pain points that can be noticed are:

• "No desc in my money shortcut"
• Too small text for category, maybe make it 4 is better

Other than that there are some additional features can be improved:

• Add expression animation on the My Monny
• Add intro page

Thus I came out with fixing the pain points first and test it again in some users (User testing 4-6). From that, it can be concluded that the current prototype are more efficient and understandable by the users.

So, this is my final lo-fi prototype:

fig 2.21 Final Lo-Fi Prototype, Week 11 (07/11/2022)

Scripted task:

1. Open income
2. Open 9 Nov, check income
3. Add expense, click the (+) button
4. Choose expense
5. Input 5
6. Input 0
7. Scroll category until tax
8. Click on date
9. Add 10/10/2022
10. Ok
11. Open hamburger menu
12. Go to quest
13. Click on the new updated progress (press circle with notification)
14. Select Claim
15. Go to My Monny (bottom right)
16. Click on wear
17. All done!

---

FEEDBACKS 

<back to top>

WEEK 13 (21/11/2022): 

Can proceed to hi-fi

---

REFLECTION 

<back to top>

Doing the wireframes seems interesting and lots of fun for me. I feel like I'm not in the wrong course, and I feel relieved and proud of it. The challenge for me in doing the wireframe is how to maintain focus and interactivity, because lo-fi prototype mustn't require color and lots of graphics which make it so plain.

Another thing to reflect on, I need to learn more about creating components, because, what am I doing now is that I create everything manually