Application Design II / Project 1
25/09/2024 - 20/10/24 / Week 1 - Week 4
Iman binti Kamarudin / 0364014
Application Design II / Bachelors of Design (Hons) in Creative Media
Iman binti Kamarudin / 0364014
Application Design II / Bachelors of Design (Hons) in Creative Media
Project 1: Self-Evaluation and Reflection
.jpeg)
I also found that even the smallest details even matter. Almost half of the
things I changed/amended I didn't even notice could cause a problem until now.
Though I know that even now there is still things I can improve, I feel a bit
better about what I've designed for this task.
.jpeg)
INSTRUCTIONS
TASK 1
For our first task, we have to self-evaluate our app redesign that we made
in the previous semester. The app that I redesign was for Wattpad and I
prioritised consistency and enhanced user engagement on the app.
PROTOTYPE
Below is my high-fidelity prototype from last semester.
This reflection is going to be focused on the main pages as they are the
areas with most traffic. The main pages consist of the;
1. Homepage
2. Search page
3. Library page
4. Writing page
5. Account page
Here is my personal reflection on the general aspects of the app
redesign.
Typography
The font size is a bit too small and unreadable from afar.
Onboarding
Since there is no onboarding pages, new users could get lost and feel
like there is a lack of guidance/direction.
Filters
Filter functions were not implemented and the search page is lacking in
further sub-sections that can help improve user experience (searching
for reading list, users etc.)
HOMEPAGE
Fig 1.1 - Homepage Design
I asked Mr. Shamsul for his feedback on my app. He mentioned that there
should be labels on the navigation bar at the bottom since the icons could
struggle figuring out what each icon means. The icon for the library
should be a stack of books as that is the most universally recognised
symbol for libraries.
Fig 1.2 - Bottom Navigation Bar
He also stated that the size of the buttons are too small and look similar
to tags. A suggestion was to change the tags to a square or underline
them.
Fig 1.3 - Browse Carousells
Fig 1.4 - Book Tag Display
I was also advised to ask for feedback from Claude AI to see what it
personally thinks could be improved in my design. From Claude's analysis;
Fig 1.5 - Claude AI Homepage Analysis #1
I asked for Claude to re-evaluate the analysis with new information that
the book covers are in carousells.
Fig 1.6 - Claude AI Homepage Analysis #2
In summary, some areas to improve/suggestions in my redesign are;
1. Add visual cues to hint at users that they can scroll the
carousells
While I agree with this suggestion and could add a small arrow or slider
near the carousells, I feel like it would make the carousells look more
cluttered and since the most important information is the text I don't
want to distract users away from it.
2. Label how many books are in the carousell
I'll experiment with this and add it in if it doesn't clutter the page
with too much information.
3. Consider adding a 'view all' button to be able to easily look at
all the books in the carousell
This can help enhance the user experience so I could make it look
similar to the library page by just displaying the cover of the books
when users select 'view all'.
4. Change tag display
Make it look less like a button by changing the shape/display of it.
5. Change library icon
Switch the icon for the library page to a stack of books so that it is
more recognisable to users.
SEARCH PAGE
Fig 2.1 - Search Page Design
My self evaluation:
1. Lack of visual interest
The page is very barebones. Even though in the original app the graphics
were irrelevant to the categories, it provided color and interest to the
screen. More colors or simple, related graphics could help enhance the
visual aesthetics.
From Claude's analysis;
1. Very basic and doesn’t feature any of Wattpad’s brand elements
Add visual elements to make it more interesting to look at, consider
adding brand colors or illustrations to make it more unique and
recognisable.
2. No ‘recently searched’ feature
Could make searching for a specific category harder, consider listing
them in alphabetical order
3. Background color of the buttons is too light
Should provide more contrast to the page for easier reading.
LIBRARY (+SUB SECTIONS)
Fig 3.1 - Library Design
My self evaluation:
1. Straightforward design
I feel as though the design stays true to the original app but features
more useful sub-sections and also a filter/sort function that was
lacking.
2. Spacing issue
There is a lack of space between the bottom and top of the book covers
that makes the page look slightly clutttered. Additionally, the font is
a bit too bold and weighs down your eyes.
3. Unclear button
The button on the top right is not very visible and doesn't tell you
right away what page it will take you to. By changing the icon or the
coloring, it could change user's perceptions of its function.
From Claude's analysis;
1. Button to sort/filter library is not visible
Scale up the button to be more visible.
The other points that Claude made (about sorting books into folders
etc.) were already addressed within other pages/features so I
disregarded them.
WRITE PAGE
Fig 4.1 - Writing Page Design
My self evaluation:
1. Clean and simple design
2. More useful features
A feature like sorting your stories could be helpful for users who have
written a lot of books.
From Claude's analysis;
1. No way to add stories into folders/categories
Adding this feature could improve user's experience and provide users
with more control over their writing page/process.
2. Add sorting/filtering options within the page
Make it easier for users to sort/browse through the books that they've
written.
ACCOUNT
Fig 5.1 - Account Page Design
My self evaluation:
1. Informative and interesting design
I'm quite satisfied with how the account page looks. I feel like the
layout is simple but true to Wattpad's current app design and with the
profile picture being the main focus, the account page looks more
personal and customised to each user even though they can only control
what profile picture is displayed.
2. Messy title layout
For longer titles, the way it's displayed when users scroll to it is
very awkward and seems like it's squeezed in its place. If the other
books in the carousell (which are not being actively viewed) had their
titles hidden until users scrolled onto it, it could provide more space
and less clutter/information.
From Claude's analysis;
1. Unclear icons
The icons in the top right corner aren’t instantly recogmisable as to
what page it will lead users to.
2. No clear way to edit profile information
3. Limited visibiltity
Implement a ‘see all’ button to view all the works in the profile at
once.
4. Lack of contrast
SUMMARY
A list of things that I’d like to rework/add for my app are;
1. Typography and font size
2. Add onboarding pages
3. Fix tag display
4. Experiment with carousell design so title is not cut off
5. Swap library icon
6. Add relevant graphics/colours to the category buttons + more contrast
7. Fix spacing between books
8. Make the saved quotes button and filter button more clear and
recognisable
9. Add filter button to the writing page
10. Make edit button more visible
REVISED DESIGNS
With the evaluation done, I proceeded to amend the issues with the design
in Figma. Click
HERE
for the Figma link.
ONBOARDING
I created 3 frames for the onboarding. The descriptions were copied over
from Wattpad's existing onboarding pages and I added illustrations to
convey the points more clearly as well as bringing visual interest to the
pages.
Fig 6.1 - Onboarding Pages
HOMEPAGE
In the homepage, I adjusted the carousell design slightly by deleting the
titles for books that are not being actively viewed and changing the
design of the tags to a sharp rectangle. I also added a graphic from
an old Wattpad illustration to act as a background for more contrast in
the top section of the page.
Fig 6.2 - Old vs New Homepage
SEARCH PAGE
I added the same graphic from the homepage and brought the exposure down
so it would have more contrast against the text. I cropped the picture so
that it would look slightly different for every other category yet still
be consistent. For the "Wattpad Originals" button, I made it look
different from the other categories so that Wattpad's branding would stand
out more.
Fig 6.3 - Old vs New Search Page
LIBRARY
I adjusted the space between the books so that it wouldn't look so
cluttered and also changed the icon for the filter to a funnel-like icon.
Furthermore, I made the saved quotes button in the top right more visible
by changing the color and rounding the corners out so it would look like
the other icons/buttons. The library icon in the navigation was also
switched out so it would look more recognisable.
Fig 6.4 - Old vs New Library
WRITE PAGE
For the writing page, I added the filter icon so users can sort and filter
their written books according to how they want and also added the same
graphic in the search page as the background for the "Continue Writing"
section at the top for more visual interest and consistency.
Fig 6.5 - Old vs New Write Page
ACCOUNT PAGE
In the account page, I moved the edit profile button to the top left and added a label so it would be more clear. I also changed the carousell design so the title would be fully displayed.
In the account page, I moved the edit profile button to the top left and added a label so it would be more clear. I also changed the carousell design so the title would be fully displayed.
Fig 6.6 - Old vs New Account Page
FEEDBACK
Week 5
Specific Feedback - Designs are improved compared to the old one.
Make navigation icons smaller and add titles underneath for clearer
understanding.
REFLECTION
This task was a good practice for me to evaluate my work and remind
myself that I could always go back and fix things that I have an issue
with. I feel like since I've been in this course I have experienced
cases where I am not completely satisfied with my work (one of them
being this project in the previous semester) and since it had been
handed up for evaluation, I couldn't ever go back and improve it because
it was over. However, that's not always the case. There is always time
for me to make myself feel better about my previous work, all I have to
do is actually get myself to start working on it again.
Comments
Post a Comment