UX Design | Exercise & Task 1-4
.png)
Week 1 - Week 14
04/4/2024 - 25/7/2024
Nurul Asilah Mohamad Asif / 0353346
Bachelor of Design (Honours) in Creative Media
GCD62304 / UX Design
Instructions
Exercise 1: Introduction to UX Design
Week 1 | Lecture Slide
Fig 1.0 Introduction to UX Design
Fig 1.1 Week 1 Lecture Slide
The beginning of the text was general and explained what exactly UI/UX design was, underlying how essential it is to design interfaces that customers can easily navigate. From our lecturer, we identified concepts such as affordances which is the possibilities for action in an environment and signifiers which are signs of where an action should occur. Mapping is another key concept defining the proximity between control and the resulting impact; control interfaces become more manageable and easier to anticipate.
We also touched on the main principles of good UI design: consistency, feedback, and simplicity. These principles also contribute to making sure that the apps used allow for easy interaction and thus, improves users' experience. The lecturer also provided some examples of the good and the bad interface layouts to show us the strength of UI/UX design on the users’ experiences.
Before embarking on the project, it was recommended that we begin the exploration of different personal helper apps and create a SWOT analysis. This exercise should enable us sharpen our perceptions as far as evaluating the best UI/UX designs and should come in handy for our group assignment.
In a final analysis, the first week was a great first glimpse into the complicated and interesting field of UI/UX design. I look forward to learning more about the topic and using the acquired knowledge to develop a useful personal helper application.
Week 2 | Task 1
Fig 1.2 Week 2 Lecture Slide
UX Design: Exercise 1 by asilah asif
I revisited my analysis and re-did the feedback part. I also took the opportunity to enhance other sections of my analysis based on the lecturer's comments during the presentation. This exercise highlighted the importance of clear communication and thorough understanding in UI/UX design.
In our upcoming sessions, we're diving deeper into what makes for good and bad UX design. We’re also exploring common UI/UX design practices and learning how to incorporate them into our group project, where we'll be designing our own app. I’m excited to apply these lessons and see how our project evolves.
Exercise 2: Design Audit
Fig 1.3 Week 3 Lecture Slide
Fig 1.4 Week 3 Lecture Slide
We then proceeded to brief for the next task. In Exercise 2, we were tasked with visiting a physical location and using their online app or platform. The goal was to evaluate and analyze the app's user experience design and its impact on the real-life experience at the physical site, assessing whether the transition and usage were smooth and convenient. As with the first exercise, we were required to select a different app. Initially, I chose the Lotus app.
Fig 1.5 Exercise 2 instruction
For Exercise 2, I analyzed the Lotus grocery app by visiting a physical store and using the app in real-time. I assessed the app's user experience, focusing on how seamlessly it integrated with the in-store experience and its impact on convenience and usability for shoppers.
Fig 1.6 Week 4 Lecture Slides
Exercise 2: Final Outcome
Exercise 2: UX Design by asilah asif
Task 2 prt1 (Group) | User Journey Diagram
Right after we formed a group, we then discussed what type of prototype or app we should focused on designing. As we discussed, we were also briefed to on the tasks we have to do, one of which is the user journey diagram. Our group decided to set a meeting later that week to discuss further about the task given.
Fig 1.7 User Journey Diagram
Target Audience (Miro):
Task 2 prt2 (Group) | Ux Requirement
After we completed the user journey diagram, including making amendments, we were briefed to do the past 2 of task 2 which is the UX Requirement. Our group discussed further about the app and proceed to fill In the blanks during our next meeting.
Fig 1.8 UX Requirements
Task 2 prt3 (Group) | Data Analysis and Key Findings
Our group then discussed what would be a proper name for our app. After a long list of which name is better, we decided to go for "PetConnect" sounds pretty catchy, and I like it. Then we also compiled a few findings and decided to write up the Google form about the app itself. We managed to get a few responses which is more than enough to proceed with our research.
Fig 1.9 Data Analysis and Key Findings
Full User Survey:
Fig 2.0 User Survey
Task 3 (Group) | Project Proposal
As we got started with our project, we get to learn a thing or two about Figma which was quite interesting. There were a lot of things that needs to be connected to one another, and so our group decided to apply those technics into our project (The PetConnect App). Meanwhile we continue our design pitching in our Miro board.
Miro Board Sketch and Progress:
Fig 2.1 Art Direction and Moodboard Miro
Fig 2.2 Survey Question Update and Feedback Miro
Figma Progress (Medium Fidelity)
After receiving a few feedbacks on what needs to be improved we then scheduled a meeting for the project proposal slides.
Project Proposal Slide (PetConnect):
Task 3: project proposal by asilah asif
We did so well for our presentation, we slayed *claps*.
After our presentation, we continued to finalize our app, including the colorings and add a few details to it. Javin and Jun Zhe did a really good job adding on the wireframes while Wai Fern and I focused on arranging the colors and add on a few images for the app.
For this task, I was assigned of designing the following pages.
Fig 2.3 Pet Shops added
Fig 2.4 Colored pet pick up review
Fig 2.5 Colored and images added for pets store section
Fig 2.6 Profile section edit
Fig 2.7 Pet Profile
Full Figma (High Fidelity)
Task 4 (Group) | PetConnect
we continued to design the prototype of our app in Figma. Wai Fern worked on the logo, she did a great job incorporating the fun and friendly tone that we would like our app to have. Previously we discussed the colors and what looks great within the app.
Fig 2.8 Art Direction and Logo Options
Fig 2.9 Art Direction references
We received a feedbacks for the prototype design.
• Donation change icon
• Journey is complete
• App easy to navigate
• Theme and feature is there
Feedback for feature - that can add
• Donation can choose to donate monthly
• Make sure pages with no main navigation have back button
• Edit button to change oyen picture in pet page
• Reminder app notification when item arrive / near by date for appointment
and so we made the changes as mentioned in the feedbacks.
User testing
After making the changes needed, we prepare our prototype for use testing to understand the users needs and perspectives. We used google form to collect the information or the data needed.
Below are the analysis and data collected.
Fig 3.0 User Testing Survey Data
After analysing the data, we did improvement to our app prototype. Me and Wai Fern worked on the report while Jun Zhe and Javin work on the improvement. Below is the compilation of our data analysis, final prototype and it's changes.
Task 4 - PetConnect by Elycia Ng
Fig 3.1 User Testing Report
Final Prototype
PetConnect
Reflection
Experience
This module differed from others as it allowed me to analyze an app both as a designer and a user. This dual perspective enabled me to understand the importance of good and bad app design. Additionally, the project provided an opportunity to design an app that is both functional and visually appealing. I also learned how to use Figma, which was a completely new experience for me. Overall, this module offered a fresh and enriching learning experience.
Observations
Throughout the exercise, I observed and identified the elements that contribute to a well-designed app and those that need improvement. I also took note of my group mates' opinions, learning from their perspectives on what constitutes good and bad design. This collaborative approach enriched my understanding and provided diverse insights into our project.
Findings
From the project, I was able to distinguish between key concepts such as Affordances, Signifiers, and Feedback, and understand the differences between UI and UX. Additionally, I gained insights into creating user-friendly apps based on user feedback. Learning from the feedback helped me recognize and correct my mistakes, ultimately improving my design skills.
Comments
Post a Comment