• Group size: Teams of 4
  • Demo Day: 02/05 in class
  • Design Doc Due: 02/07, 11:59pm

Overview

Before you begin: Read this entire document and consider how you might want to split up work. This is a lot of work for an individual, but a perfectly reasonable amount for a team. Make sure to determine the most effective way to use the members of your team. Also, make sure to read the expectations for your design document, along with the rubric I’ll use to grade you.

It’s time to begin the design process. This first design sprint will force you to engage with three aspects of the design process:

  1. Visual Design
  2. Sketching for Ideation (using paper)
  3. Prototyping Tools (using invision, or another tool)

Typically, a critical portion of the user-centered design process is getting feedback from real users. In the interest of time, we won’t be doing that in this (short) design sprint. However, it doesn’t mean that you are ignoring their needs…

Designing for Others

In this design sprint, you will take an existing website by a local organization and redesign it for mobile phones:

  1. Weis Center
  2. Campus Theatre
  3. Union County Library System

Here’s the catch: you aren’t just translating the existing design to a mobile context for the general public. Instead, imagine that your users’ mobile phones redesigned the website on the fly to specifically cater to their needs and preferences.

You will be designing for a specific user group. On our demo day, we’ll invite various people around the university to make their best guess as to which user groups you are catering to. For example, you could be asked to design for one of the following groups (I am going to intentionally NOT use either of these groups):

  • College students at Bucknell
  • People who grew up in Lewisburg

While you will not redesign the entire website, you should redesign 4-5 pages on the website. One of those pages must be the homepage. The others must be accessible from the homepage.

Information Design

! Collect evidence along the way! Don’t shoot yourselves in the foot for your design reflection !

By pages: The first thing that you should do is establish which information should be emphasized to your specific user group. Don’t just rearrange the homepage - that was constructed for a general audience. Instead, consider which information across the entire website should be emphasized for your group. What do you think the goals of your users would be?

The information that is most important may differ by group. Make sure that this is reflected visually in the organization of your information. Wherever possible, try to check your assumptions. You don’t have time to interview your target group, but you can explore other websites to get a very rough sense of their priorities.

Within each page: You should similarly prioritize information within each page. Consider your information hierarcy and make sure that the most important information is visually prioritized within each page. Your decisions should be anchored in your reading and lecture notes.

Helpful Advice:

Output: Use sketching as a tool for explore your designs. Similar to our airport exercise, the goal here is to rapidly explore many different solutions with messy sketches. After you have thoroughly explored the design space (you should have at least 10 ideas for each screen), use paper to construct a cleaner paper prototype.

You should test this paper prototype with other people in the class. While they don’t represent your users (so this is typically bad practice), I want you to get in the habit of getting feedback in whatever you create. We’ll discuss user testing more in a week or two. Until then, do your best to get worthwhile feedback and change your prototype accordingly.

Visual Design

Just as the important information may differ between groups, so might the styles that they prefer. Consider how the websites that target younger audiences differ in their fonts, colors, and visual organization in comparison to websites that specifically targets elderly users.

Being able to articulate the correct mood and/or tone for your demographic is critical. How can you do that if you’re not a professional designer? We’ll use one strategy here.

  • Create a Mood Board: You may not be able to design well for a particular group of people off the top of your head.. but if you had enough good examples, you’d probably be able to pick up on a few ideas - design patterns, color schemes, fonts. This is exactly what a mood board is for. As you search for websites or environments that are commonly visited by people in your target demographic, take pictures and then put them together in one space. For example, invision has some nice features that support collaborative moodboards - including the ability to automatically extract colors from an image.

  • Consider the design resources we have posted on our website. For example, if you can extract a color or two from your design board, there are tools that you can use to uncover complementary colors.

Output: a set of colors, fonts, and general styles that you feel are appropriate for your user group. Put these into your design doc to show the provenance of your stylistic decisions.

Building your Website Prototype

Now that you have your UI organization nailed down + a style guide… create your mobile website. To create an interactive prototype, we’re going to using invision - a prototyping, collaboration, & workflow platform. I have worked with the company to secure free accounts for you that will remain active until 6 months after you graduate. Please refer to our Slack group where I post the code you need to activate your free account. It might be a good idea to start with a tutorial.

Invision is fantastic, but it isn’t magic. You’re still going to need to create the visuals yourself. While applications like Adobe Photoshop are likely among the most powerful tools you can use to generate screen mock-ups, I’ve even used tools as simple as PowerPoint before. Don’t let the technology get in the way of your design. Try to use whatever tools in which you can be most effective.

Note: While I suggest Invision, you may use other products as well. They key feature is that you can generate a link that allows you to share and demo your prototype

Output: The redesigned homepage of your website. There should be 3-4 other web pages that are linked on off the homepage that you have also redesigned.

Deliverables

  • Demo Day (2/05): You should have an accessible link handy and ready for you to present in class on the day of your demo. Your classmate will critique your work (using the I like, I wish, What if framework) and also try to guess your target demographic… despite having no previous knowledge.
  • Delivery Day (2/07): The output from this assignment should be the design document. Post the link to your post on this assignment’s page on our wiki. As with all design documents, it should include evidence of your design process. You do NOT need to create a demo video for this design module. For this assignment, I would expect a minimum of the following:
    • pictures of your various sketches
    • a picture of your moodboard
    • pictures of your final product (more broadly, the evolution of your design should be clear)