Project 3: Lo-Fi App Design Prototype

-

08/07/2024 - 05/08/2024 / Week 12 - Week 15
DAVIES ANNIKA ANGELA / 0362108
Application Design I/ Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 3: Low Fidelity App Design Prototype

Content

Lectures 
Instructions 
Task 3: Low fidelity app design
Feedback 
Reflection

LECTURES

Week 12 -  14 : consultation


INSTRUCTIONS



For this task we are to 

Create a Low Fidelity Prototype and do the following:

  • Arrange screen wireframes, actions, and visual feedback.
  • Link them in Adobe XD, Figma, InVision Studio, or any other prototype software.
  • Conduct Usability Testing

Invite guests to test the prototype.

  • Collect information, responses, feedback, and note any pain points.
  • Document the Process

Record the usability testing with video.
  • Create a detailed analysis document including:
  • The testing process
  • Feedback and responses
  • Observed pain points
  • Solutions to the identified problems

PROCESS

I began by sketching out how I would like my wireframes to look and used apps like IDP, Unilah, grab and inspiration from User interfaces from Dribble.com. I also used feedback from the UX data I collected to create wireframes and put feature that the users requested such as a more modern look, less visual clutter and making it more user friendly by including more illustrations and icons as well as using my card sorting results to place the respective features where users would prefer them the most.

Fig 1.1 Wireframes, Week 13 (14/07/2024)

From the MVP feature I ended up making the main wireframes for the MVP features and included a new feature for the live chat and just did a basic layout of how I was going to design the app.

I then went on to make my UI kit for the app and wanted to keep it very simple and modern.

Fig 1.2 UI kit 

After completing my UI kit I went on to start developing my low fidelity prototype. I found it to be a bit difficult to align some of the elements well but I got help from my friend who is more experienced in figma and managed to complete my low fidelity prototype


Fig 1.3 aligning labels for navigation bar 

Fig 1.4 making sure the gaps between icons are equal

I used the auto layout feature in Figma to standardise spacing as well as creating 12 columns in the layout and 60 rows to make sure there is good alignment.

Fig 1.5 linking the prototype in different sections

I went on to create the user scenarios for how users might use the app and I wanted to do scenarios that show what users would most likely use the app for according the in the interveiw results I got previously for what they use the app for.

Fig 1.6

I then got my 3 Friends to do user testing for me and got feedback from what they said below is the video for how they interacted with the app for each scenario.

Figure 1.7 Usability testing 
  

USER FEEDBACK

 I then got their feedback and this was the feedback
Samiha: The app is easy to navigate but the I was not able to click the notifications for more information.

Wongai: I like the layout and the use of  Icons it makes it feel more user friendly.

Anesu: It was easy to complete the tasks but I was not able to click the notifications and I wish there were back button to go back to the previous Page I was on.

Painpoints: Not being able to click the notifications and need for a back button 

Solutions: Adding another page to veiw more details about the specific notifications and adding a back button for certain pages.


FINAL LOW FIDELITY PROTOTYPE





WALK THROUGH VIDEO


Figure 1.9  low fidelity walk through video



FEEDBACK 

week 11: come up with 3 user scenarios.

REFLECTION


Experience:  I found that this task takes a lot of time and precision. I did not have much time to do my absolute best in this task due to a lot of factors as I was dealing with a lot mentally due to a lot of death that I was experiencing in my family as well as trying to complete my other modules. I know I am capable of doing good work and I am currently not proud of the work I have produced. In future I will always put my best foot foward and try not to let the circumstances I am facing in my personal life to dictate the type of work I produce in the end. During this break in August I plan to take up courses to improve my skills in figma as well as well learning blender to incorporate 3D elements in my work. 

Observation 

I observed that having a good plan as to where to start with the design is very important as I saw that when I organised each frame and analysed my user flow chart I was able to determine the next step in the design process. 

Findings 

I found that tutorials online helped me a lot when I wanted to do something in figma and did not know how. I also found that app design requires a lot of thought to it and needs constant user feedback when designing because the designs are meant to be useful for the people interacting with the app.

Comments

Post a Comment

Popular posts from this blog

GAMES DEVELOPMENT

-
Image
Week 1 - Week 14 Game Design Document + Progress Log Davies Annika Angela (0362108) Bachelor of Design in Creative Media (Honours) GAME DESIGN DOCUMENTATION 1. Basic Information Game Title:  Flower of Letum Team Name / Members: Siti Zara Sophia Binti Mohammad Reeza (0359881) Davies Annika Angela (0362108) Muhammad Zaky Aulia (0367842) Role Division: Sophia - ALL Characters Designs & Animations, UI, Logo, Platforms, GDD Annika - Level Backgrounds, Level Designs, Picked Up All The Coding Last Minute Zaky - Coder But Only Did The Prototype Coding. Genre: Dark Fantasy Platformer Action 2. Google Drive, Files & Gameplay GDRIVE:   https://drive.google.com/drive/folders/1foEEUKuSqOsT9w8Hpmqw2ZPK3OLdxo7Y?usp=sharing All relevant files & documents are located insi...
Read more

UX Design Final compilation and reflection

-
WEEK 1 - WEEK 14 DAVIES ANNIKA ANGELA/ 0362108 UX DESIGN Bachelors of design in creative media/ Innovation and technology faculty FINAL COMPILATION & REFLECTION LECTURES  Lecture 1: Introduction to UI/UX Lecture 2: Bad vs. Good Design Lecture 3: Understanding Users Lecture 4: Mapping User/Customer Journey Lecture 5: Ideation for Design Lecture 6: Prioritizing Features Lecture 7: Testing with Users INSTRUCTIONS Task 1: UX Audit Task 1(b): User Research (Interview) Task 2: User Personas and Empathy Map Task 3: User Journey Map & Ideation Task 4: Final Presentation Fig 1.1 Module booklet  Task 1: UX Audit: Airbnb For this Task Students are to  Select a scenario case study where UX design significantly impacted a product or service’s success or failure. Conduct research and analysis of the chosen case. Ident...
Read more