🍗 Moodboard

<aside> 💡 Keywords: Customized, 2D & 3D mixed, pop color

Final design components:

Design Components

</aside>

https://www.figma.com/file/AFwvxbeDMgwOgkLiOz9fug/RMIT-UX%2FUI---Team-Name---A2?node-id=4%3A104&t=13eQANYmV09uuorD-1

🍗 Mascot

1. 3D model: We want to attract users by the aesthetics & the language, so a representative mascot would be a good character to help us with that

The process:

[Mascot Model](<https://giangnguyenrmit.notion.site/Mascot-Model-9c2aa450bb644340ae060a03c5fa8826>)

1. Logo:

First State

• From the beginning of our logo making process, we want to make the logo only in 2D. The reason why because we can add more detail in 2D logo, easier for people to recognize our brand, etc.
• However, if we compare between the first logo and our app’s aesthetic, the logo is a little bit astray away BillsKeeper
• One more thing, our logo is in line art style and we are afraid if the phone maybe too small that cause the user hard to see and recognize our app’s logo

Second State

• For the second state, we make our logo in 3D style in Blender to see if our logo is better. To be honest, it is better but to compare with our app, it is still a little bit off for the aesthetic.
• Besides, the biggest thing that we don’t want to use this logo because we struggle a lot of how to make the user can recognize the paper bill in 3D model.

Third State

• For the last state, also our final logo design, we really like it. If we build our logo in this way, we can introduce our cute mascot ‘Biu’ easier to many people, even though people who did not download the app yet.
• When we look at Duolingo, their logo is also their main mascot. We also want the user can recognize us when they look at our mascot.
• This logo fit so much better with our overall app’s aesthetic.

🍗 Interface

1. Redo the icons: We wanted to have our own icon set so we drew them ourselves and went through many changes.

The process:

[Redo the Icons](<https://giangnguyenrmit.notion.site/Redo-the-Icons-26ca58e3701145d3ba8bbda615167172>)

1. Decide the design style: We started pretty soon with the design style & theme, and stuck with it til Week 10.

   

   The color shades & contrast made it hard to use white and gradient in this design. So right after the Prototype testing section, we changed our design entirely along with the structure of the app.

   Instead showing big categories on the main page, we changed to more detailed grouping (by #hashtag), which affected our all other pages.

   The main sections at the Navigation Bar also changed almost everyday because we were struggled to know which sections people would need to be the easiest to enter.

   

   Our team went to school almost every day to sit back and do everything together in the last week before deadline so we didn’t screenshot most of our design versions because they just changed after some minutes. But here are some small proofs from our Messenger group when we fixed things on Thursday night of W11: