Melodee
![](images/melodee project header.png)
Introduction
This project case is about making a simple mobile app that provides music album transaction for users. The company that wants to create Melodee needs a design to rely on when creating the app. So the first step in this project is to make the mobile app prototype and I used Axure RP 9 to help me and my team create the prototype. The app contains 5 main pages such as login page, home page, album page, album detail page, and about us. Since it's a simple app and only have about 5 pages (1 login page and 4 main page), it would be good to make use of bottom navigation bar to navigate all pages. 1 button for home page, 1 for albums page, 1 for about us page, and 1 for log out. The color theme that my team pick was dark theme so it won't hurt the user's eye much.
![](images/melodee project intro.png)
Prototyping
![](images/melodee project prototyping.png)
In the protoyping phase, we didn't face much problem with designing the pages and the app flow since I can say that myself is pretty skillful in using Axure RP 9. Making validations, image carousel, data repeater, tabs and such was not a big deal to us. But we did faced a technical problem when using Axure Cloud to collaborate. There's somekind of a bug that makes all of us can't edit the prototype because an account of my teammate was stuck while opening all pages. She tried reopening the Axure but nothing works. As a result, I have to migrate the project into a new project file so we can continue the making of the prototype.
Implementation
![](images/melodee login.png)
![](images/melodee home.jpg)
![](images/melodee album.jpg)
![](images/melodee album detail.jpg)
![](images/melodee about us info.jpg)
![](images/melodee about us map.jpg)
The implementation part was the hardest part, which is making the real application based on the prototype we have made using Android Studio in Java Language. The language itself is not considered as the problem. The real problem is it's not that easy to make features that we have created on the prototype. Making image carousel, data repeater, and even tabs was pretty much a challenge for us because it was our first time creating an android application. And since we were using constraint layout as the layout of the app, we encountered a different appearance of the app layout when we use different devices. We don't know how to fix it so we let it pass for the project.