Tag Archives: UX

Functional Specs 101

I am taking a course on production pipelines and project management. Knowledge of project management is a great extra to add to skill sets of UX researchers/designers, who are going to serve in a product team and work closely with other functions such as UI designers and developers.

As the UX lead in the course project, I learned quite a lot about the streamlined product development cycle. We as a whole team went through the confusions on procedures of creating Functional Specs, and how to integrate other UX research steps such as user research and wireframes into the writing of Functional Specs.

Here, I am going to share my understandings and learning notes based on several readings and class practices on Functional Specifications (Functional Specs) basics and its role in project executions. I am trying to achieve this goal by asking the following 3 questions:

What are Functional Specs?

In a nutshell, Functional Specs are documents that specify the “what” and “how” of a product – What is the product set out to do? How does the product look like? How do users interact with the product? What are the technologies to achieve the functions? It should include the purpose, look, and behaviors of the application.

Why we need Functional Specs?

  • Function Specs serve as roadmaps for product development. By nature, it provides both the landscape and all the necessary details of a product, which meet the requirements of stakeholders, to the developers. Thus, I view Function Specs as the bridge between frontline-clients/users and backstage developers, groups that are vital in product design but might not have a chance to direct communicate with each other.

Function Specs as a Bridge

  • Function Specs help to streamline the product development process. Through writing Function Specs, the product team can gradually move from chaotic information-gathering stage (with ambiguous and different understandings/inputs)  to reach an agreed vision of the product.

However, this happy ending needs to be built upon quality procedures to create the Functional Specs.

How to write Functional Specs?

  • Do the research to define the product.

This stage is what most UX researchers are familiar with. At the early stage of product development, researches are needed to generate a clearer definition of the product. I view this early-stage research system as a bi-directional system: top-down research approach and bottom-up research approach.

By top-down approach, I mean conducting comprehensive analysis on precedent similar products to (1) avoid reinventing the wheel; (2) get a quick understanding of the product through a short cut.

Bottom-up approach, on the other hand, requires more time and efforts to learn the target users as well as communicating with clients to define the product. User-centered design methods such as ethnographic study, contextual inquiry, interview & focus groups, and task analysis can be used to this end.

  • Create the designer model / represented model.

After gathering and analyzing all the data, models can be used to represent research findings. As pointed out by Allan Cooper in About Face 3 (a must-read for UX designer/researcher), there will be 3 models in a product: users’ mental model, represented model (or designer model), and implemented model (or programmer model).

Users’ metal model represents what users see and understand in front of a product – a perceived product.  This can be studied and represented as persona and persona-based scenarios.

Implemented model or programmer model is the actual mechanism that runs the product, mostly only understood by programmers.

The huge gap between users’ mental model and implemented model is bridged by represented model (designer model). It is through this represented/designer model that users interact with the product. Thus, Cooper pointed out that a good design is having a represented model as close to users’ mental model as possible.

Mental Model, Represented Model, and Implemented Model by Allan Cooper

Mental Model, Represented Model, and Implemented Model by Allan Cooper

Since the represented model is the exact layer we are designing, it becomes the focus of the Function Specs writing. Meanwhile, its bridging nature also means that whatever we are designing on this layer, we should always keep users’ mental model and technical limitations in mind and open the communication channel to stakeholders and programmers.

  • Design the information architecture.

So, when we focus on the represented model, what exactly we should consider? The first and foremost step, as what we learned in sketches, is the architecture of the application. Try to think about these questions: What are the key pages users need to visit? What is the function of each page? What elements and contents should go to each page? After answering these questions, we will be able to establish the structure and flow of the information.

At this stage, flowcharts, interactive prototypes, and wireframes can be very helpful to organize thoughts, represent results, and provoke discussions. Wireframes are extremely helpful to gather stakeholders’ feedbacks on functionality and architecture of the product because it strips out distractive design elements entirely. The core objective at this stage is to get the represented model onto paper, in the form of flow of key pages and navigation design.

  • Design documents

Design documents can be viewed as pre-Functional Specs documents. We can put all we have together and document all the feedbacks. Based on this, more detailed Functional Specs can be built. A lot of iterations will happen at this stage, including redesign of information architecture, visual appearance, and detailed interactions. Through several iterations, the team might be able to get to a clearer view of the product and reach final consensus.

  • Functional Specs

Here comes the final step. To this end, we need to write up the Functional Specs to put everything we’ve been discussing and improving on the paper. This again, makes sure that our clients are aware of and agreed on what we are going to built and the programmers have the “Bible” that they can refer to. More technical requirements (say, which development technologies to use) might need to be discussed with programmer representatives.

So, in the end, what makes good Functional Specs? Check if the Functional Specs have following characteristics:

  • Blueprint. The Functional Specs should give an overview of what this product is about and who are the target users. This helps to build the consensus among the whole team. However, don’t include unnecessary research data (especially those “raw data”) to confuse and overwhelm programmers. A clear table of content is also very important to facilitate a holistic understanding towards the scope of the product.
  • Exhaustive details. Try to include all the teeny-tiny interactions going to happen in the app. Company the explanation with corresponding screen shots. This could be harder than we thought – there might be a lot more “what-if” situation that we didn’t fully consider, which could cause a lot of confusions and communication cost once deployed to programmers. Practice and a good eye is needed.
  • Consistent and concise writing. Use the same design language throughout the document. Don’t use two terms to refer to the same elements. For example, do not randomly use “drop-down list” and “drop-down menu” interchangeably in the same document.

This learning notes are based on class materials, and some more readings, especially the following two. They provide clear and in-depth explanation on Funcional Specs, with great examples.

Functional Specs Tutorial by Allen Smith

Painless Functional Specs Tutorial by Joel Spolsky

Next time, I will briefly review the Agile development model and discuss how we adopt it in our projects.


Social Media as The Battlefield of Marketing

I was at the ExactTarget’s annual Connections conference on Tuesday. It was a great learning experience listening to the talks given by @kyleplacy and @scottdorsey on the state-of-the-art marketing technologies. I paid special attentions (selective attention maybe) to the role that social media plays in digital marketing. Here, I would like to reflect some take-aways from this conference. These points are by no means comprehensive enough to cover the topic of social media marketing, but rather elaborations on the notes I took at the conference.

Brand Co-creation

Brand co-creation is a marketing strategy that tries to achieve amplified branding impacts through engaging consumers. The emerging of social media changes the landscape of marketing, from segmented and passive consumer groups to connected and active consumer groups. This shift is similar to the idea of “context collapse” as discussed in class, as the connectivity and transparency of social media breaks the barriers between different social/consumer groups. By leveraging the power of social media, marketing can be much cheaper and more efficient for the companies and enjoyable for the consumers.

Does the following screenshots look somehow familiar? Are you also part of the co-creation process?

Toms #travellingTOMS compaign

Toms #travellingTOMS campaign

Shutterfly FB campaign events

TOMS encourages customers to post traveling photos with their TOMS shoes in the photos, and Shutterfly asks you to invite your friends to personalize and get a free photo book while you get a 50% discount. When you think about these events and many other out there, you will be amazed by how these events can bring companies thousands of clicks, transactions, brand awarenesses, and storytelling-style advertisements. All you need to pay is some free photo books and let you do the work for them. Also, use of the hashtags (#) makes the brands more recognizable, and makes it easier for companies to gather and analyze the data.

Personalized Experience:

Coming closely with brand co-creation is the personalized experience – individuals create unique experience interacting with the companies through the co-creation events facilitated by the companies. This helps to create stronger bonds between customers and the brands. Another perspective to see personalized experience is from the big-data point of view. By acquiring more and more information through social media, companies are able to deliver more personalized, and context-awared information to customers. Relevance driven by data is the key to create this kind of tailored experience. That is also what we talked about in the first week of class: “data is the internal Intel”. Data is a core value of social media.

Consumer Mobility

Based on a Gartner’s report, by 2013, mobile phones will overtake PCs as the most common Web access device worldwide and that by 2015 over 80 percent of the handsets sold in mature markets will be smartphones. The change of market is not only manifested as the increased quantity of mobile devices, but also on consumer behaviors: based on another report from Gartner, worldwide mobile transaction values will reach $235.4 billion in 2013, with a 44% increase from 2012, with an expected 35% annual growth between 2012 and 2017. All this data is suggesting an important marketing as well as UX-design lesson: whenever a social-media campaign is planned, usage through mobile devices should be primarily addressed.

It was amazing to see how user/customer experience can be enhanced by these digital marketing approaches. This not only helped me to better understand the business behind social media but also provided me with a new perspective to look at UX.

An Insightful Video about IxD Big Picture

I came across this great video commissioned by Bassett & Partners, talking about the future connecting world and how interaction design can contribute to it. Many mind-provoking throughts.

My take-aways from it are two points: (1) Embrace “natural” interactions – removing constrains and artificials; (2) Connections among things through sensors and cloud will lead to environment- and context-dependent future interactions. What is yours? Enjoy.

Connecting from Bassett & Partners on Vimeo.

Four Reasons Why I Love airbnb

As a big fan of traveling, I was thrilled to find airbnb.com. I am attached to it and visit it frequently even when I am not planning for any trip. It is not only usable but also enjoyable.

This website gives me great experience mainly because of the following 4 reasons:

  • Clean navigation and prominent searching area. As a platform offering choices of accommodations for travelers who have destinations in their mind, searching function should be significant and easy to find. Airbnb does a great job of placing the core function at the very center of the home page, which will also take the central place of on a commonly sized laptop screen. A “search” button colored with bright pink will ensure that you don’t miss the search box embedded in colorful cover photos.   

Screenshot 1:30:13 11:30 AM           In case you are new to the website and just want to wonder around and check it out, the fixed   search bar at the very top of the page will stay what ever page you are going to visit and quickly help you get back to track when you are ready to search for specific destination.

      This simple but thoughtful navigation design can always remind and facilitate users to complete the key task without hassle.

  • Pleasing visual enjoyment. For all online shopping sites, visual attraction is a key to attack and retain visitors. Airbnb is also a form of online shopping sites, where people make purchase decisions without seeing and touching real products. What the difference between airbnb and other online shopping store (e.g., Amazon, Nordstrom, and eBay) is that airbnb is not only selling the product itself, it is also selling the living experience and life styles. These hidden selling points are in no way negligible. Thus, I appreciate the attention and value airbnb has put on the quality of the images and delightful color schemes of the website. I have no doubt that users will be attracted by most of the photos posted and feeling hard to make a decision not because the options are undesirable but because they are all too fancy to just choose one. Furthermore, the whitespace among images is reasonable, rendering great visual effect.
  • Integration of social functions and wish list. This newly-added feature showed a salute to the good idea and experience on Pinterest. I viewed it as a tipping-point that airbnb evolved its focus on exploration rather than just search. Much like a soymilk-maker company in China spent great efforts to advocate and advertise the benefits of drinking soymilk in order to sell its products, airbnb offers contexts and atmosphere of different places around the world to arouse the pleasant yearn for traveling, and indicating living with airbnb is the best way to really immerse oneself in the local culture. I love the wish list function because I can “pin” interior designs that I love, save places for future trips, broadcast on Facebook about my taste, and plan trips with my friend collaboratively. Airbnb introduces the wish list function in the home page, right below the prominent search function. Users can easily browse popular wish lists. What adds to enhance this joyful experience is the great coding – it brings almost infinite scrolling, smoothy and robust. Screenshot 1:30:13 4:48 PM

      In each individual space page, saving to wish list or sharing function (to Twitter and Pinterest) is handy. It is convenient at any stage to bookmark favorite choices. Overall, airbnb enables different pathways for users do discover fun places and ignite their unconscious desires.

  • Trust system and adequate product information. Another formula of successful online shopping site is to build the sense of trust and ease the process of making purchase decisions. Airbnb succeeds in setting up a trust by using traditional user reviews system and approachable profile information of house-renters. Below shows randomly pulled two renter’s profile bar on the property’s page: Screenshot 2:7:13 11:23 AM

      The font used to spell their names is handwriting style, creating a sense of friendliness. Other performance matrices reflect their working style. They helps users to make good matches with the renter they are going to deal with and be aware of what to expect. By clicking the name of the renter, users could check more detailed information and business record of her. All the means very much secured users trust towards the website.

      To help users make informed decisions, useful information is also ready available and easy to navigate through. For example, information regarding a renting property could be viewed in photo’s form, geography form, street-view form, and availability form, using tabs to toggle among. Detailed description, amenity list and house rules (e.g., no smoking, and no pets) are also specified right below the photo gallery. Screenshot 1:30:13 11:03 PM

Above are the major 4 reasons why I have great experience on airbnb. As I browse it, I discover more lovely features that reflect those fine considerations from the website designer. A lesson learned.


UX booth is one of my favorite blogs about user experience study. This blog is run by a group of people named UX community. Its online presence delivers informative articles and resources on usability, interaction design, and user experience. The blog is updated regularly and has a readership mainly composed of beginning-to-intermediate user experience and interaction designers (just people like us).

If you take a look at this blog, it itself is a pretty nice, and user-friendly website (of cause, it has to be!). The map of the blog is easy to grasp (very good visibility!). As the blog consists mainly with articles discussing and sharing different aspects of user experience, it provides a clear achieve of related topics, which you could find either on the top of the page, or the bottom of the page. Other forms of information, such as video records, podcasts, tools and books that they recommend, or even some get together they organized, are achieved in “resources”.

Overall, I think this blog is pretty cool. It has something you might already know about, some more you might haven’t heard of. This is good for us as learners — you could have some reflections on your experience, and you could also learn new things as well. You could also join the community and contribute as a guest writer. As I subscribed this blog to google reader, it told me that there are already 13,693 readers has subscribed it (don’t leave yourself out!), and the update frequency is 1.4 posts per week. Check out the latest blog — “Personas: putting the focus back on the user” — isn’t it appealing to you?