The Design Process (UX / HCI)

What is the design process?

At UC San Diego I had the pleasure of taking a comprehensive studio course in User Experience (UX) and Human Computer Interaction (HCI) under the guidance of industry visionaries Scott Klemmer, Design Lab director Don Norman, and PhD student Robert Gougelet.

As the main instructor, Professor Klemmer was keen on driving home the following point:

Excellence in user experience design can be achieved through a process-driven and iterative approach known as the design process.

The Design Process:

  1. Understand your users’ needs by leveraging empathy
    • Interview several users to understand their goals and wishes
    • Use empathy to dig deep and fully understand the current user experience:
      • What is the user trying to achieve, ultimately?
      • What is the current process used to achieve the end goal?
      • What are the pain points experienced by the user during that process? (Refer to the 10 Heuristics for a deep dive into understanding pain points.)
      • Can I understand why those pain points exist, and what is causing them?
    • Reframe the problem experienced by the user:
      • Tip: “As a user, I need a way to achieve (the end goal) , but (pain point) is obstructing me.”
  2. Generate ideas! Find at least 5 radical ways to meet the user’s needs
    • First, what is the problem that the user is trying to resolve?
    • Create storyboards that describe alternative processes that avoid pain points but still achieve users’ end goals
    • Tip: Be simple! Use a pen and paper to quickly describe the new story in a few sentences and sketch out any accompanying visuals
  3. Create and develop a paper or low fidelity prototype based on a storyboard
    • The emphasis here is on creating the skeleton that captures the core actions and screens of the user experience.
    • Don’t try to create a beautiful, high fidelity prototype. Craigslist is a great example of a successful product which emphasizes functionality and user experience over aesthetics.
    • As you iterate through prototypes, I recommend moving from paper to digital tools like Adobe XD which has a great live demo tool, for example my mockup of Outre, as well as Axure. You can also look at Bubble.is which allows you to create web-apps with a functional backend without any coding.
  4. Share your prototype with users and make observations
    • Sit down with representatives from your target user group and share your prototype with them. Take note when they bounce against the walls, or get lost within your application.
    • Identify pain points with the 10 Heuristics for User Experience, one of the most important tools in the design process. The heuristics lend an extremely powerful framework to clearly identify and rectify pain points in any user experience. (Read about how I apply the 10 Heuristics to life on my Medium).
    • Want to test two versions and see which one has a better user response? Use A/B testing to test at scale for web-based applications
  5. Iterate and make changes on the prototype based on the captured feedback
    • Reflect on your observations during user testing and create a list of changes
    • Make iterative changes to your prototype, documenting your decisions carefully
  6. Test your latest prototype! Repeat #4 and #5 until satisfied
    • The key is to iterate quickly, and make changes incrementally so you can document and isolate pain points in the user experience
    • Don’t be afraid to revisit early storyboards and to backtrack. While you may have put a lot of work into developing a prototype, your testing may demonstrate that you need to scrap some of the work you have done. Don’t get too attached and focus on the user experience 🙂
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s