The purpose of this assignment is for you to expand your skills in website and mobile application prototyping by implementing practices from design systems in industry. Your deliverable is a prototype in the form of wireframes (black and white, with placeholders for icons/pictures).
You have the option of submitting a high fidelity prototype, but you must include the wireframe prototype as part of your process and deliverable. (In other words, if you submit a high fidelity prototype, the wireframe prototype is still a part of your deliverable and must be shown in your process blog)
You will design an application that has both a web and mobile app component and develop interactive wireframe mockups of each. The goal is to learn how control elements, navigation elements, and layout differs between websites and mobile apps.
Increasingly, the difference between designing for these two platforms is becoming less significant, with the rise of cross-platform approaches such as responsive design and flexible web browsers. However, consider the experience on mobile apps vs desktop websites, considerations need to be made in for the differences in terms of placement of elements, navigation, etc on both these platforms. The goal of mobile + web prototyping in this assignment is to create a prototype that has a unified experience throughout.
In industry, most products you work on in mobile web, desktop web and app will have a distinct design language/system. For the purpose of this assignment, you will have the opportunity to prototype with those design systems in mind. Most apps out there, have a website component on desktop, and vice versa. If you were to design a product for desktop, how would the accompanying app look if you user were to download it from the iOS App Store or from Google Play? This is a constraint that you will have to consider as part of this assignment. You may choose to design an app on iOS with an accompanying web component, or an Android app with Material Design with an accompanying web component (but consider how Material Design is used on the web component as well).
In this assignment, you will look at wireframe prototyping for interactive applications on web and mobile. These low fidelity mockups are used in the early stages of the design process to concentrate on the interaction design, navigation, and basic layout. They are intended to help you evaluate a preliminary design, not a finished version. You will be restricted to black and white schematic designs, with no high fidelity graphics or typography involved. Utilize elements and components from either Material Design or iOS Design Guidelines, but the purpose of this assignment is to utilize the components from those design systems - so you will not be graded on visual design (text sizing, colors).
For this assignment, you will choose a design challenge from the options below and create a web and mobile app component, and develop interactive wireframe prototypes of each. (You only need to make it clickable, you do not need to include the macro-interactions.)
For the design challenge you may choose from one of the following three application areas. In all cases, assume that your target user is a college student, and that your design goal is to create a system that makes the experience more fun, more meaningful, more efficient, or any combination of these goals. You may decide the features or goals, but we have included a few examples that you may use. You only need to create ONE end-to-end user task. For example: the user flow of a college student who needs to create and submit a reservation for a music room on campus.
Pet Adoption: process for pet adoption, finding a pet to adopt, keeping track of pet adoption process, donate to shelter, etc.
Music Rehearsal or Library Room reservation: creating or changing reservations, searching for rooms, filtering, possibility of reserving materials, etc.
Task management: creating and managing personal to-do lists, for academic or general life, anti-procrastination techniques, etc.
You are to come up with a solution that provides a similar experience on both a web and mobile app component and concentrate on the interaction design and placement of elements (using iOS or Material Design elements). In other words, think about how you're able to use Yelp on mobile app and web and achieve and similar experience.
Implement a prototype of the both components in wireframe format. This could be considered a blueprint for a developer to follow to actually implement the site. The purpose of creating the prototype, as usual, is to be able to evaluate the preliminary design with user testing.
Your redesign and prototype can be done in phases, to allow you to systematically approach this design problem:
Analysis: develop user requirements, with use cases, scenarios, personas, and current trends in web and app design in mind. Take a look at current solutions if you find it valuable, but try to create your own design.
Content Inventory: assemble a complete list of all content that you will incorporate in your site and app.
Information Architecture: develop the site organization and architecture (sections, pages, navigation scheme, menus, etc.).
Layout Template: develop an overall layout for the visual elements on site pages, and templates for different sections of the site.
Skeleton Wireframe: implement a set of wireframe diagrams for your site, limiting your design to black and white line drawings and “sketchy” elements.
Interactive Wireframe: implement an interactive wireframe prototype of your design, so that the functionality can be experienced or demonstrated. You may NOT add visual design elements to this version; it must be black and white and use very simple placeholder design elements.
High fidelity interactive wireframe (Optional): You may submit this, but you MUST submit a low fidelity wireframe prototype as part of your deliverable. (If you submit only a high fidelity prototype without wireframes, you may lose points for missing a part of the process).
You don't have to follow that scheme exactly, but it may help you break down the process into manageable steps if you haven't done this kind of project before.
With the resulting prototype, you should be able to communicate the user experience of the site. A developer should be able to understand the basic site interaction by studying your prototype, especially if it is well annotated. Do not worry about calling out pixel dimensions or spacing elements (as you would with CSS and redlines).
You should do a basic test of the prototype with another user in order to evaluate the effectiveness of your design and your prototype.
Tools to Use
There are no constraints on the type of prototyping tool to use, as tools in the industry are ever changing. Some examples of prototyping tools to use: Adobe XD, Sketch + Invision, Figma, Axure, Principle, Origami, Framer.
If you'd like to use Axure, you can get a free student license.
Prototype: the interactive wireframes you implemented. You only need to design for one end-to-end task the user will need to complete (mininum: 3 - 4 steps) . Adobe XD, Axure and Invision prototypes will be able to submit a direct URL to your prototype. You can include it in your report and in the comment field when you submit that. If you use another tool, just be sure it is clear where we can find the actual prototype you created. You can submit a file or a text note explaining where to find it.
Navigational Site Map: Along with your interactive wireframes, submit an accompanying sitemap. You should design only one end-to-end task for your deliverable, but think about how the ecosystem of your web + mobile app would work as a whole.
More Material + iOS Resources and Slides (files are available on Slack and Canvas under files)
Assignment adapted from Andy Davidson & Julie Kientz.