UX Design Task 4 - Final project prototype

27 June 2024 - 24 July 2024 / Week 10 - Week 14
Leem Sejin / 0362419
UX Design / Bachelor of Design (Honour) in Creative Media
Task 4 - Final Project Prototype

---

LECTURE

Refer to Task 1 Exercise

---

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1W36iOUvhrvbY4Ifn4ev-arMOWYPfsfW4/preview" width="640" height="480" allow="autoplay"></iframe>

TASK

Prototyping process

Main page and Event Page

Firstly, I started with the main page and the event page. I followed the wireframe, but this time, I added the category icons on the top and up coming booking panel for easier recongization.

Fig 1.1 Main page wireframe

Fig 1.2 Main page wireframe

Firstly, I started with the main page and the event page. I followed the wireframe, but this time, I added the category icons on the top and up coming booking panel for easier recongization. For this time, I did not managed to get specific colour code, so I used grey colour for placement.

Fig 1.3

Fig 1.4

After a week, I get the finalised colour script from Gina, and I placed the colours on grey boxes. I choose yellow because the colour is bright and catch the attention.

Also, I developed the event page by placing the large size of event advertisement poster, followed by the title of the event, time and venue. I find that placing the organizer of the event and who is participating are relevant so that users find the event safe.

Forum

Fig 1.5

For the forum page, I created the search bar to let the user to search specific topics, and created popular and new buttons. For the design of the forum, I created rectangular box with the user profile and username, comment icon and like button.

I used different colours for question box and comment box, to differentiate each section.

Activity, Chat, Profile

Fig 1.6

After the several feedback session, I find that the fonts are too small when I use in the mobile, hence I adjust the font sizes, and add the group chatting sample under the chat menu to show that the the app also allow group chatting system as well as conversation with the task helpers.

Fig 1.7

Also, we are encouraged to use our app logo design, hence I placed the our logo with plus button under the "Interest in these task?" section (in home page )

Fig 1.8

After user feedback, we find that it would be easier to navigate if we placed search bar on the top of the categories.

Fig 1.9

User Testing Data Analysis & Interpretations

For the user testing, we created the google form and question about the functionality of the app. We sent to the past interviewees for testing, and analyse the data. This time, we also separate our works, and I have to write up about the limitation of our user testing.

Final submission

Fig 2.1 "Teman" Prototype

Fig 2.2 "Teman" wireframe

---

FEEDBACK

Week 11

- designs not consistent yet since everyone is doing different journeys
- leave bigger gaps between screens to make interactions easier
- name the pages properly
- next week expect some interactions, finalised designs with colour

Week 12

- the basic features are done
- security could be improved, e.g. verification completed page
- add in pictures try to make it as real as possible(the app)

Week 13

- The text a bit small. Eg. The 'About' text in journey 2
- No need to show address, for security issue. Maybe can blur the number. Not sure.
- Remove lorem ipsum. Right something. Make it as original as possible.
- Change the home page for journey 4. Include help that can be provided from neighbours and outsiders. And then the rest of the pages can be linked same to journey 3.
- Test in an actual phone. Some things are not working.
- Suggestion: in the middle, can add logo.
- The rest kinda works for the purpose of this usage. The verification works to eradicate issues of security.
- User testability can do mcqs, since data collection was interview

Week 14

Create task page, fix the status bar. Placement also a bit too close to centre
In limitations, add time. Declare why mostly did MCQs
Overall, the teman app serves its purpose. He wants to see the detailed improvement regarding JMB. Maybe at the bottom add how

---

REFLECTION

It is really useful and fun experience to create the app from scratch. When I am designing the layout, there are many things to consider like readability and easy navigation. As desining the app is a little bit different from the animation, I keep forget to test on my mobile and think how will the users feel when they try our app. Also creating the attractive and functional layout was really difficult, and the final outcome is not fully satisfied. However, experiencing new area is really fun, and learnt different techniques like figma.