May 5

via GIPHY

ANNOUNCEMENTS

IN CLASS

PROJECT 2: Problem-Seeking

Look at user task flows.

Name Your Product: Establish a name for your product. Brainstorm a list of at least 20 possible names. Narrow your list to three final choices. 

7 criteria for a good name:

  • meaningful
  • distinctive
  • future-oriented
  • modular
  • protectable
  • positive
  • visual

Mobile UI Patterns

Crazy 8s Exercise

Crazy 8s is an activity where you get 8 minutes to come up with 8 different layout ideas for the same screen. The goal is to be fast in getting several variations out without worrying much about the details. At the end of 8 minutes, decide on the layouts worth exploring and moving forward with into the wireframing and prototyping tasks.

UI Resources

DUE TUESDAY

TASKS 12-14 Deliverables

Turn deliverables into Team folders on Google Drive found on Slack #0_classinfo. Label each file accordingly by task number and name. Lo-Fi prototype link will also be turned in on #project2 Slack Channel.

TASK 12 – WIREFRAMES

More Info: How to Create Wireframes + Examples

Create numerous wireframes for various screen types in your user flow. For example, this could be the main screens from your primary navigation, such as the home screen, a profile screen, browse screen, and so on… whatever is unique to your product redesign. Do at least a few variations for each of the relevant screens. Depending on your solution, your device choice may vary. You might be doing wireframes for either mobile, desktop, or a kiosk.

Feel free to do the Crazy 8’s exercise for this task. See the Help link above for more information.

How to Turn In:

  1. Wireframe sketches for various screen types in your user flow. Sketch several variations for each screen type to explore different layout ideas. You are welcome to use the Crazy 8s method.  
  2. You can use a sketchbook or whiteboard and take a high quality photo or scan of them. OR you can create them in a tool like Figma, Figjam, Invision Freehand, OR whatever software you feel most comfortable in.

TASK 13 – LO-FI PROTOTYPE

More Info: How to Create a Lo-Fi Clickable Prototype + Examples

For this task you will be a creating a clickable interactive lo-fi prototype that will be tested by your peers during Tuesday’s class.

How to Turn In:

  1. Lo-Fi (or Mid-Fi) Prototype link posted to #project2 Slack Channel and in a Google Doc in your Google Drive.
  2. This interactive prototype is clickable and navigates through all your different screens to achieve various tasks in your product redesign.
  3. Use Figma or Adobe XD.

TASK 14 – STYLE BOARDS

PDF: Style Board Examples

For this task each teammate with create a style board to demonstrate the look and feel of the brand of your product. A style board is similar to a mood board, where it gives the client or stakeholders an idea of the overall look-and-feel of your product design. 

Process of creating a style board

  1. Start with a few keywords. Include adjectives and emotions that describe the mood/style you are aiming for and what your brand stands for.
  2. The style board is a collage that usually shows some or all of the following aspects:
    • logo
    • colors
    • typefaces
    • image style – such as photography or illustration style.
    • texture/pattern
    • icons
    • any other ui elements
    • animation
    • tone of voice – a.k.a writing sample text

Design Inspiration/Resources

How to Turn In:

  1. Each Teammate create a Style Board
  2. PDF