UX Design / Final Project

28.10.2022 - 02.11.2022 (Week 9 - Week 14)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
UX Design / Taylor's University 
Final Project

---

LIST

• Lectures
• Instructions
• Progression
• Reflection

OTHER POST:

• UX Design / Exercises
• UX Design / Final Project
• UX Design / Final Compilation and Reflection
• UX Design / Exercises and Final Project (all in one)

---

LECTURES
<back to top>

WEEK 10 (31/10/2022): User Onboarding

Lecture source:

Chapin, B. (2018, November 1). First Impressions: A Guide to Onboarding UX. Toptal Design Blog. https://www.toptal.com/designers/product-design/guide-to-onboarding-ux

First Impressions: A Guide to Onboarding UX

(*all images source from the website)

User onboarding is basically a process in the start of the app screen that increase the likelihood of the user to use the app. The use of onboarding is very crucial and it helps to decide on whether the new user will use the app or not.

fig 1.1, Onboarding, Week 10 (31/10/2022), source: lecture

TYPES OF ONBOARDING:

• The Nickel Tour

fig 1.2, Nickel Tour Onboarding, Week 10 (31/10/2022), source: lecture

• Coach Marks, Tooltips, and Guidestones

fig 1.3, Coach Mark Onboarding, Week 10 (31/10/2022), source: lecture

• Guided Task Completion

fig 1.4, Guided Task Onboarding, Week 10 (31/10/2022), source: lecture

WHEN TO ONBOARD?

• Out of the Box Onboarding
• Progressive Onboarding
• New Feature Onboarding

PRO - TIPS:

• Make It Quick and Painless
• Make It Repeatable
• Don’t Get Too Personal
• Don’t Rely on Tutorials to Cover for Bad UX
• Onboarding Services

WEEK 14 (02/12/2022): "5 Laws of UX Design"

There are 5 basic law that if we follow, can help us to create a design with great UX:

fig 1.5, Summary of 5 UX Design, Week 15 (08/12/2022)

---

INSTRUCTIONS
<back to top>

fig 2.1, Module Information Booklet of User Experience

fig 2.2, Timeline of User Experience Module

Final Project:

We are divided into several group of 3-4 thus later will start to redesign our chosen app covering from the onboarding until the wireframes of certain feature.

PROGRESSION

<back to top>

Week 9 (28/10/2022)

After being briefed by the Final Project, we were divided into several groups, which later we would decide on whose application is going to be used.

I was put into Group 1, which I am in a group with my other 2 colleague, Luisa Audrey and Syarafina. The day after class, we decided to go on a group meeting to decide whose application is chosen. Each of us started to present our work, Luisa with Elisi, Syarafina with her Apple TV app, and me with Monny, my finance tracker app.

fig 3.1, each of our presentation (Apple TV and Elisi), Week 9 (29/10/2022)

Syarafina and Luisa both agree on using my application, Monny. The reason is because Monny have less pages than other apps, and Monny has lots of potential to be used. The app is unique, it offers money tracking with various challenge and currencies, but at the same time it lacks in both the User Interface and User Experience.

After we decided, I introduced them more about Monny, all the (+)/(-) of the app, the interfaces, and others. I'm showing my Miro board:

fig 3.2, Miro Board of Monny, Week 9 (29/10/2022)

We targeted on creating the wireframe by next week. We divided on who's going to work which part, mine is "home" and "data center," Luisa is settings and My Monny, and Syarafina will go for Account and Quest, from my previous hamburger menu sketch. Thus, here're my part:

At the same pace with the Application Design project, I started to create the main screen, the home, I created based on my previous sketch. After I finish, I started to create the "data center" part. The original app put the choices in rows, which I felt that way isn't really efficient, thus I came up with the idea of making the choices into image icons.

fig 3.3, My Part, Week 10 (29/10/2022)

Week 10 (04/11/2022)

Sir Hafiz confirmed on what app each groups are using. After that, Sir Hafiz taught us about the onboarding part.

Week 11 (07/11/2022)

At the meeting time with Mr. Hafiz, we were asked on about the app. Since one of the member, Syara couldn't come, Luisa and me presented about the app, from how it works, what are the pain points and what's the challenge, as written in my Miro. Then, we were briefed on our next steps, finishing onboarding, and wireframes by next week.

We scheduled our next meeting, 

Thus, we decided to do another Discord meeting to discuss about the project furthermore. We show each other the screen we did. This is Luisa's part:

fig 3.4, Luisa's part, Week 10 (04/11/2022)

Syarafina didn't do her part. But then after we discussed this, then we decided to see the MVP of the Monny's since if following this hamburger menu, it didn't cover up through all the screens. So after we broke down the MVP we came up with these:

fig 3.5, Monny's MVP, Week 11 (10/11/2022)

We decided to create new job to do;

• Expense Tracker and Flexible Currency will be held by Syara
• Challenges and Budget History will be held by me
• Recurring Mode and Multiple Accounts will be held by Luisa

Syara volunteered on doing the onboarding, since she's experienced in that.

For the challenge part, I decided to reuse the feature that I used on Application Design:

fig 3.6, Challenge feature, Week 11 (10/11/2022)

For the budget history, I decided to go with something like this, because in the original app we can't know easily which one we have done, which one is for this month, thus I make something clearer. Also, in the fig 3.7(left) the original app has no (+) button. To add that, we need to access it from Home Screen, which is not efficient enough in my opinion, thus I add a (+) button:

fig 3.7, budget history feature, Week 11 (10/11/2022)

Week 12 (14/11/2022): 

Today is the next consultation day with sir Hafiz. We haven't finish our onboarding which is Syara's part, thus, we just show our interface for the wireframe. She thought it's not due that day. So, we basically have nothing to show, except the wireframes.

Sir Hafiz recommended that if we came up to the home screen the first thing that we saw are the spending we did, so we need to recreate the interface because the style from my application is a bit different. So I came up with these:

fig 3.8, homepage, Week 12 (14/11/2022)

We continuing on doing each of our parts.

Week 13 (21/11/2022): no class - election

There's a reminder on Google Classroom about the submission. The notification said 28/11 is our submission. Thus we panicked, and asked sir, he clarified that the submission is due on 2/12, after the presentation. We are relieved. But still, we still have a lot to do. 

First of all we need to finish up with the wireframes. Mine was already finished, and Luisa did some for her part. I haven't seen Syara's.

After that, me and Luisa discussed on the questions to ask, since Syara will focus on the onboarding. We came up with these questions:

fig 3.9, questions, Week 11 (21/12/2022)

I saw on the XD when I was checking on the works we did, she did her onboarding:

fig 3.10, onboarding, Week 14 (28/12/2022)

I feel it's neat and clean, it delivers the features of Monny. But I was expecting more... I imagine if it was like a guidance, using the Coach Marks, Tooltips, or Guidestones, but it's okay we don't have much time left, thus I add this since Monny can't could save, it only can backup to Google Drive:

fig 3.11, onboarding 2, Week 14 (28/12/2022)

I saw that Luisa did her part:

fig 3.12, Luisa's part, Week 14 (28/12/2022)

While waiting for Syara' part to be done, I tried to finish the Notion submission. 

fig 3.13, Notion, Week 14 (30/14/2022)

After that I saw Syara finally finished her part also, because she thought I'm doing the home part.

fig 3.14, Syara's part, Week 14 (01/14/2022)

Finally I get to see the feature we have and the buttons that can work, thus, I suggested to Luisa that we made the specific version of the questions, and we came up with these:

fig 3.15, User Testing Question, Week 14 (01/14/2022)

After we finish each of our part, we crosschecked whether everything is fine. Everything is fine, except Syara's part because she forget to add the preview of the (+) button, thus she copied from Luisa's and made this:

fig 3.16, Syara's part 2, Week 14 (01/14/2022)

After everything is fine, we started to do the User Testing, which we divide into 1 each person and later we summarize together, and here's the result of my user testing:

fig 3.17, my user testing part, Week 14 (01/14/2022)

fig 3.18, Luisa's user testing part, Week 14 (02/14/2022)

fig 3.19, Syara's user testing part, Week 14 (02/14/2022)

From that we can conclude the findings:

From the user testing we conducted, we can conclude that the new design’s UX is way better than the original app, which doesn’t pay attention to small details like for example; the division of the income and expense sections button, the (+) buttons, etc. With the new design, it’s easier for users, especially if they are new user to understand the flow of the app. However, in the new design, minor pain points still need to be fixed in order to enhance the overall UX of the application.

So here are the things that need to be fixed:

fig 3.20, Things needed to be fix, Week 14 (02/14/2022)

After that, we started to fix each of our parts, and this is the outcomes:

• Onboarding

fig 3.21, onboarding part, Week 14 (02/14/2022)

• Finance Tracking

fig 3.22, expense tracker part, Week 14 (02/14/2022)

• Budget History

fig 3.23, expense tracker part, Week 14 (02/14/2022)

I feel like since I have to add the preview of the budget we spent, if I switch the on progress to be on top, the hierarchy will be bit confusing, thus I remain the sequence, and I just add darker shade to make users' attention come straightly to the on progress one. I also add the Monny's ear as a symbol that this one is ongoing now. For the users to know whether they successfully add new budget, I add white rectangle beneath the new plan which later will disappear after 0.8s.

• Recurring Mode

fig 3.24, recurring mode part, Week 14 (02/14/2022)

After getting Sir. Hafiz feedbacks on Week 14, there are several things we need to add, and we decided to divide our task:

• Qualify statements with quotations - Luisa
• Include the original app - Syara
• UX design law - me
• Presentation of the original app vs the new prototype - Luisa
• Pain points -> pointing - me
• Findings - Syara

So I decided to identify the 5 Law of UX that we use compared on the original app:

fig 3.25, 5 law of UX, Week 15 (08/12/2022)

Then I proceed on identifying the pain points of the original app, more detailed than the previous I made.

fig 3.26, Pain Points (detailed ver.), Week 15 (08/12/2022)

FINAL:

• NOTION, Link here

fig 3.27, FINAL NOTION, Week 15 (09/12/2022)

• PRESENTATION SLIDES

fig 3.28, Final Presentation Slides, Week 15 (09/12/2022)

• FINAL PROTOTYPE (XD)

fig 3.29, FINAL PROTOTYPE, Week 15 (09/12/2022)

---

REFLECTION 

<back to top>

It's a fun project, I can experience in working on a team. But what I reflect is we didn't to things on our full capacity since we don't have much time, and maybe it's because me as the app owner / leader lacks in communication. But overall even in short period of time, we did good and I think it's should be fine.