Application Design 2 - Task 1: Self-Evaluation and Reflection

25/04/2024 - 16/05/2024 (Week 01 - Week 04)

Wong Khye Qing / 0361000
Application Design 2/ Bachelor of Design (Hons) in Creative Media
Task 1: Self-Evaluation and Reflection

Instructions

Application Design 1 Self-Evaluation & Reflection

Fig 1.0 Final Hi-Fidelity Prototype Wireframe in Figma, Kumpool App

The app that I have made in Application Design 1 is the Kumpool app, its a ride hailing mobile app, similar to the Grab or Uber app. I have managed to change the layout and the design style of it while maintaining its corporate's color. Primarily, the process in making the Hi-Fi prototype did post some difficulties, such as gathering user feedbacks as well as refinement of the Lo-Fi prototype.

It was a completed using the Figma app which is convenient without the usage of any coding. It was also made convenient as we were able to redesign existing mobile apps, which saves a lot of our time in filling in some of the details in the app.

Throughout my previous work on the Kumpool app, I felt I have missed out on some parts of the creating an interface as well as the experience which is the animation part. The animations that were in my previous app have yet to explore more of the possibilities of animations in an app. Besides, coding for a mobile app seems to be a good way to understand more about HTML, CSS, and JavaScript.

However, I was thinking of moving forward from the previous app and move forward to a new mobile app. Although my app is not perfect in any ways, the user flow is somewhere there but requires further improvements. I would like to try brand new things rather than just making amendments toward my pervious app.

About Application Design 2...

With a new idea in mind, I would like to redesign a new app, an Event app, mostly catered for events where users get their tickets from the app verification of their ticket purchase for reference. Alternatively, I would like to have an app that will enable easy access, simple interface, simple purchase or ticketing process.

This assignment's output requires a mobile app with its Minimum Viable Product (MVP), we are to create a user flow as well as focusing mainly on the coordination of animation with the elements and the app interface. We are to create a prototype in Figma as well as coding a mobile app using HTML, CSS, and JavaScript.

App Analysis

There were 5 apps that I have analyzed in order to get a grasp on the interface of an event app and understand their strengths and weaknesses to be integrated or avoided for my own app redesign:

Fig 2.0 App Screenshots, Eventbrite

Eventbrite

This is a quite well-known app that has been used for events as far as I know, it features a modern and simple interface that would certainly match up the style of today's mobile app design style. There are still things to learn from this app even though it is quite a well made app:

Strengths:

Clear and concise layout:
The interface is clean and neat, it's also easy to navigate around the app

Relevant information:
The app shows relevant information about the event that would be important for the user decision making, such as the date, time, event name description and organizers

Related events and interests:
The app also shows the relevant events that are related to the user's preference or interests, which could save the user time and effort in searching for similar events

Ticket system:
The interface has presented the quantity of tickets to be bought as well as the tickets availability to not cause confusion among users that interested in particular ticket type

Weaknesses:

Interface repetitive visuals:
The interface can integrate appealing elements, such as event banners with details this is to make it more attractive and less repetitive
Lack of animations:
More animations could be added in order to enhance the experience while using the app, regular transitions to next page might make appears to make overall experience dull.

Fig 2.1 App Screenshots, Peatix

Peatix

This is also an event app that able to let users buy an event ticket and display it during the event. Tickets bought online can be shown in this app as well with a login.

Strengths:

Clear Information:
Event details were stated clearly before entering for purchasing tickets, with date time and location

Weaknesses:

Busy interface:
The page to show event details might have too many words and seemed to be cluttered with sentences which might make the interface looks intimidating

Bad visual hierarchy:
Elements in the app such as text are not arranged well and looked too uniformed with similar font size and weight, making skimming through the interface hard

Interface spacing:
Overall app interface looks packed especially side margins which could affect the user reading experience

Fig 2.2 App Screenshots, DICE

DICE

This is an event app that could assist in providing any event based on the music artist or genre preferences of the users. It is an music event app to allow music lovers to find their music events that are relevant to them.

Strengths:

Clear and neat interface:
The interface is featured with a modern and clean layout that is visually pleasing

Clear details:
The app also display relevant information of the event details for users to check before purchasing the ticket

Visual hierarchy:
It has a good hierarchy in displaying the important information with bold text, bigger font size or yellow color to enable easier interface skimming

Weaknesses:

Crowded search page:
The search page might be a little too crowded with list of events which might seem to be too intimidating to look at

Fig 2.2 App Screenshots, Fever

Fever

Strengths:

Customization of tickets:
The app enables the user to choose the amount of tickets for purchase, it has buttons that are able to allow users to increase or decrease the ticket amount

Clear details:
The app also display relevant information of the event details for users to check before purchasing the ticket

Weaknesses:

Crowded Information:
The event description in the second page has been extended out, there is no "Read more" button available giving user the option to extend further description if they wanted
Inconsistent Dark Theme Design:
The main page features a dark theme interface design, however most of the pages in the app are light theme interfaces, which might be confusing to the users
Inconsistent spacings:
The Leading spacing is messy throughout the app, the event information features small leading, while the user information features huge leading that is unnecessary

Fig 2.3 App Screenshot, Eventeam

Eventeam

This is an event app specially catered for managing social activities, organizing seminar or webinars. It also offers users to search for paid or free events to purchase tickets.

Strengths:

Categorization of events:
The app provided event categories that could convenient the users in searching for particular events base on their preferences

Clean interface:
This app has a clean interface that is not crowded, it has relatively enough white space for the interface to be "breathable" and easier for navigation

Weaknesses:

Lack of Visual hierarchy:
The contents presented in does not have the right color contrast and text size, they seemed to be too identical, making the identification of important information hard for users. In page 1, date and time are just put into a single line, which did not have any separation, making information harder to be digested.
Grouping of related information:
The information in the app seemed too far apart, the event details in page 3,4 seemed to be far apart, information such as, date, time and mode of event could be grouped together, which they were not in the interface.

Analysis Summarized

Throughout the analysis, the apps I have analyzed have some major and minor flaws which could be my learning opportunity to understand the strengths and weaknesses of the interfaces. I would like to piece together the analysis that I have did, in order to see the overall results and have a better sense of direction. The results are below:

Strengths Summarized

Clear and concise layout: Interface will be easy to navigate and find information
Relevant information: Shows important details about events (date, time, description, organizer) at the main page before going into ticket purchasing page
Ticket system: Clear display of ticket quantity, availability, and price
Customization: Allows users to customize the amount of tickets to purchase
Categorization: Easier to find events based on interests and preferences
Clean interface: Not cluttered, with enough white space for easy navigation.

Weaknesses Summarized

Uninspiring visuals: Doesn't have appealing elements like event banners
Limited animations: Makes the app feel dull and flat without much motion
Information overload: Event details page are crowded with text, which will be overwhelming, considering there's no grouping of information for easy information digest
Inconsistent visual hierarchy: Similar font sizes and weights make it hard to skim for important information in a short period of time
Spacing issues: Packed interface, especially with the narrow side margins which will make the interface overwhelming and small
Lack of "Read more" option: Long descriptions without the ability to expand can be overwhelming and lack of customization
Inconsistent themes: Different interface themes on various pages will confuse users and lack of interface consistency
Inconsistent spacing: Uneven leading throughout the app causing lack of interface consistency
Information separation: Key details like date, time, and event format are not grouped for easy digestion, considering Law of Proximity

The Event App...

My Previous Choices

Fig 3.0 Previous and Current Idea for The Type of App

At first I would like to create a metro app which would show information of the metro and the train system in order to give relevant train station information to either tourist or even locals. Other than that, I have thoughts of creating the event app, which is the current app. It will be an app that enable users to purchase event or music shows tickets and retrieve the ticket QR Code through the app.

References & Design Style

Fig 3.0 Breakdown of Event App References

I have chosen my references and did a breakdown on the things that I could learn and inspired from them. Ultimately, I would like to create an event app that is able to have a easy and simple flow of purchasing a ticket, or obtain any event information for their references. Besides, the flow and methods of retrieving the purchased tickets are also a crucial part of the app, so that users are able enter the event smoothly without any hassle.

The breakdown has shown a few things that I could take note of in making of my app:

UI cards or boxes that able to highlight information and segregate the information into groups
Further information could be shown in the Event page
Box elements in the interface could have size variations to have a dynamic interface
Usage of colors to segmenting the contents and layouts
Have an adequate amount of white space to avoid content overload

Fig 3.1 Event App and Desired Design Style Moodboards

The moodboard has shown me glimpses of how my app would look like. It will be acting as a guide for my app design in order to keep me back on track on my design direction. There is a style that I would like to try which is Playful Minimalism, which is minimalist style with a twist, I would like the app to look clean while not being too serious. It will have a selected color palette with popping colors which is able to include some playful icons and suitable animations that could create a captivating experience.

Besides, I have a thought of including cards layouts with boxes in order to create segmentations of data and more organized interface. It is able to chunk information into certain cards as well as creating visual hierarchy that could be time saving for users. The card layout mentioned could also be used for the tickets library page for easier navigation.

In short for my design direction:

Playful Minimalism
Modern, minimal and clean
Selected color palette with pop colors
UI Card layouts and boxes
Balanced visual hierarchy
Sans Serif

SWOT analysis on my Direction

Strengths:

Playful Minimalism:
This design style is able to mix provide a clean interface as well as making the whole mobile experience fun and colorful
UI Card Layouts and Boxes:
They are able to provide an organized and neat interface that can chunk important information and easier for information navigation
Balanced Visual Hierarchy:
With different card sizes, and colors, it is able to convey the information and such as date, time, price and venue that has good readability
Sans Serif Font:
In general, it is able to provide a clean and modern look that suits the modern aesthetic

Weaknesses:

Playful Minimalism:
Even though it is playful, but this style will not be too suited for complicated designed and prestige events that are high class
UI Card Layouts and Boxes:
The layout might lead to repetitive design with similar sized cards, might needed to introduce cards with different sizes
Limited Information Density:
Minimalist design requires the limitation of information in the interface to avoid information overload, app contents will needed to be arranged for prioritization of certain information

Opportunities:

Customization:
Features such as customization of preferences could be offered to cater for users with different type of event preferences and locations
Animations:
Integration of different types of animations, even elements with faint amount of animation would bring out the uniqueness of the interface and experience
Information Architecture:
Well organized information architecture, which enables users to skim through the interface easier in a split of time

Threats:

Competition:
There are a lot of existing event that possesses good interface that provide excellent user experience
Complicated ticketing system:
Hassle that users needed to go through in order to purchase and retrieve the ticket. Many steps ahead in order to purchase the ticket
Design Trends:
Some design trends might not be timeless and might not be suitable for future preferences, incorporation of some timeless design styles will enable the app to stay afloat

With this analysis, I would needed to tweak on the weaknesses as well as take on the opportunities that are available for the app in order to make the app better. I would also needed to minimize the threats as best as I could in order not to hinder the progress of the app.

The Framework

The framework will be able to give a clearer image on the navigation of the app. It was intended to understand on the decisions of the user and identify on the possible paths of the user flow in order to provide better user experience.

Fig 3.2 Framework of the event app, user flow

There are few things to take note of the framework, which is that it has a few components. The ones in Salmon Pink color are the Minimum Viable Product (MVP) of the app, allowing users to purchase tickets. Meanwhile, the ones in Yellow color are the ones the regular flow of the normal features in the app with the Orange color as the users decision.

Getting back on the main feature of the app is to allow users to check on the event details with its details in Event Details Page. If the user would like to purchase the ticket, he or she can proceed to the Ticket Purchasing Page to confirm on the amount of tickets to purchase as well as the ticket type. Then, users are to fill in their Personal information with their contacts and payment method in order to complete the purchase. Finally, users could check on the purchased ticket in Ticket Page to get the ticket QR Code.

The Sketches

Fig 3.3 Interface Rough Sketch

Above is the rough sketch of how the event app will look like, the sketch will be focusing the MVP mentioned about purchasing of event tickets. Other than that, ticket could be reviews in the Ticket Page in order to get the ticket QR Code. There will be about 10 pages of interface that will be interconnected to create a purchasing ticket user flow.

Current Interface Design

Fig 3.4 Figma Prototype with Grids and Gridless, Screnshot

I have started making the interface design, I am also trying out with a few layouts with colors that might be able to create a fun and minimalist interface. At this stage, there will be placeholder shapes that will be the replace with banners of events and details.

Fig 3.5 Login Page, Screenshot

Self Evaluation

In this page I was trying to make a Login Page that is basic and simple, I tried using colors to make this more fun, but I still think that it lacks of something. Perhaps still does not bring out the Playful Minimalism style as it might look a bit serious.

Claude AI Evaluation

Strengths:

Clean and minimalist design with a clear focus on the login function
Contrasting colors (yellow button) make the primary action (Log in) stand out
Placeholders in the input fields provide guidance on what information is required

Potential Improvements:

Consider adding a "Forgot Password" option for users who may need to reset their password
Implement form validation to prevent users from submitting incomplete or incorrect data
Allow users to toggle password visibility for better accessibility

Evaluation Argument

I would agree on the on the password visibility as it will aid the user in checking for the password they have typed in the space. Other than that, the "Forgot Password" feature is something that I have missed out on and amendments would be done in later case.

Fig 3.6 Login Confirmation Page, Screenshot

Self Evaluation

This page is self explanatory as it is just a feedback to confirm that the user has login successfully into the app using an account. This will further insure the user that they will be able to access the app.

Claude AI Evaluation

Strengths:

Clear and concise message indicating a successful login
Use of a recognizable checkmark icon to reinforce the positive message
Informative message about being redirected to the next screen

Potential Improvements:

Consider adding a loading indicator or progress bar during the redirection
Provide an option to skip the redirection or go directly to a specific section of the app
Personalize the message with the user's name or profile information

Evaluation Argument

Personally, I won't think that a loading indicator or progress bar is needed, just the countdown of the numbers should be enough. Besides, the redirection will lead the user straight to the Home Page after redirection. Whereas, personalizing a message might be a good idea, such as "Welcome Back, Jake!" to let the user feel special.

Fig 3.7 Home Page, Screenshot of App Analyzed

Problems Solved

My decision was able to solve the overwhelming interface which looks packed without the side margin. Besides, the layouts have been chunked in to categorize the information being shown and making variations to the layout patterns.

Self Evaluation

The Home page Houses quite a lot of information, which is risky for information overload. I have tried chunking the layouts into cards so that they could be organized. Besides different types of event banners would be displayed in the Home page for more variation.

Claude AI Evaluation

Strengths:

Easy navigation with a bottom bar for common actions
Upcoming events are clearly displayed with date and location
User account icon is present for easy access to profile settings

Potential Improvements:

Utilize the empty space more effectively (e.g., featured events, recommendations)
Add filtering or search options to help users find specific events
Implement a calendar view or categorization for better event organization

Evaluation Argument

Filtering of events should be done in the Search Page to utilize the overall page. Not to mention there's a filter on the top right, which allow location filter, I think that further filters could integrated in the Search Page. A calendar view might consume a lot of space which might affect the overall minimalist experience and design style.

Fig 3.8 Event Details Page, Screenshot of App Analyzed

Problems Solved

Information fit into cards are able to chunk the information together avoid information overload. Which I have solved the issue that had occurred in the apps that I have analyzed. There were also side margins that pads the sides in order to not pack the interface.

Self Evaluation

This page still requires improvement, it is a page that required more attention as detailed planning will be needed for the arrangement of information. I will still need to tweak the colors of the interface because I think that it is yet to be refine and required more color harmony to the interface.

Claude AI Evaluation

Strengths:

Clear separation of event information (title, date, price) from the description
Consistent use of colors and typography with the login screen
Prominent "Book Now" button encourages users to take action

Potential Improvements:

Provide more detailed event information (e.g., location, duration, performers)
Consider adding an image or visual element to make the event more appealing
Include social sharing options for users to share the event with others

Evaluation Argument

I agree that there should be more detailed event information being added to this page as users will need to know the information provided in order to decide on purchasing the tickets. As for the social sharing options perhaps there could be a share button, which can allow users to share the link to the other friends or users.

Final Submissions

Fig 4.0 Figma Prototype of the Interface

Fig 4.1 Presentation Recording

Timestamps to specific sections:

00:00 User Flow

01:35 App Flow

04:18 Plan Overview

09:19 Prototype Walkthrough

10:14 Ending

Feedbacks

Week 3

The metro app might need more time in creating the assets and consume a lot of time
I would recommend that you choose event app but it is up to you

Week 4

It is good to have analysis, try using the solution to the problem with the analysis you made
Number of pages are fine, it's just important that you are able to display the macro and micro animations in the next task

Reflections

This assignment has allow me to have the freedom in create an app that I wanted. I think that the analysis that I have done were worth it because it has provided me with the relevant information and insights to improve on my app. I was able to allocate more of my energy into designing my app as the analysis have already told me on the places to avoid so that it will not cause bad user experience. Besides I felt that the AI Argument was good as we most of the time we will take what AI have said as the legit source, it has thought us to not have strong reliance of the AI. By having arguments in order to identify the wrong or right of the AI response instead of blindly copying it.

Wong Khye Qing 0361000

Search This Blog