Academics

Web Design & Usability: Mobile Web Design

For the first project in Web Design & Usability, students were required to design a web site for smartphone devices only. The goal is to learn the process of creating a user experience within a constrained space. How would they handle visual layout, navigation, typography, images and user interaction on small-screen browsers?

For concept, I left it open so that students can come up with the type of projects they would like to execute. The minimum deliverables must include a homepage design, secondary design, a user-interaction design and another of their own choosing. Students may hand in screenshots showing how the pages work or a functional HTML demo.

For graduate students, they were required to design a tablet version in addition to their mobile site. Minimum deliverables must include a homepage design and another of their own choosing.

To help students thinking about their project, I assigned the following questionnaires:

  1. What is the purpose of your web site?
  2. Who is your user? (income, interests, gender, and age.)
  3. What problems are you solving for your users?
  4. Who are your competitors? (list 3)
  5. What actions should users perform when visiting your site?
  6. What features are important?

From my years of experience doing freelance design, contents had been the most challenging part to get from clients. I set out a deal with my clients that I won’t start the project until I get 75% of their content. I wanted to make that emphasis with students. Once they selected their project, I wanted them to focus on gather contents right away. Here’s a list of guideline I provided to them:

  1. Site name: design a simple wordmark
  2. Mockups: list out the four pages that they’ll design
  3. Navigation: although they only create four pages, the navigation should be a complete representation of their site
  4. Page contents: everything that goes on each page such as messages, texts, images, video, products, buttons and forms
  5. Footer: ways to connect such as contact info and social media

To help students think about usability, I assigned the following readings from Steve Krug’s Don’t Make Me Think, Revisited (3rd Edition):

  • Chapter 6: “Street Signs and Breadcrumbs”
  • Chapter 10: “Mobile”

After content gathering, students worked on their wireframes. They have the freedom to create their wireframes in whatever tools they felt comfortable with. Even pen and paper were fine. I was more interested in the way they present the concept than their visual ability. Students then shared their wireframes with each other for feedback.

For their design mockups, students have the freedom to use whatever tools they like. Most used Photoshop, some used Illustrator and InDesign. My only restriction was that they have to fit their site in a 340-pixel width. Students then presented their mockups to the group for feedback. They also get individual feedback from me. Graduate students were more involved in the critiques than the undergrads. I am working on improving that in the next project. Furthermore, I incorporated Disqus to our course site for online discussion and posting class status. Although I am not getting much participation from the students, it’s a great tool for me to communicate with them.

For the final execution, most students did well. Some were struggling a bit, but they pulled through. I am pleased with what they have done. I put together a Pinterest board to showcase some of their works.