Teams will work together to build an interactive and innovative mobile information system to address user needs or desires. While A3 was all about getting to the right design (addressing a meaningful problem), A4 is about getting the design right (creating an elegant solution to the problems you identified in A3).
Creating competitive analyses
Sketching and making lo-fi prototypes
Testing prototypes with users
Understanding how to envision a mobile user experience
Creating a moodboard and color scheme
Developing and implementing a design language for multiple screens/artifacts
Creating digital screen designs and clickable prototypes to demonstrate key interactions
Communicating design ideas to others
All deliverables for A4 will be graded at the end of the term. All other dates listed here are guidelines to keep up with in-class crits and user testing. They are not strictly required, but they will help your team stay on track and get good feedback along the way.
Week 4:
Stage 0: competitive analysis (create a draft as a Google sheet/doc to share on Aug 25)
Stage 1: sketches and wireframes (create a draft as Google slides to share on Aug 25)
Stage 2 and 3: lo-fi prototypes (draft due by Aug 25)
Week 5:
Stage 4 and 5: moodboards and style guides (create a draft in Google slides to share on Aug 30)
Stage 6 and 7: screens and hi-fidelity prototype (create a draft of your hi-fi screens in Google slides to share on Sept 1)
Finals
Stage 8: final presentations on Sept 3 starting at 11:30am.
Final deliverables due by 11:59 pm on Sept 5. The team's final deliverables include: 1) your team's final slide deck with an Appendix that illustrates your design process as a PDF (posted to Canvas by team leader), 2) your team's comment-ready final slide deck (posted to course dashboard), 3) a recorded talk (posted to course dashboard), and 4) your team's Google folder organized and viewable by the teaching team. In addition, each student must complete the A4 team peer eval.
The logistics page describes the reasoning and details related to participation points for the quarter. Throughout A4, we will use the course dashboard to share work-in-progress design artifacts for interim crits. Student may earn participation points by providing feedback on other teams (please provide feedback on your assigned "pair team").
A4 provides the following participation opportunities which can be done during class time or asynchronously within the dates specified.
(1 pt) A4 give feedback on wire frames. Leave comments on your assigned pair team’s Google Slides. Submit screenshots of your comments including your name and timestamp to Canvas.
(4 pt) A4 complete user testing for two team's lo-fi prototypes. Each student will be assigned to be a test user for two teams. Meet up with them during studio, or schedule another time to go through their user testing protocol. During the session, take a screenshot of your Zoom meeting and take notes so that you can write a short reflection about the experience on Canvas.
(1 pt) A4 give feedback on mood boards and style guides. Leave comments on your assigned pair team’s Google Slides. Submit screenshots of your comments including your name and timestamp to Canvas.
(3 pt) A4 feedback on hi-fi prototypes. Leave comments on your assigned pair team’s Google Slides. Submit screenshots of your comments including your name and timestamp to Canvas.
(1 pt) A4 Team peer evaluation
Other research-related participation points are available as described on the Logistics page.
Teams must demonstrate their ability to design a preferred future for a target audience. Your envisioned mobile information feed should take into account a number of situational and technological considerations:
Why is your persona engaging with your feed? Why is it preferred/better than they have now?
Where will your persona/target user engage with the information feed? How might we embed info feeds on various displays in the physical environment?
When does your persona want to engage the feed? How do predictive models and notifications factor into the experience?
What is your persona doing before and after engaging with an information feed? How might your info feed weave seamlessly into the user's life?
How does your persona achieve an ideal experience? How might technology enhance the experience? How might we personalize the UX for your target persona?
Ultimately, your team will design a hi-fi prototype for a new mobile feed experience. This can be a re-design of a popular existing feed (e.g., Facebook) or it can be envisioned as a new app. Teams should design for a typical mobile screen (e.g., iPhone X screens are 1125 x 2436 pixels), or they can design a feed experience for larger device, such as a laptop screen, or iPad, etc. Teams are also invited to prototype how their information feed would appear on a different device than their primary screen choice.
Teams will envision and prototype a novel mobile app design (or a novel information feed experience for a different device) based on the user research and mission outlined in A3. This includes sketching and iteratively prototyping the features for a mobile information feed, and developing a moodboard and style guide that can be implemented in a final prototype and slide deck. Teams are expected to conduct user testing and to iteratively refine the user experience.
Stage 0: Competitive Analysis (draft due on Aug 25). Search online to identify how your target personas currently address the need or desire your team uncovered during user research in A3. This should include competing mobile apps which you can search for on the Apple/Android app store, but also work-around solutions that might leverage a different technology or medium than a mobile app. For example, most information needs can be met by a good website, but to what extent is that information personalized and delivered to manage a person's time and attention? If competing apps do exist, try them. Take screenshots of all competitors so you can later compare your designs again them.
Choose at least 3 (no more than 5) competitor solutions. Develop a set of specific, consistent and accessible criteria for comparison. Create a competitive analysis matrix to define key criteria and to list key points for your imagined solution, as well as all the competing solutions. Your analysis could consider issues of usability, user flows, feature lists, design goals, and target population. See articles on competitive analysis in the Resources section below. Create a draft as a Google sheet/doc to share on Aug 25; the final version is due as part of the final deliverables.
Stage 1: Sketches and wireframes (draft due on Aug 25). Start by writing out a list of the key functions/tasks that your interactive system needs to support based on your user research. Then create sketches for the main pages of the user interface and the interaction steps. Unlike the A3 storyboards that illustrated people interacting with a proposed solution, these sketches should capture what’s happening on the screen. Sketch out 4-8 screens of your application and lay them out so that you can illustrate how the user would move between each screen. The wireframes should clearly communicate the content and interactive elements of your system for the entire mobile app. Create a draft as a Google sheet/doc to share on Aug 25; the final version is due as part of the final deliverables.
Stage 2: Low-fidelity prototypes (draft due on Aug 25). Building on your sketches and wireframes, create a low-fidelity prototype that would allow someone to try out the key functions of your team's proposed app. Your low-fidelity prototype should demonstrate a rough version of the whole user experience. The lo-fi prototype should look sketchy or at least bare-bones (no color or images) and should be digital and clickable so that you can conduct a user test in stage 3. (NOTE: This is normally where paper prototyping would fall within the process. Since we cannot meet people face-to-face, we will create rough digital prototypes that you can quickly iterate.) Options for lo-fi prototyping:
Balsamiq wireframing: Create sketch like click-through demos (free 30-day trial). See Alex Morrow's (previous IA) tutorial on Balsamiq here.
Figma mockups: Create a very simple screen mockup in (black and white only)
Any other UI mockup tool
Stage 3: User testing on lo-fi prototypes (in studio on Aug 25). We will test lo-fi prototypes with other teams during class (scheduled for studio on Aug 25). Create a list of tasks for users to complete and a list of interview questions to capture their thoughts on and experience with the prototype. Each student will be assigned to be a user for another team. Take turns serving as user for the other team; the rest of your team should stay back and conduct the user tests. During the user test, share a link to your team's lo-fi prototype, as well as the list of tasks, and then observe as the user tries to complete tasks. Take notes and record the Zoom call. If your team cannot make it to studio on Aug 31, make arrangements to meet your paired team outside of class. Important: after the feedback sessions, meet with your team to share notes and iterate on the lo-fi prototype based on peer feedback before your team moves on to a hi-fi prototype. Have links ready to share on Aug 31; document your edits to the lo-fi prototypes in the Appendix of your final slide deck as part of the final deliverables.
Stage 4: Moodboards (draft due on Aug 30). Drawing inspiration from your user research and personas, create a list of adjectives that captures the essence of the emotional experience you want to create with your design ideas. Then, using this list of words, create a moodboard as a collage of images that have a consistent mood and color composition. You might need to remove images in order to reduce it down to a relatively small set of dominant colors (ideally 3 or fewer, not counting shades of black and white). The moodboard can then be used to select colors, typefaces, and design elements for your style guide. Create a draft as Google Slides to share on Aug 30; the final version is due as part of the final deliverables.
Stage 5: Style guide (draft due on Aug 30). Based on your moodboard, create a style guide specification that shows your team's choices for colors, typefaces, and design elements. If you envision your feed as a redesign of an existing feed experience (e.g., Facebook or Instagram), your team should still create a new style guide that will specifically appeal to your target persona (don't just adopt the existing style guide). Your style guide should specify how to indicate a visual hierarchy (e.g., in screen designs, slides as well as in your final presentation). See examples here and here for how you might structure your team's style guide. Your style guide should be thoughtfully organized and can include (but is not limited to) the following: name and logo for your app, color palette (and show how/where they are used), typography (sizes and typefaces for different text elements), common user interface elements such as buttons, menus, and headers (it doesn't need to be exhaustive, just provide illustrative examples), and an example screen or two that illustrate consistent use of color, type, and UI elements like buttons. Create a draft as Google Slides to share on Aug 30; the final version is due as part of the final deliverables.
Stage 6: High-fidelity prototype (draft due on Sept 1). Using your team’s design language, create a click-through demo with high fidelity screens that illustrate the key interactions. Your screen designs can be designed within (or imported into) any digital prototyping tool (e.g., Figma, Adobe XD, InVision, Flinto, MarvelApp, etc.) so that people can try a complete click-through demo. This version is the "putting it all together" step in the process. This fully-realized prototype should have a polished look and feel that follows your style guide and should effectively demonstrate the entire user experience (from the moment a user opens the app and figures out what to do, until they complete the activity). Your team should continue to test, iterate, refine and polish your prototype up until the Final Presentation. See resource links below and the Resources page for more tutorials and examples. Create a draft as Google Slides to share on Sept 1; the final version is due as part of the final deliverables.
Stage 7: User testing on hi-fi prototype. Test your hi-fi prototype with at least 3 users who align with your primary persona. Your team might want to test with the same or similar stakeholders as the interviews in A3. Start by creating a list of tasks for users to complete and a list of interview questions to capture participants’ thoughts on and experience with the prototype. As a deliverable, turn in:
A document with your list of tasks (at least 2 tasks) and interview questions (at least 5 questions)
Raw data from each user test (capture videos or audio from the session)
Based on input from your testers, create a short list of insights with a list of design considerations for the next iteration (bullet-point format is acceptable). Try to implement these changes in your hi-fi prototype. Make sure to document the before and after version so we can see how the feedback affected your design.
Stage 8: Final presentation slide decks. Your team's final slide deck should build an argument for the problem your team aims to solve, showcase your solution, and adhere to your team's style guide. Start with your "User Research" slides, but now format them according to your new style guide. Your presentation should contain the following information:
A title page with your team name, date, team members and emails.
A slide to introduce a key challenge for your selected genre (e.g., stats or anecdotes to establish context)
A slide about your target persona
A slide about your team's mission statement (i.e., this is your core argument)
1-3 slides on the core features that your app provides in contrast to existing competitors
1-3 slides showing your team’s moodboard and style guides
1-3 slides to describe your mobile information feed. Visually illustrate system features and key user interactions with brief descriptions, annotations or captions. Include a URL to your clickable online prototype. Everything should have a high degree of polish!
1-2 slides on user testing results and how you improved your prototypes based on feedback
A conclusion slide with names, contact info, and acknowledgements.
Any number of slides can be including an Appendix that illustrates your design process (e.g., notes, photos, sketches, early prototypes, before and after versions, etc.) including labels to indicate the stage for each material (e.g. Stage 4 moodboard, Stage 2 user testing results).
Finally, your team should record a presentation of your final slide deck. Teams may do this with any software, but a simple way would be to record a team Zoom call where you share slides during the call. Recorded talks should 5-10 minutes in length, and do not need to cover the Appendix slides.
Teams should plan on delivering their final presentation during the class’ designated final period on Sept 3rd. In class you may choose to play your prerecorded video, or give a live presentation. We will dedicate ~5 minutes for final peer and teacher feedback, so come prepared to answer questions and engage in dialogue.
Also due by 11:30am Sept 3rd: A4 Peer Evaluation Form.
Tools:
Figma mockups (See former IA Anuka Zandanshatar's tutorial on Figma)
Other options for UI mockup tools: Adobe XD, InVision, Axure, Sketch
Required Readings:
Will Fanguy on Wireframing vs. Prototyping
Nick Babich on The Magic of Paper Prototyping
Karri Saarinen on Building a Visual Language
Nicole Saidy on How to streamline your UI/UX workflow with Figma
Optional Readings on Competitive Analysis:
This assignment will account for 35% of your total grade for this class. Each student should also conduct a peer evaluation of their teammates which can affect individual grades.
Competitive analysis (10%)
Does the team compare the proposed solution to at least 3 competitors?
Does the team develop at least 4 comparison criteria?
Does the team highlight the strength of the proposed solution in comparison with the competing solutions?
Sketching, wireframing and lo-fi prototyping (20%)
Do the sketches show that the team explored many variations and evolved their design ideas over time?
Do the wireframes help clearly communicate initial ideas for the workflow of scenarios and use cases?
Does the lo-fi prototype demonstrate how users will interact with the app to complete tasks?
Did the team write tasks and test their lo-fi prototype with peers in class?
Does the team include a short list of insights from testing with peers?
Visual design (moodboards and style guides) (20%)
Does the team's moodboard align with the team’s list adjectives and create a mood with a consistent set of colors?
Does the team’s style guide present a compelling design language with specifications for the following?
Does the style guide include a name or logo, color palette, typography names, sizes and samples showing how the style guide will be adopted for common user interface elements?
Are the moodboard, style guide, hi-fi screen designs, and slide decks visually consistent with each other? Does the app adhere to the style guide?
Does the team follow effective visual design principles taught in A1/A2?
Hi-fi prototypes (30%)
Does the hi-fi prototype guide users to complete at least two tasks? Is there a clear logic to the flow of the user interface?
Does the hi-fi prototype effectively provide information before and after users take action (e.g., effective feed-forward and feedback)?
Does the hi-fi prototype have a polished user interface? (i.e. visual elements look high quality, well organized, clickable, etc.)
Is the app interactive and reasonably functional ? (i.e. being able to navigate forward and backward etc)
Did the team test their hi-fi prototype with at least 3 potential users (i.e., not peers in the class, but people who align with the intended personas)?
Did teams clearly articulate a set of tasks (at least two) for the user to complete? Did the team create a set of interview questions that follow from effective interviewing principles?
For each user test, did the team write clear and convincing insights and changes for subsequent iterations along with evidence from the user testing data? Did the team incorporate lessons learned into their evolving design?
Final Presentation (20%)
Does the team effectively motivate the problem behind their concept?
Is there a clear evolution of the narrative from user research in A3 through to the final design presented in A4?
Does the team clearly communicate their prototyping process (e.g., in the Appendix slides)?
Does the team effectively synthesize findings from user testing and demonstrate how the prototype was improved based on the findings?
Are the slides designed based on details in the style guide?