Jump Link:
Assignment 1: Understanding and Analysing Mobile Application UX/UIThe assignment titled "Understanding and Analyzing Mobile Application UX/UI" delves into the critical aspects of user experience (UX) and user interface (UI) design in the context of mobile applications. This assignment is to explore how the design and functionality of mobile apps impact user interactions and overall satisfaction. This analysis will encompass elements such as menu planning, use of colours, content delivery, and user experience, shedding light on the importance of effective UI/UX design in the success of mobile applications.
Instruction
In this assignment, our task is to identify and analyze 25 mobile applications available for Android or iOS. We will need to focus on one or maximum two specific categories chosen from the following options: Educational, Travel, Art and Design, Finance, or Business. The assignment requires us to meticulously assess and compare these applications using the criteria outlined in the provided table. The report should follow a structured format, starting with an introduction that provides an overview of the chosen application category. Subsequently, delve into the analysis and comparison of all 25 applications, exploring their features and qualities in alignment with the criteria specified. Following the analysis, a persuasive discussion is needed to elaborate on findings and any trends or patterns observed. Finally, the report should conclude by summarizing the key takeaways and insights drawn from the analysis, shedding light on the distinctive features and strengths within the selected application category.
This assignment must contain:
- Introduction about application category
- Analyse and compare all 25 mobile applications
- Discussion
- Conclusion
For this assignment, I've selected 25 mobile applications from the educational category. The reason behind this choice lies in the significant role educational apps play in my academic journey. I consider this category to be a valuable resource that has greatly guided and assisted me in my studies and self-improvement efforts. With a profound belief in the potential of these apps to contribute to effective learning, I am confident in my ability to conduct a thorough and persuasive analysis of this category. Below, I've outlined the 25 educational mobile applications that I've carefully chosen and investigated.
- Busuu
- Chinese Skill
- Coursera
- Duolingo
- edX
- Elsa Speak
- Falou
- LearnEnglish Grammar
- Investmate
- Johnny Grammar Word Challenge
- Kahoot!
- Khan Academy
- LinkedIn Learning
- MasterClass
- Mimo
- Newsela
- Pandai! Practice for Exam
- Photomath
- Pluralsight
- Promora
- Quizlet
- Sololearn
- Udemy
- Ule
- Wondrium
I've conducted a comprehensive analysis of these applications, approaching them from various angles, including menus, colors, content, and overall user experience. Through this multifaceted examination, I aimed to draw valuable insights into what makes certain apps excel in these aspects and identify areas where others may fall short. This comparative approach allows me to uncover the strengths and weaknesses of these applications, provide information on what sets the best apps apart from those that may have room for improvement.
Figure 1.1 App research report
Looking into educational mobile apps from a UX/UI perspective was eye-opening. It showed me how the design and user experience are critical for these apps to be effective for learners. After doing the app research, I realize how important it is to make educational apps easy to use and engaging. It's clear that there's always room for improvement in creating better tools for learning. This experience has made me more aware of the evolving world of technology and design in education.
< back
Assignment 2 & Final: Understanding and Analysing Mobile Application UX/UI
For assignment 2 and the final project, we were tasked with developing UX/UI designs, constructing user personas, and mapping out user journeys. The applications we built were specifically designed to be integrated into our metaverse project, which is our assignment for spatial design I and 3D modeling.
This assignment must contain:
- User persona
- User journey
- Wireframe design
- User experience and interface design
User Persona
For the user persona, we created a Google Form focused on gathering feedback for our art gallery and website. Our aim was to collect insights from art enthusiasts of diverse statuses, backgrounds, and ages to receive vary suggestions for enhancing our art gallery metaverse and website. Due to time constraints, we couldn't physically distribute the survey at art galleries, where we could directly connect with art enthusiasts. Instead, we reached out to art enthusiasts on social media platforms to gather feedback from a diverse group of individuals.
Figure 2.1 Google form
Below is our Google Form link:
https://docs.google.com/forms/d/e/1FAIpQLSd0E3zA4BDDUD6GzgxQetIn1YdGNtfv1-_wzHS_j86dZBprYQ/viewform?usp=sf_link
We have included questions such as:
- Personal details: name, age, occupation, education, major, hometown
- Where do you hear about the latest art and culture information?
- Art media you prefer.
- Art style you are interested in.
- Any frustrations or challenges that you encounter in an artistic or cultural pursuits?
- What motivates you to engage with art and cultural experiences?
- Difficulties and obstacles that you face when researching art and culture information.
- Dissatisfaction about web or app that you previously used.
- Dissatisfaction about art gallery that you previously visited.
- What do you wish to make art gallery looks beneficial for you?
- Quote
To improve our metaverse and website, we gathered feedback from art enthusiasts. We reached out to Taylor's University design students and engaged with international individuals on social media to collect valuable insights. We've condensed and simplified the feedback to create engaging user persona designs.
Figure 2.2 User persona design
User journey
A user journey is the experience a person has when interacting with something, typically software. Since we've opted to create a website dedicated to our art gallery, we must ensure the inclusion of every page necessary for users to easily access information and navigate through the various sections.
Figure 3.1 User journey
Wireframe design
For our wireframe design, we planned to use Figma in constructing a website for our art gallery. This platform aims to enable users to access information about our gallery space. Our wireframe consists of:
- Landing page
- Log in/Sign up page
- Booking page
- Gallery page
- About page
- Contact page
Sketches
Figure 4.1 Log in and Sign up page
Figure 4.2 Landing page
Figure 4.3 Gallery and Artwork page
Figure 4.4 Booking page
Figure 4.5 LED panel and Kiosk
WireframeLanding page
Our landing page is inspired by RexKL's website. It includes videos and animations to highlight our art gallery's uniqueness. The page provides key information about our metaverse, covering both the art gallery and workshops open to visitors of all ages. Our landing page will feature more images than text.
Figure 5.1 Mobile landing page (top)
Figure 5.2 Mobile landing page (bottom)
Figure 5.3 Desktop landing page (top)
Figure 5.4 Desktop landing page (bottom)
Log in/Sign up page
Users are required to log in or sign up access to detailed information about our gallery, including artwork details and the ticket purchasing page.
Figure 5.5 Mobile log in/sign up page
Figure 5.6 Desktop log in/sign up page
Booking page
Our booking page allows users to purchase art gallery tickets or reserve workshop slots. The user interface design draws inspiration from platforms like Klook and Ticket2U.
Figure 5.7 Mobile booking page
Figure 5.8 Desktop booking page 1
Figure 5.9 Desktop booking page 2
Gallery & Artwork page
This page provides users with the opportunity to delve deeper into the details of the artwork within our metaverse.
Figure 5.10 Mobile gallery & artwork page
Figure 5.11 Desktop gallery & artwork page
About us page
Our About Us page introduces our metaverse's backstory, our mission and vision, and profiles the key individuals steering this project.
Figure 5.12 Mobile about us page
Figure 5.13 Desktop about us page
Contact us page
Our Contact Us page facilitates user feedback, inquiries, and business collaboration requests.
Figure 5.14 Mobile contact us page
Figure 5.15 Desktop contact us page
Kiosk
In addition to designing the user interfaces for mobile and desktop platforms, we've extended our efforts to include kiosk interfaces strategically placed around our art gallery. Here are concise outlines for the directory design.
Figure 5.16 Directory
LED panel
In a gallery room highlighting famous European artists, we use an LED panel. It automatically slides through artworks by the same artist. Clicking the screen reveals details about the artist and their work.
Figure 5.17 LED panel
User Experience and Interface Design
Logo
Our art gallery is named AURA, which define as a space where each artwork carries its unique and captivating energy or atmosphere. To emphasize this concept in our design, we have chosen purple and pink as the theme color for the website and kiosk.
- Purple signifies creativity, imagination, uniqueness, and mystery.
- Pink signifies love and romance.
Figure 6.1 Logo design
Therefore, followed by the colour scheme of our logo, we mainly use purple the dominant colour. We incorporate the colour purple into our user interface design because it symbolizes luxury, creativity, and uniqueness, like our art gallery. Our design takes inspiration from various sources such as Rexkl, Klook, Ticket2U, Euroart, and more. Ultimately, we have developed a user interface that enables users to search for artwork, purchase tickets, and learn more about our gallery.
Mobile User Interface Design
Figure 6.2 Log in/Sign up page
Figure 6.3 Landing page
Figure 6.4 Gallery and artwork page
Figure 6.5 Booking page 1
Figure 6.6 Booking page 2
Figure 6.7 About us page
Figure 6.7 Contact us page
Figure 6.7 Profile and menu page
Desktop User Interface Design
Figure 6.10 Log in/Sign up page
Figure 6.11 Landing page
Figure 6.12 Gallery page
Figure 6.13 Artwork page
Figure 6.14 Booking page 1
Figure 6.15 Booking page 2
Figure 6.16 About us page
Figure 5.17 Contact us page
Figure 6.18 Prototype
LED Screen User Interface Design
Figure 6.18 LED Screen
Kiosk User Interface Design
Figure 6.19 Kiosk
Throughout this assignment, I've gained extensive knowledge in user interface design, including analyzing user behavior through personas and meeting user preferences, then creating a user interface that aligns with their requirements. We got valuable comments from various individuals, particularly Mr. Yusri, provided insightful guidance, ensuring our project remained on the correct path and resulted in a successful outcome. Despite the wealth of lessons learned during this project, I am eager to further explore additional techniques in designing and creating user interfaces.
Project Link
Last but not least, here are some attachments and links to access to our project:
- Wireframe
- UI design
- Google form
- Report
.jpg)
.png)
Comments
Post a Comment