Application Design 1 | Ideation
26/06/2025 - 28/07/2025
Nadia Chong Wen | 0355736 | Bachelor's of Design
(Honours) in Creative Media
Interactive Design | Project 3: Ideation
Table of Contents
- Instructions
- Project 3: Ideation
- Feedback
- Reflection
Instructions
Project 3: Ideation
Once the UX design process is completed, we are on the next stage which is to create a low fidelity prototype of the app. We have to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD/ Figma/ Invision Studio or any other prototype software’s. We unfortunately need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testers.
Based on the information gathered in task 1, students will:
1. Wireframe
|
| Figure 1.1 In Class Wireframe |
In class, we were given an exercise that challenged our ideas on what we believe the app redesign should look like by making us sketch with different themes in mind.(ex. different shapes, kids version, elderly version, futuristic, etc....)
|
| Figure 1.2 Wireframe of Main Pathway |
In the end, I decided to follow what I found in references that I searched (Figure 1.3) and took inspiration from the competitor's layout to better fit the modern look that is wanted for mmCineplexes.
References
Below are the references used for the redesign.
|
| Figure 1.3 References |
And here is the first draft of the Prototype.
|
| Figure 1.4 First Draft |
2. Micro-interactions
Of course, micro-interactions are needed in order to allow the prototype to feel like an actual app.
|
| Figure 2.1 Buttons |
With the use of the component groups and smart animation, I was able to make animated and functioning buttons that are around the pages.
|
| Figure 2.2 Navigation |
For some of the parts of the pages, I had to manually direct the pages to others since some are their own individual parts without components. It was also here that I found out that only Frames are allowed to overflow on pages.
3. Core Features Interaction
For the core features, I focused on the main pathway of the app.
- Booking a Seat
- Purchasing Snacks
- Looking through purchases
|
| Figure 3.1 Draft Protoype |
4. User Testing
Link to the videos of user testing: Here
I decided to allow the users to do as they would want for the testing instead of guiding them through the process by letting them test out the prototype by themselves. Here is the summary of the user findings that I have compiled by getting feedback from the testers after their use of the prototype.
- Functional Enough to use
- Add working carousel for the main posters
- Some buttons don't work
- More color accents
5. Lofi Prototype
|
| Figure 5.1 Lofi Prototype |
6. Sitemap
|
| Figure 6.1 Sitemap |
Final Submission
Figma View:
Figure 7.1 Lofi App Design
Link to Figma: https://www.figma.com/design/6r4342VgY9EoazF5lFYZ9B/Application-Design-1?node-id=0-1&t=CS2d5ykBKA91Fys6-1
Figure 7.2 Lofi App Design on Iphone
Canva Slides:
IDEATION by Nadia Chong WenThe video of the lofi walkthrough can be found here.
Reflection
This was a really difficult task for me. While I thought I knew Figma quite well already due to my experience in my other modules, nothing could prepare me for how much errors happened in the process of making animations work inside the prototype itself. I am quite ashamed that I couldn't fix it at all despite how much I tried, but I'll work on learning how I will be able to do that.
Comments
Post a Comment