Application Design I / Project 3: Low-Fidelity Prototype

2.6.2023 - 16.6.2023 (Week 9 - Week 11)

Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media

Application Design I

Project 3: Low-Fidelity Prototype

---

LECTURE

Week 9 User Interface Design Principles

User Interface (UI) Design

The technique that designers use to create user interfaces in software or computerized devices with a focus on aesthetics or style is known as user interface (UI) design. Designers strive to produce user-friendly and enjoyable interfaces. 

"UI design" is referred to as Graphical user interfaces (GUI) and other types, such as voice-controlled interfaces.

3 Main User Interface

1. Users interact with visual representations on digital control panels using graphical user interfaces. For example is the desktop of a computer is referred to as GUI.
2. Voice-controlled user interfaces. Users communicate with these by speaking. The majority of smart assistants, including Alexa on Amazon devices and Siri on iPhones, are VUIs.
3. Gesture-based interfaces: In virtual reality (VR) games, for example, users interact with 3D design areas by moving their bodies.

UI Design Principles

A good user experience depends on a decent user interface. People won't use the website or app if the interface makes it difficult for them to utilize it, and the costs associated with tech assistance will soar if they do.

UI has definite, observable effects on business. It's not just window dressing; paying attention to it is essential to an app's success. 

There are about 6 principles of UI Design;

1. Clarity - Clarity is the most important aspect of any user interface. But, to be effective, people must be able to recognize it. Users must understand why they would use it and what it’s helping them interact with. Users will foresee what will happen when they use it, and then successfully interact with it. There’s no room for confusion. Clarity encourages confidence which leads to further use. One hundred clear screens are preferable to a single cluttered one.
2. Flexibility - Flexibility doesn’t just follow a linear path, it’s about knowing your customers and giving flexibility for different customer intents. While one customer's intent might be to just browse a website and see what they sell, another customer's intent might be to buy a specific product. Flexible UI is efficient because people can choose the method that works best for them. Designers should prioritize flexibility and efficiency of use through the use of shortcuts and accelerators - unseen by the novice user - which speed up the interaction for expert users. This approach allows a system to cater to both inexperienced and experienced users.
3. Efficiency - An essential element in usability is Efficiency. It measures the speed and how quick the users can accomplish the tasks once they have become familiarized with the design of an interface. Think of it as the number of keystrokes or clicks it takes a user to complete the task. An efficient user interface reduces the number of steps the user has to take to complete a task.
4. Invisibility - An invisible UI is when the user experience of a feature is so intuitive that a UI isn’t really required (like Smart Guides in Photoshop, Adobe XD and Sketch — they appear automatically when you move a layer, to help you align it). Placing a shopping cart icon at the top right corner of an ecommerce website is among the most common examples of invisible UI design. Another example is the logo in a homepage.
5. Instant Feedback - Feedback is absolutely essential to interaction design. It serves a larger purpose in any system as a whole, in that it tells people how they can — and should — interact with what’s on the screen. Users should never wonder if an action they took in your product has gone through. Instant feedback is what gives users the confidence and comfort that they’ve done exactly what they were supposed to. Example of instant feedback in UI;
   1. Page loading
   2. Pagination
   3. Hover on navigation
   4. Highlight on menu
6. User Control - Users often make mistakes or change their minds. Allow them to exit a flow or undo their last action and go back to the system’s previous state. Users should be able to quickly correct mistakes or backtrack on choices made. The ability to easily get out of trouble encourages exploration, which facilitates learning and discovery of features.

User Interface Visual Elements

• Line
• Shape
• Color
• Form
• Texture
• Space

Fig.1-1: Line Sample

Fig.1-2: Icons (by Line)

Fig.1-3: Shape Sample

Fig.1-4: Color Sample

Fig.1-5: Color Sample 2

Fig.1-6: From 1

Fig.1-7: Form 2

Fig.1-8: Texture

Fig.1-9: Shape

---

INSTRUCTION

W9 In-class Activity (Online)

To replicate an app

Choose any app below:

• Sectograph 
• Trip
• AirBNB
• Premier League
• Strava

I chose "Strava".

Fig.2-1: Screenshots of Strava

First, I downloaded the app and took screenshots of the pages to be replicated (Total 5 pages). Multiple images were taken for those that did not fit within one screen.

Fig.2-2: Designed in Figma

From the screenshots, we created a design. All design elements such as text, icons, and shadows were created in Figma, except for the photo. The language setting of my phone was Japanese, so the language of the application was also Japanese.

Figma Link

Project 3: Low Fidelity Prototype

Instructions

In this task, you will be creating a low-fidelity prototype for your mobile application. This prototype should include wireframes and a visual design concept that aligns with the branding of your application.

The purpose of this task is to test and validate the user flow and user experience of your application before moving on to higher-fidelity prototypes. By creating a low-fidelity prototype, you can quickly iterate on your design and make necessary adjustments based on user feedback.

Requirements

Wireframes:

Create wireframes of the screens for your mobile application. These wireframes should illustrate the layout and content of each screen, including the navigation and interaction elements. You should use tools such as Sketch, Figma, or Adobe XD to create these wireframes.

Visual Design Concept:

Develop a visual design concept that aligns with the branding of your application. This concept should include color schemes, typography, and imagery that convey the desired look and feel of your application. You should use tools such as Sketch, Figma, or Adobe XD to create these visual design concepts.

Usability Testing:

Conduct usability testing on your low-fidelity prototype to validate the user flow and user experience. You can recruit friends, family, or classmates to test your prototype and provide feedback. Make sure to document the feedback and use it to iterate on your design.

Deliverables:

Submit a digital document that includes your low-fidelity prototype, wireframes, and visual design concept. Also, include a brief summary of your usability testing results and how you used them to refine your design.

Process

Fig.2-3: Flow Chart (Made in Project 2)

Referring to the flowchart of the app established in Project 2 and the demand for functions from users obtained through card sorting, I slimed down the structure of the app and at the same time created an easy-to-understand page design.

Fig.2-4: App Wireframing

After the wireframes were completed, linked the pages to a working form as a prototype.

Fig.2-5: Prototype in Figma

Figma Link

The actual design of the main page was created with the following design regulations

Fig.2-6: Design Regulation

Fig.2-7: Visual Design Concept

As for the color scheme, we decided to use purple as the traditional base color + orange as the accent color, since the traditional application colors were highly rated by the participants during the quantitative survey.

Fig.2-8: Payment Method Page

From feedback in the W11 online class, it was noted that there were not enough pages for payment methods, so three new pages were created. These pages allow users to select payment methods, list registered cards, and register new cards.

Fig.2-9: User Testing Video

During the prototype phase, user testing was conducted with three participants. The following scenario was set up and tested to see if it could be carried out smoothly, and three out of three participants were able to reach the specified function without any hesitation. This video shows the actual video of the survey conducted on one of those three participants.

1. Log in to the app and renew your plan
2. Purchase a new plan
3. Send an inquiry message
4. Top up your e-wallet

Fig.2-10: Low-Fidelity Prototype Document Final Outcome (PDF)

Figma Link

---

REFLECTIONS

Experiences

In this assignment, we are still continuing with the redesign of the application, following on from Project 2. I used the data I collected to come up with the actual structure of the app. The structure is much simpler than the actual app, and I think it is easier to achieve the "main purpose of using this app" that I obtained as a result of my research.

Observation

I found that there are many pages that must be designed, including multiple pages for a single function and modal windows, and that pages in a typical mobile app are more detailed than they actually feel in use.

Findings

While it is important that users be able to reach the desired functionality in a minimum number of pages, an overly simple page structure can detract from even the necessary functionality. I learned that it is important to provide satisfactory functionality without compromising usability.