CMI 3315: Intro to Web Design

Final Project । Mobile App Re-Design

• July 30 (Tuesday) Exercise #5: Pitch Revisions
• August 2 (Friday) Final Project: App Feature Prototype

Bringing it all Together

By this point, you have:

1. Analyzed an app
2. Suggested a new feature for it
3. Recieved feedback to ensure you're heading in the right direction

Pitch Revisions

If I gave you feedback asking for revisions to your new feature pitch, you should submit those by Tuesday at 11:59pm to the Teams assignment. You can write directly in the text box. The goal of these revisions is to ensure you're working on the correct problem: a distinct interaction sequence that showcases how a user of the app would engage with your new feature.

It is helpful to pick a specific, concrete scenario to demonstrate the interaction sequence. Instead of "the user taps on the name of an artist" tell me "the user taps Sabrina Carpenter." "The app suggests a gym workout" should be "the app suggestions a gym workout focused on stretching because the Health app reports it's a recovery day." Use this scenario to help you build your prototype.

For Example: Dr. S Re-Designs Waze

"I'm trying to use an app that is supposed to help me plan a road trip. The problem is, it expects that I already know where I want to stop along the way. But I don't!

So, I'd like to be able to add my drive to the map and then choose places where I could stop based on intervals of distances or specific times."

(Scenario: If I leave at 7am, where will I be when it comes time for lunch? Show me lunch spots in that town.)

My steps might look something like this:

1. Step 1 (Frame 1): In Waze, I start on the serach page. I tap the search icon.
2. Step 1 (Pop-up transition frame): The search pane pops-up and I "type" in the destination (which has been pre-filled in the prototype) and it gets my current location based on GPS. I also choose what time I plan to leave, if I need to stop for breakfast, and my car's MPG. I press Suggest My Route.
3. Step 2 (Frame 2): Map displays the route and time, highlighting "chunks" of the drive that would fall into the window of stopping for meals or gas. I tap on one of these options.
4. Step 3 (Pop-up transition frame): A popup panel that lists top places to eat and get gas. Deciding I don't like the options, I drag a little clock icon with the time I plan to leave.
5. Step 3 (Pop-up transition frame): The panel refreshes and it dynamically updates the "first stop" panel of the map.
6. Step 4 (Frame 3): User now sees the map with possible options along the route. When I decide where I'd like to eat lunch, I can tap and pin that option as a saved route. It transitions to...
7. Step 4 (Frame 4): Basically the same screen as Frame 3 but now the small 'info' icon has changed into a 'pin' icon. I tap on another 'info' icon near the end of my route and it transitions to...
8. Step 5 (Frame 5): The 'info' icon has again turned into a 'pin' to show where I'd like to stop for dinner. I hit the confirm button.
9. Step 5 (Frame 6): The prototype returns to a map screen which now displays the route overview with the time until I arrive at this first pinned location.

For this, I used 6 Android Large frames and 3 pop-up frames to convey the five steps of my interaction sequence.

My steps begin with a specific goal in mind (engage with my new "plan your stops" feature) and then shows how someone interacting with the app would access and then use this feature.

If you recieved feedback from me on Exercise #4 telling you that I don't need to see revisions, you do not have to submit anything for Exercise $5. I will record the points in Blackboard.

If I asked for revisions, submit them to Blackboard and I'll get back to you ASAP so you can get to work.

Your Final Project

You will be creating a production-fidelity prototype (not wireframe) using Figma Material Design 3 Kit that is based on your feature pitch from Exercises 4/5.

• Minimum of four distinct steps supported by five frames in the Android Large dimension
• At least two pop-up or slide-over frames (ex: slide-in menus, confirmation dialog, keyboard pop-ups)
• A continuous prototype flow that moves the user through the app in 'preview' mode
• Annotations that explain how to use it and why.

Your prototype should demonstrate at least four distinct steps (not frames) the user would undertake while moving through the interaction sequence. Again, because it's really important: frames are not steps.

This is an example of one distinct step (even though it takes two frames):

• "In Frame 1, the user clicks the toggle button to "show restaurants near me"
• "In Frame 2 we see the toggle button is now active."

Similarly, re-sorting a list (ex: alphabetical to recently used) is also just one step even though you'd need one frame to represent the alphabetized view and another to represent the "recent" view.

Your prototype demonstration should begin with the first step of the task you're demonstrating. We will assume the user already has an account and is logged in, if needed. You also don't need to represent enabling this new feature in settings. Just pretend that it already exists and we're jumping right into seeing it in action.

Examples of strong projects from previous semesters:

• Planning climbing approaches for Mountain Project
• Sitter management interface for Rover
• A better review system on Spotify

Successful students have frequently used way more than four primary Frames because it helped them demonstrate their idea more fully.

Reminders

Your goal is to identify a specific Interaction Sequence in the app demonstrates how a user is trying to accomplish a task. The best way to identify something as a task is by asking what the user wants to do and then breaking-down each step. You can assume the user is already logged-in, so that does not count as a step.

Examples:

• "The user wants to see who is online and available to play a multiplayer game and send them an invite."
• "The user wants to decide what to cook for dinner based on the exercise data their smart watch recorded during the day."
• "The user wants to know where to stop for lunch at about 1pm while on a road trip."
• "The user is trying to brew pour-over coffee and would like an interactive visualization to help guide them through the process."

Consider what information the app could retrieve and act on, such as:

• dynamic content
• GPS location
• time of day
• calendar events
• health data
• information from other apps
• the location of friends
• bank account info
• etc!

As a reminder, the following concepts are not sufficient for a re-design:

• Focuing entirely on an "add to cart" shopping task
• Showing us how to enable your new feature on in the settings
• Solving the whole problem with a change to "the algorithm" (because that would be behind-the-scenes and you can't demonstrate that)
• Creating a sign-up process
• Changing only the visual design
• "Bug fixes" (slow loading times, improper formatting, random logouts)

Expectations

The app prototype's interactivity only needs to be concerned with the elements I will be interacting with. (This is a method known as a Wizard of Oz demonstration).

You will provide annotations with instructions to me on how I should interact with the app and I will follow that advice. I will not expect the other sections to function.

Wizard of Oz-ing Examples:

• If you want me to select one song from a playlist, you should write out all of the songs in the playlist but only one chosen song will be interactable.
• If the first step is that I tap the Search button on the top-bar menu, you need to implement that "tap" but not the rest of the menu items.
• You can tell me "tick these three checkboxes and press submit" and I will do exactly that and your next frame can assume I did.

Any data you need to include is intended to be "hard coded." This means you should write/invent realistic placeholder content but I don't expect it to actually "work" as if this were a real app.

Let's Do This

The Finished Prototype

1. If you previously chose "make a new copy," you can use the same Figma project from your pitch exercise.
2. Create a new Page, title it "App Title - Prototype"
3. Create your first Frame. This time, you should use the frame size for Android Large
4. My suggestion is that you try to work out which elements would be common across your different frames and focus on the layout of a single frame first. This way, when you think you're ready to work on other frames you can duplicate the first frame to give yourself a head start.

Visual Design and Branding

You should take into consideration principles of visual design you have learned this semester including colors, font choices, arrangement on the screen, and the role of visual elements to communicate interaction.

• In general, try to retain the visual identity of the original app.
  • It doesn't have to be perfect!
  • It just has to be recognizable.
• Borrow elements/images from the original app that you cannot re-create using the UI kit components (such as logos, photos, specialized interface elements).
• All of the content should be representative of what users would actually see in the app as they move through your interaction sequence
• Please do not merely use screenshots as placeholders. You should be re-building the pieces of the app to practice as if you were designing something from scratch.

Watch this quick video about modifying the colors using the Material Theme Builder plugin.

Minimum Requirements

A well-considered Figma prototype that fulfills these requirements would earn a 'A':

• New feature is a well-considered concept that adds meaningfully to the original app
• Demonstrate your understanding of mobile design fundamentals (from Designing Interfaces)
• Minimum of four distinct steps supported by four primary Frames in the Android Large dimension
• At least two additional overlay frames (pop-up / slide-over / alert frames) that animate in/out.
• Visual elements organized coherently and aligned to the grid
• Contents should reflect what users would see in the app.
• Steps should be annotated within Figma to help guide the user (and me) through the demonstration
  • Using text boxes adjacent to the frames, tell me what to click on and what would be happening in the app. Think of it as like narrating a walkthrough guide.
• Use components from the Material Design Kit where appropriate.
• Chose an appropriate visual design scheme (either from the original app or new to your revision)