Embedded Files
Rapid Prototyping for a Mobile App Design (Phase 1)
I. Introduction
I. Introduction
For this project, we will design an app that would run on mobile devices, specifically, on a smartphone. The first principle that we have to follow, as a UI/UX designer, is to avoid the use of computers or digital devices when we start building our app. Part of best practice in the industry is to initiate any design by building prototypes.
A prototype refers to a draft version of a product that would allow you, as a designer, to test ideas and interactions without having to code. Prototypes are experimental and incomplete, but have the advantage of allowing you to build and test something real fast and inexpensive. Prototyping is so easy since anyone can learn to sketch ideas. Since you will not be bogged down by the technical aspects of a software or a programming framework, your creativity will be unhindered and you will find more freedom and flexibility with a pencil and paper.
With that said, we are going to launch ourselves into the project by doing what we call as rapid prototyping.
What is Rapid Prototyping?
What is Rapid Prototyping?
Here's an introductory video on rapid prototyping. It discusses the different methods of prototyping being done at Google. The video features Todd Hausman, a UX Researcher at Google. I suggest you watch the video before moving on.
RP 00 Rapid Prototyping.mp4II. Scope of the Design Project
II. Scope of the Design Project
In summary, we have four different methods of prototyping (see image below). These were introduced in the previous video. Each method of prototyping varies according to the level of fidelity that the designer wishes to achieve. As best practice, a designer always starts with sketching in order to visualize and test the user flow, screen layout, and overall UI structure with test users. After testing sketches with actual users, the designer then begins to build paper prototypes to further evaluate the design with the focus on interactions, terminologies used, navigation, and functionality. Afterwards, a more detailed digital prototype is made using a simple graphics software (i.e., vector or bitmapped graphics applications, or even a presentation software would do). Another option is to build digital prototypes using professional prototyping platforms such as Adobe XD or Sketch.
Keep in mind that no single line of code is normally written when you do prototyping. The idea is to build an interactive prototype as fast as you can and test your designs with real users before ever committing to writing code. By experience, performing major changes on the UI design with programming code already in place is not as flexible and fast as compared to quick, rapid, non-coding prototyping.
Unfortunately, our project will not cover all the four prototyping methods mentioned due to time constraints.
For our project, we will only do the first two methods: sketching and paper prototyping. These will make up the two phases of our design process.
For our project, we will only do the first two methods: sketching and paper prototyping. These will make up the two phases of our design process.
Note: We normally go all the way to digital prototyping (native prototyping is beyond the scope of HCI). However, we would have to cut things short due to the suspension of classes and the community quarantine.
III. Let's start with Sketching
III. Let's start with Sketching
How sketching is done.
How sketching is done.
You may already have some ideas about sketching. But what does UI prototype sketching actually mean? Here's Mariam Shaikh, an Interaction Designer at Google. She discusses in her video what sketching is and how they do it in Google. Watch the video before moving on.
RP 01 Sketching.mp4For the first phase of the design project, you will produce a series of UI sketches for a mobile app.
For the first phase of the design project, you will produce a series of UI sketches for a mobile app.
The mobile app's main feature is a location and contact finder of basic services in an area, which comes in real handy during the quarantine period.
For example, one can search for a barber or haircut service and the app will provide information on sites or individuals closest to your area who can provide the service. It also facilitates contacting them via mobile or social media channels. The app also has the feature to allow individuals to register themselves and the services they offer, including other pertinent information so they could be included in the search database.
a sample UI sketch
Your sketches can be similar to the image shown here. You can draw a series of "screenshots" on a blank paper, with rough sketches of boxes or placeholders, and annotating them with arrows or text.
There are no strict rules with sketching. The idea is to do them quick so as to visualize the overall flow and general feel of your UI design.
You can use more than one page if you have to. See to it that they are hand-drawn sketches. There is no need for your sketches to look artistic or refined. There is also no need to use different colours. This is still a low-fidelity prototype and adding such detail is not essential during this phase of the design.
Keep in mind that what you want to test or validate for now are your ideas on the user flow or journey, and as well as the overall layout and wireframes of your interface. Other refinements such as colour, typeface, or detailed content, would come at the later stages of the design and in succeeding iterations (i.e., with paper prototype and digital prototypes).
Feel free to come up with more than one set or alternatives of your UI designs if you have several ideas in mind and that you want to try out.
You can then start testing your ideas and design concepts by showing your rough sketches to a user.
You can then start testing your ideas and design concepts by showing your rough sketches to a user.
Once you have made the sketches, test your design with another individual by showing them the sets of UI sketches, simulating the user journey that would cover the two use case scenarios:
- First use case scenario: a person looking for a service using the app (e.g., searching for and finding a barber within the vicinity using the app and then eventually getting in touch with him)
- Second use case scenario: an individual who signs up to advertise his or her service using the app (e.g., a barber who signs up through the app so that any information related to his services would be available when people would search for haircut services using the same app).
IV. Deliverables for the First Phase of the Design
IV. Deliverables for the First Phase of the Design
- Photos of your sketches. See to it that they are of good quality (i.e., clear enough to show as much detail as possible but not necessarily too large to take up too much bandwidth or disk space). You may submit the images of your sketches or through a shared folder in Google Drive.
- Two video clips on a user reviewing your design sketches. Allow a user to evaluate your sketches. Be sure your sketches and user tests capture the two scenarios depicted above. Clarity of video and audio is important if you want to capture user feedback. The videos do not have to be of superb quality to take up too much bandwidth or disk space (clarity does not necessarily equate to high quality). Neither do they have to be long (set maximum to 5 minutes each). Trim it down to get rid of long pauses. If you or your test user prefer not to appear on the video for privacy concerns, just see to it that at least two pairs of hands appear on screen (as proof that you are not doing the tests on your own). Rest assured that I will not expose to the public any material that you send to me. I will use them solely to evaluate you on whether you were able to achieve the learning objectives. You may send links to the video files you uploaded on Google Drive or any shared online resource (e.g., YouTube).
- Alternative to the video clips: a series of photos. If you do not have enough bandwidth resource to upload videos (see number 2, above), an alternative is to send over a series of photos depicting key moments of the user test. Clarity of the documentation is important. Feel free to add annotations to the images if you deem it necessary. You may submit the photos through a shared folder in Google Drive.
- A brief and concise write-up on the initial assessment of your design. What worked? What did not work? How can you improve the user experience based on the feedback? You may submit the write-up through a shared Google Docs file or via email with an attachment in PDF format.
V. What happens after this?
V. What happens after this?
The feedback you gathered from your test user and the improvements that you intend to work on for the next iteration of your design can be incorporated in another set of quick sketches, which you can evaluate once more with your users. Sketches are quick to do and you ideas can be validated faster with your users.
For the next phase of the design, move on to phase 2: building paper prototypes.
Page updated
Report abuse