sketch

Welcome!

Screen Shot 2022 01 31 at 1.41.33 PM

As the bulletin will tell you, this course covers, "...practices, concepts, history, and social ramifications of design. Typography, layout, identity, visual/physical structure, graphic iconography, and relationship of form to function. Theoretical and/or historical issues relevant to contemporary practice."

This particular semester we will be designing a mobile application, exploring the above concepts through the practice of user interface and user experience design (shorted to UI/UX in the industry). Specifically, we will be researching and designing a mobile application for the Bronx Children's Museum – the first and only museum of its kind in the Bronx!

[Click here] or the thumbnail to the left to download a PDF of the course syllabus.

User experience (UX) Design

We'll begin this semester by discussing user experience design. This field of design can also be referred to as "user-centered design," as it considers the demands, behaviors, desires, and even the handicaps of the end-user. Questions a user experience designer asks include, but are not limited to:

  • What are the things a user is going to want from my design?
  • What is the most thing in my design and how do I connect the user with ASAP? 
  • How many ways can a user try to get what they want?
  • How would a user react to the layout, structure, and/or pacing?
  • What does the user want?
  • What will make sense to the user; what will confuse her?
  • What might one user potentially have trouble doing that another user will not? 

Take a look at the above questions and think generally about what they're describing. Do these sound familiar to you? Haven't we considered these things no matter what we're working on? Certainly, websites and apps need good user experience design because people could use them in so many ways. But don't we consider these same things to some degree when texting someone? Or posting to Instagram? Or writing an email, laying out a book, writing a story, making a video... even making breakfast?! 

If you answered yes to any of the above, then congratulations: you're a user experience designer! This semester we are going start to designing mobile apps by considering their users, deciding what we want the apps to do, how the user should use them to do it, and then moving on to the next phase of the course, user interface design.

 

User Interface (UI) design

Screen Shot 2018 01 12 at 10.38.22 AM

Once we've created a solid user experience, it's time to 'skin it' in an elegant way that enhances and optimizes its usability. Whereas UX considers the user's behavior, UI is concerned with how the user's behavior meshes with the logic of what is generally an interactive design. If the designed item is a tool, how does the user use it to create change? How can we optimize how usable this tool is? Is the usage visually clear or muddled? Beautiful or ugly? Pleasing or frustrating. These are the questions of a user interface designer.

The good news: user interfaces are all around us, so we have plenty of references. Here is a shortlist:

  • the handle of a screwdriver
  • a touchscreen with icons
  • any phone
  • any tv remote
  • a toothbrush handle
  • the surface of a basketball
  • the shaft of a pencil
  • shoelaces or velcro 
  • an MRI machine

The more good news? If you ever created any work of art ever, even taken a photograph with your phone, then you have engaged in user interface design. In this case, you allowed a 'user' to 'interface' with a visual concept. Yay! 

 

Class Syllabus

[Click here] to access the class syllabus at any time.

Figma Class Group

https://www.figma.com/team_invite/redeem/72TBGlRySxrPEURJnrSLBU

The Laws of UX

In the same way that there are visual design principles (outlined here, if you're interested), there are commonly accepted principles of UX Design as well. There are tons of great resources online that go over these laws, but this article covers them particularly well:

Suggested UI/UX Websites

As a designer, you will spend a sizable portion of your career intelligently searching the internet for research, resources, and inspiration. There are literally hundreds of excellent UI/UX resources available on the web today, which is one huge reason I am not requiring a textbook for this class. Some of our class time will no doubt be spent consulting with these resources. To help you along, I have collected a few great resources for you to look at. This list will keep growing, so keep an eye on it:

  • Pageflows
    • This website provides real-world walk-throughs of popular interactive products (apps, websites, etc), exploring different key user flows: e.g. onboarding, upgrading, downgrading, searching, etc.
  • CollectUI
    • Daily updated collection of user interface inspo
  • Typewolf
    • An excellent type combination tool
  • Coolors
    • My favorite super-fast color prototyping tool!
  • color.Adobe.com
    • Adobe's own really powerful color palette tool. This one is essentially built into Adobe CC, but it's nice to have this as a separate web tool... 
  • UXArchive
    • Essentially a library of real-world user experience user flows.
  • Simform
    • A searchable collection of mobile UX design patterns that you can collect in a Pinterest-like way. 
  • Savee.it
    • Like Pinterest, but for desingners...
  • Dribbble
    • Basically Pinterest, but specifically for UI/UX designers. I prefer Pinterest because it includes inspiration from all kinds of places. However, there is something to be said for a design-focussed, searchable inspiration library like Dribbble. You should prolly go ahead and get yourself an account here in addition to Pinterest. 
  • TheGymnasium
    • Great resource with many free courses in UI/UX and general design.

What Materials do I need for this course?

As I noted above, this course doesn't require a textbook. However, there are some items – digital and physical – that you will need to succeed. These are listed below.

  • A Pinterest Account 
    • You may already have a Pinterest account. But if not, get one stat. You will be using Pinterest to collect UI/UX inspo throughout much of the semester. I use it constantly to collect all sorts of design references. 
  • A Figma Account
    • Figma is an online and (mostly) free wireframing and prototyping tool. It is free for students and educators (i.e. us!) and allows us to collaborate in real-time on projects. You should create your account today, but you'll need to get verified as a student to really make the most use out of it. Once you do this, I will add you to the design team.
  • UI/UX Sketchbook
    • If you're an art major, chances are that you have a sketchbook or two lying around. Those will likely be fine for this class. However, as we'll be drawing interfaces and screens, we will be requiring very specific sketching styles. To help us with this, I would suggest getting the following UI/UX-specific sketchbook:

      This sketchbook contains templates for generic mobile devices that will help keep us within the format of a screen. 

  • UI Stencils
    • These aren't absolutely necessary, but imagine how easy they will your life when you are busy sketching a bunch of screens? I think they're totally worth it and would recommend getting them. Besides, they're fun!

 
https://thegymnasium.com/

Welcome to Art 202/302/702 - Design/Advanced Design! Here's what I would like to go over today:

  1. The Course Description
  2. Introductions (with a brief description of an app you love) 
  3. The Course Schedule
  4. The Course Resources
  5. Laws of UX
  6. Personae
  7. User Journeys
  8. Questions for the Bronx Children's Museum
  9. Intro to Figma

Homework – Due February 10

Before you begin the Figma Training, you'll need a Figma Account. Figma is an online and (mostly) free wireframing and prototyping tool. It is free for students and educators (i.e. us!) and allows us to collaborate in real-time on projects. [Click here] to create your account, and while you're there, be sure to get verified as a student to really make the most use out of it. Once you do this, I will add you to the design team.

  1. Computer type:
    1. If you have a Mac, your training begins in Figma Ninja!
    2. If you have a PC, complete this training on the Figma website
  2. Finish either training for homework!
  3. Complete this form to submit the homework:

NOTE: Next week we will be meeting at the Bronx Children's Museum. Below are directions for how to get there from Lehman:

Homework Part 2.)Create both a Pinterest and a Dribbble account if you have none – then create a board for UI/UX design or similar and begin collecting examples of things you find interesting. 

Homework Part 3.)Also, get a sketchbook!

 

User Personae

The first step to any UX (user experience) project is to humanize the design challenges. We do this not just by creating a type of person, but by actually creating an individual. In UX this is called a persona. Personae are instrumental in understanding how an actual, diverse group of people (our future user base) are going to interact with and experience our designs. Throughout the design process, we can keep referring back to them, asking how which choices they might make or how something might make them feel. Personae form the basis of UX design because they are the center of our story.

Let's create a three now based on the following design challenge and brief:

  • Unless you've already done it, it can be difficult to walk into the Fine Arts Building and find what you're looking for.
  • We will create a way-finding system and/or kiosk-based guide to help anyone entering the Fine Arts Building.

Though there are a bunch of different kinds of people who enter and exit the Fine Arts Building daily, a large number of personae are students at Lehman College who enrolled in an Art course. Let's start there! To create each persona, it may help to ask some basic questions about why a given person would do such a thing:

  • Why did they enroll?
  • What are their expectations with the course?
  • What is their major?
  • What is their level of studio art training?
  • Do they have any specific interests in art, for example, painting, digital media, printmaking, etc?
  • What is their level of competence with digital media tools, for example, Adobe Creative Cloud, Cinema 4D, etc? 
  • Do they know their Lehman or CUNY email address? Are they using it?
  • What are their pronouns?
  • How old are they?
  • Do they have any other interests?

This is enough to start a persona. All this information can be organized into three main categories: Info, Details, and Insights. I'll create one as an example: let's call them Stephanie! Stephanie (she/her) is a 34-year-old nursing student who is taking a ceramics class to chill and get her mind off of the stresses of nursing. 

So why is all this stuff important? Let's discuss this as a class...

User Task Models and User Journeys

Task Models (aka scenarios)

One of the next steps in defining user experience is to model all the different tasks – ie a series of steps need to obtain a specific objective – that each persona might need to complete. People come into the Fine Arts Building for a bunch of reasons:

  • to get to their class
  • to ask a question or fix an issue at the main Art Dept. office
  • to meet with a professor for advising or office hours
  • to work independently in the various studios
  • to use the computer lab
  • to get technical help with a project
  • to visit the Art Gallery

Let's create an example of a task model, which we will call "The First Day of Class." This will entail a series of steps that you are currently in the process of completing:

  1. Enter Fine Arts Building
  2. Find your classroom location (floor and room number)
  3. Find a seat
  4. Meet professor and fellow students
  5. Complete class
  6. Leave room
  7. Leave Fine Arts Building

Let's think of some more possible task models... 

User Journey Mapping

With our persona Stephanie in hand, we can take her through the above task model to map out how she might experience it. Here's a brief outline:

  1. Looks at her schedule and doesn't know where the Fine Arts building is
  2. Consults campus map
  3. Enters Fine Arts on the first floor
  4. Looks for room 029... looks up and down the hallway, but can't find it
  5. Asks someone
  6. Walks down to the ground level
  7. Walks in direction of Schuster Hall
  8. Walks back and takes a left at the staircase
  9. Arrives in 029 a few minutes late
  10. Completes class feeling chill AF, so mission accomplished
  11. Leaves room
  12. Takes the exit just to the left of 029 and exits to a somewhat unfamiliar spot on campus
  13. Asks someone how to get back to the subway.

Pain points

Ok... not the most relaxing experience. Let's identify the so-called 'pain points.'

  • doesn't know where the Fine Arts building is
  • can't find a room because there is no visible building map on the 1st floor.
  • initially walks away from her classroom because no way-finding system
  • exits the building to an unfamiliar zone on campus because no way-finding...

Phases

Let's  break down this user journey into phases:

 Phase 01: Finding the room

  1. Looks at her schedule and doesn't know where the Fine Arts building is
  2. Consults campus map
  3. Enters Fine Arts on the first floor
  4. Looks for room 029... looks up and down the hallway, but can't find it
  5. Asks someone
  6. Walks down to the ground level
  7. Walks in direction of Shuster Hall
  8. Walks back and takes a left at the staircase
  9. Arrives in 029 a few minutes late

Phase 02: The class

  1. Completes class feeling chill AF, so mission accomplished

Phase 03: Leaving Class

  1. Leaves room
  2. Takes the exit just to the left of 029 and exits to a somewhat unfamiliar spot on campus
  3. Asks someone how to get back to the subway.

Now that we have a chronological outline of Stephanie's goals and actionable steps for the first day of class, we can make a timeline of these events and map her emotional state during this time, and even make some really good guesses about what she's thinking and feeling. This is essentially a systematic way to create and document empathy for each persona we come up with:

As you can see, it didn't go all that well in the beginning, but started to get better in class, and then kinda subsided again. Not the best user journey...but certainly not the worst. Ideally, we would like to make the thoughts and emotions chart at the bottom look more like a lopsided mountain: starting low, reaching a peak just before the last phase, and then sort of gently level off, much higher than the beginning. This isn't always easy to achieve, but the User Journey Map can at least show us what we need to fix. Below is the same map, but with pain points resolved with

  • campus map integration with CUNYFirst schedule
  • outdoor signage and campus way-finding system
  • easily visible building maps on each floor, next to each doorway
  • bi-directional way-finding signs and guides within hallways
  • destination guides on outdoor way-finding system that assists with off-campus transportation

stephanie user journey Stephanie better user jounrey copy

So much better! With emotional curves like this, I think we may turn Stephanie into an Art Major!  The User Journey Maps make visible what we already prolly knew: Lehman's campus and building way-finding system either suck or are non-existent. Either way, this hurts user experience and now we know how to fix it! 

Questions for the Bronx Children's Museum

To create personae and user journeys for the Bronx Children's Museum, we need to ask them a bunch of questions about the kind of people they want to visit their institution and the kind of experience they want their visitors to have. Let's form some for next week's meet-up with them.

 Here are a few sample questions:

  1. Describe a typical visitor to your museum.
  2. What does each visitor want when visiting? Why would they come here? What are they looking for?
  3. What causes your visitors distress in their roles?
  4. How would you like them to feel? Think?
  5. How can visitors keep learning/exploring once leaving the BCM?
 

Virtual Meeting with Bronx Children's Museum

Today, February 10, 2022, we'll be meeting with John Boudreau from the Bronx Children's Museum on Zoom. Be sure to arrive at 10:00am with your cameras on, ready to ask questions.

 

Homework – Due February 17, 2022

For homework, you will be continuing Figma training, this time using RedesignManual, a more in-depth Figma training module. This Figma training also provides you with a solid primer in basic graphic design elements and principles. Over the next four weeks you will complete the four modules, after which you will learn the following:

  1. Best practices in the use of typography
  2. Understanding color and how to use it effectively in web and mobile interfaces
  3. Basic principles of layout and how to organize information for web and mobile
  4. Using imagery in design scenarios

You will begin Module 01 – Typography – tonight! It is due next week, February 17. [Download the module here] and import it into your Figma account to start. NOTE: similar to Figma Ninja, you don't present the project file to interact with it, you just enter it in Edit (aka Design) mode and follow along using the lefthand menu and the instructions in the editing window. After you complete this module, submit the URL to your completed project file below:

 

User Personae, Task Models, and Journey Maps for the BCM

Personae

Today we are going to spend the first part of the class coming up with personae from the information we received in our client meeting at the Bronx Children's Museum. We should try to have as many distinct personae as possible, but not so many that they begin to overlap. 

User Task Models and User Journeys

Then we're going to spend some time coming up with possible task models and user journeys for our personae to engage with. We'll use simple sticky notes to create these so that we can easily rearrange and edit them if necessary. 

Precedent Research

Before we leave class we are going to split up into research groups. Your group's main objective will be to a.)spend our class time next week traveling to a cultural institution or public destination that has its own mobile application and, using their app, b.)identify delight-inspiring attributes and pain points of the app. Your group will then create a presentation of your experience to present next week. Just clarify, each group will be responsible for the following:

  • Coordinating a visit to a cultural or public-serving institution that provides some sort of mobile app-mediated experience.  Here are a few examples:
  • Identify good things and bad things about the user experience
  • Put together a five-minute slide deck about your group's experience. Be sure to include: 
    • screenshots of the app in use
    • images of the location and how it corresponds to the app
    • comments on accessibility
    • Does it help or hinder? 
    • Does in enrich or detract from the experience?
    • brief bullet points to explain the good and bad things
    • any insights...
  • Your group should determine your goals, roles, and accountability plans before we leave today!

Homework – Due February 24

Complete [Module 02 - Color of the Redesign Manual] on Figma. Submit your completed work below:

 

Group Research Projects – No class Meeting today

Today is set aside for you and your teammate(s) to visit whichever cultural or public-serving institution you have chosen (or were assigned). NOTE: You don't actually need to do this during class time if you and your team decide on a better time/day. 

Homework – Due March 03

This week you should complete the third module of the Redesign Manual, [Module 03 – Layout]. After you have completed the project file, send me a link using the below form:

 

Overview of Precedents

Let's begin class by hearing from each group about the different institutions they visited and the mobile apps they used during their visits.

Ideation

JSYK, we're now in the ideation phase of the design process. Also known as brainstorming, the ideation phase of a UX/UI project is perhaps the most fun. This is where we see what other people have done in the same vein, list what we must have, what we'd like to have, what we shouldn't ever have, think about how a user interacts, and begin sketching. 

What does this app do?

But before we begin all of this ideation, let's just solidify what this app does... Here is the brief:

The Bronx Children's Museum's "Discovery Hunts" is a family-friendly app that invites users to explore and discover the Bronx. Combining science, nature, art, and culture, this app offers unique, scavenger hunt experiences in different areas of the Bronx.   

Functionality Prioritization Exercise

We continue our ideation by talking about must-have features, should-probably-haves features, nice-to-have features, and things that shouldn't be there at all. Let's list them all out.

"Must-Have" features
  • User Profiles
    • email
    • address (optional)
    • caregiver or parent?
    • paused hunts
    • user stats
      • overall "Discovery Score"
      • "Discovery Hunts" completed
      • things discovered (achievements)
      • personal best times for completing a hunt
      • awards
    • Family profile info
    • Teams (joined)
    • Social media connections
      • Instagram
      • TikTok
      • SnapChat
      • FaceBook
      • Youtube
      • Vimeo
      • etc
  • Teams
    • Team name
    • Members
    • Achievements
    • Paused hunts
  • Discovery Hunts
    • Intro Details
    • Total points available
    • Ages
    • Total estimate time to complete (i.e. par score)
    • Needed supplies (e.g. "a magnifying glass," or "a winning spirit," etc.)
    • Distance from current location to first stop
    • Directions to first stop
    • photos/video/audio from other completed hunts
    • sharing options
    • Map view (if necessary)
    • List view (of things to find)
    • Find Object view
    • Verify Found Object view
    • Found! view
    • Completed view
  • Location Tracking
  • Overall diagrammatic map of Bronx with different, available Discovery Hunts
  • (fun) Diagrams of each Discovery Hunt
    • provide user feedback
    • displays breadcrumbs or user feedback on progress
  • Menuing
  • Achievements
    • e.g. Black History Month Discovery Hunt
    • Fall Leaves Hunt
    • "Under Our Feet" hunt
      • "Bring a magnifying glass, because we'll be looking for lichens, worms, and mycelium right under our feet"
  • Unlocking of new features or objects in a Discovery hunt
  • Onboarding
    • for new users
    • helps to create User Profile
    • establishes language(s), location, family make-up, etc
  • Content downloading
    • no large (over 50mb) downloads
    • transparent download notifications when users are initiating the planning of trips
"NICE-TO-HAVE" FEATURES
  • 'Random' Discovery Hunt
    • a dice-roll or wheel-of-fortune mechanism for randomly choosing a Discovery Hunt on a particular day.
    • suggests things to do
      • at random
      • based on a short, Buzzfeed-like survey of 3-5 questions
  • Similar things/locations/hunts presented after completion of a Discovery Hunt
  • Printable materials unlocked by achievements
    • activity worksheets
    • coloring pages
    • art projects
    • activity 'launch boxes' made available for pickup at museum
  • Leader Board
    • Lists user who have completed
      • the most Discovery Hunts
      • completed DHs in the fastest times
      • Discovered the most things total
"Could-Have" Features
  • menuing breadcrumbs to orient the user in the app
    • A well-developed app with an appropriate amount of information probably doesn't need breadcrumbs
  • QR code integration?
    • Pros: allows for verification of found objects
    • cons: requires real-world placement and maintenance in the greater Bronx
Nope!
  • linking to external apps or browser
  • no in-app, browser-based content
  • no large downloads

Must-have Screens

These task models will, in turn, allow us to determine which screens we absolutely must-have. Before we start sketching, let's first make a list of these screens. A few examples:

  • Home/logo screen
  • About the Museum
    • Current exhibitions
    • Things to do IN the museum
  • All Available Scavenger Hunts
  • In-progress of Saved Scavenger Hunts
  • A Single Scavenger hunt description/directions/objectives/etc
  • Different stages of a given scavenger hunt
  • Scavenger Hunt Achievements

Homework – Due March 10

In addition to reworking your screen sketches, you'll also complete the fourth and final module of the Redesign Manual, [Module 04 – Photos, Illustrations, and Icons]. After you completed this, submit a link to the completed project file below:

 
%MCEPASTEBIN%

Rapid Screen Sketching

Referring back to the must-, should-, and nice-to-haves from last week, we'll begin today's class by rapidly sketching all the screens we think we will need or want in our app. After we decide where app 'chrome' – i.e. menuing and any persistent buttons – we will assign who sketches which screens. 

Content prioritization

Having all our screens up on a board will allow us to prioritize and organize which screens are most important, or which should take some kind of priority over others. For example, a profile management screen is important, but it's not as important as, say, a screen that displays a map of you and your destination. We should attempt to order our screens by how important it is for the user to get to them.  

The paper prototype

Let's finalize our paper prototype of the app by refining all screens and assembling our paper prototype of the app. 

In class

Today we will be working on our wireframes in Figma, in preparation for our midterm presentation next week, March 24.

Midterm Presentations

03/31 – Client Presentation

Review of Client notes

Implementing feedback, modifying any existing screens, add/delete screens, etc. 

Creating a Design System

A design system is ... typography, color, layout, components like navigation or cards, and icons.

<modeling a design system>

Each person (or team) will be creating their own design systems based on the Bronx Children's Museum's existing style guide or style references.  

UI Kits on Figma

There are plenty of great UI kits already on Figma that will steer you most of the way towards your goal. No need to reinvent the wheel here! Just choose a UI kit that you like.

Working in class on UI

After we finalize a design system and UI kit, each person/team will be picking a screen from our existing wireframe to flesh out with UI elements. Next week we will critique these screens next and continue working. 

Screen critique – Work In Class

User testing...

...and prepping for client review next week.

05/12 – Client Presentation and Critique

Implementation of Client Notes

Today we'll make last-minute adjustments to our prototype based on client feedback from last week.

Delivery

Then, we'll send the final version off to the client!