Application Design I / Project 2 & 3
31.10.2022 - 26.11.2022 (Week 10 - Week 13)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Application Design I
Project 2 & 3: UI/UX Design Documentation & Low-Fidelity App Design Prototype
LECTURES
 |
| Fig 1.0: Thumbnail |
UI/UX Laws: Aesthetic-usability effect
The aesthetic-usability effect refers to users' tendency to perceive attractive products as more usable. People tend to believe that things that are better will be better – even if they aren't actually more effective or efficient.
This effect is a major reason why a good user experience can't just be a functional UI – designing an interface that's attractive, as well as functional, is worth the resources.
INSTRUCTIONS
Project 2: UI Documentation
After locking down their App concept and idea, students are now ready to proceed to UX design. The students are required to produce a comprehensive UX design document that will provide better directions for them to design the app.
Based on the information gathered in Project 1, students will:
• Determine and verify their target audiences
• Outline the content element of their app, and exercise the card sorting method to achieve optimum information architecture
• Listing the app features and identifying the app's Minimum Viable Product (MVP)
• Create wireframes of the screens
• Plan the user interaction and interactivity
First of all, I created a UI style guide in Adobe XD from the template given by my lecturer. The UI style guide consists of the color palette of my app prototype, font and its sizing, elements spacing, icons, buttons, carousel indicator, option selector, and data input. Here's my UI style guide.
Project 3: Low-Fidelity App Design Prototype
Once the UX design process is completed, students can now create a Low-Fidelity prototype of the app. Students need to arrange all the screen wireframes, actions, and visual feedback and link them up in Adobe XD/ Figma or any other prototype software. Students are then required to perform usability testing whereby they will invite guests to test out their Low-Fidelity prototype and gather all the information, response, feedback, and pain points observed from the test.
Students need to document this process with a video and produce a document containing a detailed analysis of this task and the solutions to the problems faced by the testers.
Since I finished with my UI style guide and got my app proposal approved, I proceed to the Low-Fidelity prototype of my redesigned app.
I started developing my prototype by looking at many streaming app references: Youtube, Netflix, Disney+, iQiyi, and Viu, and also competitor apps such as V Live and Weverse. These gave me so much inspiration for the navigation part of the app.
Here's the list of things that I changed or added to my prototype:
• Onboarding page
• Navigation bar
• In-app ticket purchase
• Explore page (search events)
• Individual artist page (easily find our favorite artist's show)
• Clickable Beyond LIBRARY (previously only showing the past event poster, can't be clicked)
• My Events (calendar marking our events)
Below is my Low-Fidelity prototype for the redesigned app project.
Please note that the prototype above is interactive, so you can run the prototype.
You can also access the Low-Fidelity prototype with this link:
https://xd.adobe.com/view/73d77562-7c8d-429f-ad31-33f05312e86e-2684/?fullscreen
After being done with the Low-Fidelity prototype, I approached 3 people to get them to join my user testing session.
I asked the users to operate my prototype and try to access the navigation and buy the show's ticket, but before that, the user was requested to operate the original app first. I also gave them questions about their experience with both (the original app and my Lo-Fi prototype). In the end, I asked them to give ratings for both. Here's the recap of my user testing.
FEEDBACK
WEEK 11
Low-Fidelity prototype is almost complete with a few more screens to create. Ready to be tested.
WEEK 13
REFLECTIONS
This was totally absolutely really really fun! I really love creating the design. It is very satisfying to see what I had concepted from my proposal coming out like this. Also, it was my first time using Adobe XD because previously I was using Figma all the time. However, moving from Figma to Adobe XD didn't really matter to me as there's not much difference between both software. Thankfully I can adapt fast to the changes in the software and work smoothly on the low-fidelity prototype.