Labels

APPLICATION DESIGN 2 - TASK 1: SELF-EVALUATION AND REFLECTION

Luisa Audrey / 0348741 / Bachelor of Design in Creative Media (UI/UX)
Application Design 2
Task 1
Self-Evaluation and Reflection
LECTURE
INSTRUCTION

Reflection:

This is the high-fidelity prototype that I made in application design 1. Personally, I think there are still lots of things that I can improve such as the login page, the function, and also the rest of the features.

The login page looked pretty odd since it is the only page that is light color and the rest are dark colored. There are also some buttons that are not clickable. This app originally had 5 features and I only created one which is the planner. I wish I could have created more features to enhance the application even more.

I think the color is not the best but I avoided changing it too much since I don't want to change the app identity. here is the original color palette:

The green is personally not my favorite. However, I didn't intend on changing it since it is the color of the app logo, so it carries the brand identity. The main green color that is used for the button was the #00D74E and I think it looked too dark and kind of out of place. 

Things that can be fixed:
- Change the color of the login page so it fits the overall theme better.
- Change some of the UI colors to enhance the readability and overall appeal to the customer
- Add more features
- Make more buttons clickable

Login Page

For the login page, I changed the color of the background from white to dark purple to fit the theme. The original logo app was taken from a screenshot and the quality was not very good.

This time I redownload the logo app that looks more HD and tried to edit it in Photoshop. At first, I realized that the result was not that good. So, I recreated the logo myself in Adobe Illustrator and tried to resemble the original as accurately as I can.

After managing to make the copy of the logo, I changed the background color and also the button color. I changed the overall button color because I think the old green looks too dark and out of place. I also made the logo slightly larger to fill up more space.


Here is the comparison:

Left: old, Right: new



Onboarding Page

I did not make much change to the onboarding because I think it is clear and brief enough for people to understand. I only changed the color of the button and the text to enhance the readability.

Here is the comparison:

Top: old, Bottom: new

Interactivity

In the old version, some of the buttons are not clickable. Here are some changes that I made to enhance the interactivity. As you can see, on top of the main page, there is a workspace button with a dropdown menu that cannot be clicked. It is not clickable and it contains few choices. The function of the workspace button was so that the user can differentiate their needs such as in work, personal life, school, etc. Here is the comparison:


I also noticed that when I made the repeating task, there are indicators in the dates. However, we cannot click on the dates yet. So I decided to fix that so the user can click on the dates that have the repeating task indicator.


UI Button Color Change

As I have mentioned in the reflection, I noticed that the green color looks too dark which makes it look out of place and less appealing. Since there are 3 primary colors for the green, I chose to change the color of the green from #00D74E to #00FE94. I personally think the color looks lighter and less contrasting to the other color which might enhance the user experience.

I also changed the font color from white to dark purple (the same as the background) for better readability. Here is the comparison of the color change on different pages:

Top: old, Bottom: new

Adding Feature

The last thing that I improved was adding a new feature which is notes. The notes of the original app look very confusing as it is merged with the planner. For this one, I planned to separate it so both can have two different functions that specialize on their own. 

The notes that I created are inspired by the "keep notes" app where you can customize the notes but also able to put in a few attachments in it. Just like the planner, the user is also able to choose colors based on what they want. They could also put attachments, drawings, reminders, and also checkboxes.

What's even better is that the note is auto-saved and the user is able to undo and redo it so they don't have to worry about forgetting to save it. Here is what it looks like:


Here is the link to the revised version to try out:

UPDATED VERSION:

During my process of making the second task, I realized that there were many flaws in my old design. Therefore, I decided to make a few changes again. I was not sure whether the design changes that I did was part of task 1 or task 2, but I will just put the process in both blogs anyways.

Firstly, I realized that the notes feature wasn't looking very much appealing. I decided to go look for more references and found a few that I think look pretty interesting. I tried to apply it to my design and this is what the notes feature looks like:


in the old design, I didn't show the layout when there are few notes. This time I showcased how the layout will look with multiple notes inside with multiple variants as well. In the previous design, the color was solid. In this design, I made the color fade into white or gradient. This way it compliments the whole look and theme better.

The inconsistent stacking notes also show variety within the page and I believe it makes it look more interesting. In the previous design, the picture was placed inside with a huge border. I realized that it makes the design look messy so I changed it to borderless.

Since I did not get to design the other feature, I decided to design them as well. Next, I made the habit page:


So how it works is that when you click the plus button, it will lead you to the third page. If you click on the bar indicator, the dates will be highlighted in the calendar. If you click on the arrow button in the corner right, it will lead you to the details (page 4).

On the detail page, you will be able to see the percentage of you completing the habits, reminder, and also the pause button.

Next is the expense tracker page:


In the expense tracker, there are 2 versions. You may see your daily bill and also the statistic per month. The first and second pages are the ones you will see on the statistics layout. The third page is something you will see in your daily bill layout.

For the Statistic, once you click on the "set target", it will lead you to the fourth page where you can set your income and expense target.

When you are on your daily bill page, you may click the plus button and it will lead you to the 5th and 6th pages where you can determine your categories of income and expense.

Next is the diary:


For the diary, I decided to put the calendar weekly so the notes wouldn't be too cramped and the user doesn't need to scroll for too much after putting lots of notes. If you click on the plus button, the 3rd page will appear. On the editing page, you may choose your mood, things you've been up to, time, and also the diary you want to write. 

After you've completed and pressed save, the layout will look like the 2nd and 6th page.

I also decided to add another color palette to make a comparison. 

So here is my old color palette:


And here is the new color palette:


Here are the designs with both color palettes


I tried to ask the people that I know and most of them preferred the first one. They all said that the second one has a more vibrant color and they think it looks good, but they just prefer the first one because the color is more muted and it's easier to view.

So here is the end result:


Here is the Figma file: 


REFLECTION

During my app revision journey, I came to realize that I overlooked many small details. Initially, I wasn't fond of the color palette, but I hesitated to make changes in order to preserve the app's originality. Nevertheless, I decided to alter the shade of green, which, in my opinion, significantly improved the overall look of the app.

While organizing the app, I found the navigation to be reasonably clear. However, I encountered some non-interactive buttons that required modification in the end.

One significant deficiency I noticed was the lack of features. Elisi app was renowned for its multifunctionality as a planner app, but due to time constraints, I could only implement a single feature. Therefore, I made the decision to include an additional feature, namely the note, to enhance the app.
Labels:

Comments

Post a Comment

Popular Posts