Task 3: Low Fidelity App Design Prototype

08/07/2024 - 05/08/2024 / Week 12 - Week 15
Reema Arif Hamza / 0362792
Application Design I/ Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 3: Low Fidelity App Design Prototype

Content

Week 12: Consultation
Week 13: Consultation
Week 14: Consultation

Instructions

Task 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 needs 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. 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, pain points observed from the test. Students 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.


Process

To start my prototype I began by sketching some wireframes. I referenced apps I used in the competitive analysis (Asian Paints & Nippon Paints). I also looked through similar UI to understand the general layout most apps used. Because often times what's tried is true. 
 
Fig. 1.1 Wireframes, Week 12 (08/07/2024)

As mentioned in Task 2, the minimum viable product needs to include: colors, products, and visualizer. So I made those pages the key focus on my prototype. Additional features I'm adding to the app design is a login/registration page, purchase products from app, and suggested color pairings section. 


Based on our lecture slides the process we need to follow for prototyping is:
  1. Create a UI Kit:
    This includes colors, typography, icons, grids systems, and components.
  2. Make a Low Fidelity Prototype:
    A simple prototype in black/white, only need scenario frames.

  3. Conduct Usability Testing:
    Collect 3 usability testing responses.

  4. Improve and Refine:
    Use the feedback collected to improve the prototype.
  5. Make a High Fidelity Prototype:
    Add color and images to your prototype, improving your design as you make it. 

During Week 13, I made a rough UI Kit and some low fidelity prototype frames. Because I was in a rush to show progress for tutorial, I didn't build a proper foundation for my UI elements. So my Lo-Fi frames looked as if they were pieced together using different elements. Which was true because I was struggling to use Figma at the time.

Fig. 1.2 Rough UI Kit, Week 13 (15/07/2024)

Fig. 1.3 Rough Colors and Home Page, Week 13 (15/07/2024)

At this point, I realized I need to properly learn how to use Figma and increase my workflow speed and quality. I browsed through lots of tutorials explaining tips & tricks, grids, scrolling, prototyping, and super useful plugins.

Some noteworthy ones that really helped me are:

I'm glad I took the time to learn all the ins and outs of Figma (not even close there's too many features) because it really helped me understand how to use Figma better. At the same time I was learning all the standard practices when it comes to designing UI elements. For example, everything usually uses a 4px grid system, so icons range from 20px, 24px, 32px and so forth. 


Fig. 1.4 Experimenting with Icon stroke width, Week 14 (22/07/2024)


Fig. 1.5 Adding variants to Icons, Week 14 (22/07/2024)


Fig. 1.6 Icons are automatically added to library, Week 14 (22/07/2024)

It took me about a week to understand Figma and feel confident enough to re-attempt making my prototype. I began by creating a proper UI Kit that makes use of local styles and components/variants. Figure 1.7 shows a compilation of my UI Kit.

Fig. 1.7 New UI Kit, Week 14 (22/07/2024)

I started putting together my low-fidelity prototype, and found it came along much smoother than last time. Whenever I wanted to adjust something like the padding on the navigation bar, I would just edit the main components and see the changes happen across all the frames.

I focused on getting the pages I needed for the user scenarios done because there wasn't a lot of time left at the end. The scenarios included: login/forgot password, pick a color and visualize it, and buy a product. 

Fig. 1.8 Login Page, Week 15 (04/08/2024)

Fig. 1.9 Forgot Password Pages, Week 15 (04/08/2024)


Fig. 1.10 Color Pages + Horizontal Scrolling, Week 15 (04/08/2024)

After creating all the different pages I needed for each user scenario, I worked on linking all the buttons and pages together. I also added interactions and created user flows to set up my prototype for usability testing. 

Fig. 1.11 Linking Prototype, Week 15 (04/08/2024)


After completing the low-fidelity prototype I conducted usability testing with 3 participants via Zoom.
The scenarios conducted are:
  • Scenario 1: Login/forgot Password
  • Scenario 2: Selecting a Color and Visualizing it
  • Scenario 3: Buying a Product

Fig. 1.12 Usability Testing, Week 15 (04/08/2024)

Fig. 1.13 Usability Testing Feedback and Analysis, Week 15 (04/08/2024)

The only pain point users seemed to face was finding the colors icon in the navigation bar. There are three possible solutions to resolve this:
  1. Increase size of navigation bar.
  2. Adding colors in High-Fidelity Prototype.
  3. Changing the colors icon.

Based on the feedback from users it's likely the problem would be resolved through adding color and increasing the overall visibility of the bottom navigation bar. All users seemed satisfied with the hierarchy and were able to navigate the app easily. 

Because the suggested improvements take place in the High -Fidelity Prototype, I won't improve the Low-Fidelity prototype further. Given the feedback I'll continue to make changes in the High-Fidelity Prototype (click here to go to task 4).


Final Low Fidelity Prototype


Link to Figma File: Click Here


Fig. 1.14 Low Fidelity Walkthrough Video (link) , Week 15 (04/08/2024)

Feedback

Week 12: You just need to create the frames for 3 user scenarios.
Week 13: Include a log in/ forgot your password scenario.

Reflection

Experience
This assignment was pretty tough. There was a lot to do in a very short time especially since we had other modules to work on as well. Figma is a pretty amazing tool, there's a ton of features on it and it take a while to learn. Honestly, I think I would have worked much faster if I wasn't learning Figma as I was using it. 

Observation
I found that there are a lot of best design practices to keep in mind when designing UI elements. Not just heuristics principles but the details like a standard grid/button size and all these small details that takes a while to learn. I'm glad I focused on perfecting the UI Kit because making the prototypes became a lot easier after doing so. Auto-layout is definitely my new best friend at this point

Finding
The interactions and linking in Figma was quite time consuming, especially if you were to work on a large scale app. I did learn a lot about Figma and UI design standard practices while working on the prototype. It would have been nice if we had a detailed workshop on all the best ways to use Figma. Of I had more time I would add more frames and interactions into my prototype but I made the best of time I did have. 

Further Reading

I referred to the slides given in class. I also looked at Figma tips on Youtube to learn how to use Figma more efficiently. 

back to the top

Comments

Post a Comment