A Snapshot of Entire Product—User Story Mapping

I learned the user story mapping when I worked as a product design intern at a startup company. They used this method to build their products. I think it is really a powerful technique that helps to organize what functionalities we need to build for users and also serves a good communication between team members. For this article, I’m going to briefly introduce the user story mapping and to demonstrate how to do user story mapping by taking the project I’m doing right now for Pratt Institute Libraries as an example.

Introduction to User Story Mapping

The technique was invented by Jeff Patton, who has designed and developed a variety of software for the past 20 years. By this technique, we could snapshot what features and tasks the entire product or services would have and prioritize the functionalities based on necessity and production. A user story mapping could include the following components: high-level features/activities of the product (backbone), tasks and steps, and user stories, and all the components in the user story mapping are timeline-based. 

In practical, we could think each user story is a piece of functionality that supports the user task, the whole work could be done iteratively with conversations between team members. Therefore, this approach is really helpful for organizing the thoughts from team members and ensure everyone in the team is on the same track.

How to Develop User Story Mapping

I’m going to demonstrate how I use the user story map to envisage the new Pratt Insitute Libraries website by using RealtimeBoard. Also, before starting to build the user story map, we have to make sure we fully understand the user needs, so we could think about how the functionalities can support the user needs when building the story mapping.

For redesigning the library website, I’m going to build the story mapping with the user scenario—I need to find a book and reserve for a course as an example.

  1. Map out user activities based on the user scenario

2. Build users tasks that help to complete the user activities

3. Break down each task to functionalities that support the task and prioritize them

This is just an example of how I build the user story mapping. In a real situation, the user story mapping should be done collaboratively with team members.


By this method, we could clearly understand how users would interact with the product or service and the team could see the potential issues and problems before they begin to develop the product. Furthermore, all the content and details of the story mapping would come from team members’ discussion and it always a work in progress. Once the first release of the user stories is decided by the team, we could see the first release as our goal for the minimum viable product (MVP) and iterate on it.


Jeff Patton & associates http://www.jpattonassociates.com/user-story-mapping/

Lucidchart—User Story Mapping https://www.lucidchart.com/blog/how-to-create-a-user-story-map

Jim Bowes—An introduction to user story mapping https://manifesto.co.uk/user-story-mapping/

Amazon: User Story Mapping authored by Jeff Patton https://www.amazon.com/User-Story-Mapping-Discover-Product/dp/1491904909/ref=as_sl_pc_qf_sp_asin_til?tag=jefpatass-20&linkCode=w00&linkId=NX2UXYQEFAANOFPO&creativeASIN=1491904909

Interview with a UX Designer about Gaining a UX Job

Image result for user experience designer


I interviewed a user experience designer, who currently works at VMware Inc. in Palo Alto, California. VMware is a worldwide company, providing various products and services for clients, like workspace management, server software, cloud management, etc. She has worked as a user experience designer for designing admin software for four years.

For this interview, I primarily focused on how to succeed to gain a UX job.

Here is my thought and summary of the interview:

  1. Expertizing in one specific area is important because the hiring bar for a UX/UI/Product designer has risen significantly over the past few years

There are more and more people from different fields would like to take a part in UX field. Thus, to enter the UX field and to be competitive in this market, you have to expertize in one specific field in UX, such as programming, visual design, or research. Those people who only have general abilities but not expertizing in a specific area are more likely to be replaced by others who have more solid skills and knowledge.

  2. Demonstrating a refined portfolio is a must. 

If you would like to concentrate on interaction design, you should not only have a refined process but also show the very solid projects’ outcomes, such as polished visual, mature interaction flow, even end-to-end motion. You could just show two or three projects you are very proud of, but each of the projects should be exquisite.

  3. When interviewing a UX/UI project, telling a good story of your work is essential.

Storytelling ability is part of competences as a UX/UI designer. During the interview, a hiring manager would like to see what challenges you solved and how you solve them, but when talking about these things, you should introduce the background of the work first, so the listener could follow your thinking and logic better. Then, tell what actions you took and how the outcome was.

UX field is more and more difficult to enter; even an internship is also harsh to find. Having good storytelling skill is critical, but those hard skill sets are important as well. Most importantly, expertizing in one specific area in UX field is the key to survive in this competing environment.




Is Accessibility not equal to Usability?

There are ranges of evaluation methods that assist developers or designers to create usable and pleasant electronic products, services, or environments for the target audience, including older and disabled people. However, to build a product, service or environment for older and disabled people, the criteria of evaluation may be different because they may have specific needs and require different assistance. Thus, for this topic, the overview of accessibility and its relation to usability will be introduced.

The overview of accessibility: two definitions of accessibility

According to the International Standards Organization (ISO), it defines accessibility as—the usability of a product, service, environment or facility by people with the widest range of capabilities, which can be thought as the maximum possible set of specified users accommodated for the product or service and its concept is similar to universal design and design for all philosophy. However, accessibility is also used to refer products, services, or environments that are specifically usable by disabled people. For example, Web Accessibility Initiative (WAI), found by the World Wide Web Consortium (W3C), defines web accessibility as—people with disabilities can perceive, understand, navigate, and interact with the Web. The definition of WAI suggests that accessibility is concerned about the issues with older and disabled people, whereas the ISO suggests accessibility is about the issues for the largest range of users, including older and disabled people.

Although the concept and situation of accessibility is not that clear as the definition of usability offered by ISO (usability: the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use), the definition of accessibility, especially focusing on issues with disabled people, provided by WAI are currently widely acceptable in respect to user interfaces and websites.

WAI has promoted conformance to the Web Content Accessibility Guidelines (WCAG) as the criteria for achieving and measuring accessibility. There are four principles associated with a list of guidelines addressing the issues around the principles:

  1. Content must be perceivable
  2. Interface components in the content must be operable
  3. Content and controls must be understandable
  4. Content should be robust enough to work with current and future user agents

Accessibility and its relation to usability when designing interface and web

Put simply, for designing user interfaces or websites, usability means designing the interfaces or websites to be effective, efficient, and satisfying, while accessibility means designing the interfaces or websites to be perceivable, understandable, navigable, and interactable, especially for older and disabled people. There are some overlappings between accessibility and usability. For example, a more understandable and navigable interface can enhance the use of efficiency or satisfaction. Thus, when designing websites, it may be not useful to differentiate between usability and accessibility because it is not clear what should be included in accessibility standards and what shouldn’t be included in usability standards, vice versa.

However, some experts suggest that one way to look at the distinction between these two is to categorize interface problems:

  • Usability problems impact all users equally, including disabled people.
  • Accessibility problems, especially technical aspects (such as screen reader or magnifier), decrease people with disabilities to access a website.

Based on the above two categories and the widely accepted definitions provided by ISO(usability) and WAI(accessibility), we may conclude that, for the aim of equal use for everyone, a website is not usable unless it is accessible, meaning disabled people can use and access the website, and usability may imply accessibility but the contrary is not necessarily true when designing interfaces and websites. 


The needs of people with disabilities are often ignored in usability practice and research, but after learning and understanding what is accessibility, I think user experience designers should address accessibility (includes technical aspect) and usability together, so that we can build a more usable, accessible interface and website for everyone.





Petrie, H., & Bevan, N. (2009). The Evaluation of Accessibility, Usability, and User Experience. Retrieved from https://pdfs.semanticscholar.org/6896/17fb8d66ec0d3cd2e1012171461c22f4c6f5.pdf.

Petrie, H., & Kheir, O. (2007, April). The relationship between accessibility and usability of websites. In Proceedings of the SIGCHI conference on Human factors in computing systems(pp. 397-406). ACM. Retrieved from http://www-course.cs.york.ac.uk/advt/2013-14/classes/class10/materials/petrie%20and%20kheir.pdf

W3C. Web Accessibility Initiative. Retrieved from https://www.w3.org/WAI/gettingstarted/

Mifsud, J. (2011, June). The difference between web site usability and accessibility. UsabilityGeek. Retrieved from https://usabilitygeek.com/the-difference-between-web-site-usability-and-accessibility/


Design Critique: CamScanner (iOS app)

CamScanner is a mobile scanner application, which helps people to scan files in a quick and convenient way. Users can use it to snapshot office documents and manage images. CamScanner has three main features: 1. Being available anytime to scan and send scans to anywhere, even out of the office. 2. Enhancing image quality automatically and easy to export the files in multiple ways. 3. Being able to extract texts from images for further editing and sharing with OCR (Optical character recognition).

Here, I am going to use Norman’s terminology and concepts based on his book “The Design of Everyday Things” to identify the positive and negative designs of the overall appearance, scan process, and other functions of CamScanner.

1. Overall appearance

The appearance of the homepage is pretty understandable and discoverable. The design of icons is clear and to signify what the functions are and effectively uses the common knowledge of icon meanings that people have in the head, such as the camera icon means taking photos. Also, in the hamburger menu, it provides brief words next to the icons as clues to signify the functions and also to reduce the memory load for people to remember each function that each icon represents.

2. Scan process

CamScanner has a very fast and smooth scan process, and I analyzed the reasons as follows: It has a strong feedback, which provides users the instant reflection to know the result of the behavior during the whole scan process (step 2 & 4). For example, when choosing the scan mode, ID cards, a pop-up window shows up to remind you of what type of mode you are choosing now. It also uses green color as a signifier to hint that you are in the ID card mode now. Besides, before confirming to choose driver license or passport of the ID card mode, it uses a forcing constraint function—lockouts on the camera button, to prevent users from entering next step. Furthermore, when trimming the photo, it offers the natural mapping (best mapping) that users can directly adjust and control the trimming frame with their finger.

3. Other functions

For the delete function, it delivers a very good example of a lock-in forcing function. This makes it difficult to delete images unintentionally and make sure users do the desired operation.

The only negative design I found at the app is there is no feedback or saving button after making notes on the scanned image, so it is a little confusing that users might not know whether the notes have been saved successfully. Also, the edit button here is meaningless, since users still can go straightly to edit notes without touching the edit button. Therefore, I would recommend relabeling edit to save, which is a much clearer signifier to save notes.

Overall, CamScanner has a great conceptual model. The system image of the app goes really well and is pretty clear for the scanning process, delivering a great communication with users. Also, the learning curve of operating the app is very smooth and short for a first-time user. I almost could not find things that are really troublesome and violate Don Norman’s design principles. According to App store, its rating is 4.9 out of 5 with lots of positive reviews, which is really a great product!