My Own Front-end Framework Essentials Toolset Series: Practicing OOUX
I gave this talk at miniFFC on my own (evolving) process of framework essentials. It tries to encompass the design, development and production stage of developing a web app. What I wanted to do in this series is to share my tutorial-type series of what the framework essentials process.
Disclaimer: Because I am more adept at using Polymer and Firebase, this series will cover using Polymer and Firebase in developing the web app. Don’t worry, though. The concepts included also work with any other frameworks and backend services. I will try to explain the process as general as possible.
Reason
My reason in doing this is I wanted to have my own process in building my web app projects. After doing several of my own, for others, and after researching, consulting, and interviewing other developers, I have come up with my own process that I am comfortable with.
Disclaimer 2: The process I am going to do is an example of a full project creation from design to finish. But you can go start at a later part without doing the part before it, as long as a similar prerequisite has been met.
Disclaimer 3: I am just practicing and sharing what I have learned. I am not the expert in this area as well, but I have linked the sources here for more information. Enjoy.
Design Stage
My design stage starts with Sophia’s Object-Oriented User Experience Design (OOUX) and ends with Brad’s Atomic Design. You can read the links for a deeper learning on what those processes are, but I’ll try to cover them by applying it on a hypothetical project.
Hypothetical Project: Create a medium-like web app that allows users to create user-created articles.
Design Stage: OOUX
Prerequisite: User Stories / User Brief
You can do your own way of acquiring the prerequisites: user interviews, persona creations, contextual inquiry, focus groups, etc… For the purpose of the series, let’s say our user brief has already been provided below:
Give people an outlet to write their own blog and share it with others. Other people can comment on their own or other people’s blog.
- People should log in or create their account before creating a blog post or comment.
- People can create, edit, or delete their blogs.
- People can have the ability to publish or hide their own blogs.
- Other people can comment, and has the ability to edit/delete their comments
- Other people can like a blog, or follow another person’s blog.
- People can search, filter, and browse currently published blog.
Identify Objects
In identifying objects, try to look for nouns or objects created after doing a particular action. In essence, make sure that the objects are “tangible” objects (meaning it has an attribute) and not a vague concept. If it’s hard to differentiate, you can decide to park it for now until later when you see that it needs to be created. So for our example:
Now, what I will do is to write the objects in a piece of blue post it and post it on the wall.
Identify Attributes and Metadata (or core content) of your Objects
In identifying attributes and metadata, try to think of information that usually describes the object: first name, last name, email for the object person; date created/updated, title, and blog for the object blog; and comment message, and date/time created for object comment. To differentiate an attribute from a metadata, i follow this rule for now: if it an attribute is used to filter or sort an object list, then it is a metadata.
Write the object’s attributes in yellow post-its. Write the object’s metadata in red post-its. After that, put them below the object.
Cross-link objects with each other
Now we can put objects under other objects depending on their relationship. One example is that we can list down all people who are following another person, or put the set of comments. This way, we can see the relationship or data architecture forming a little bit.
Rank information importance
Now it’s time to rank the attributes, metadata, and objects in terms of “What would the user wants to see first? What does the user need?” Take note though, the ranking doesn’t mean that the ones in the bottom are put at the bottom of the page, it just means that it is not the most important for now. Things can change as well once you have tested the site, so the ranking is not set on stone as well.
Create a CTA Inventory for each Object
What is a CTA inventory? CTA stands for Call to Actions. These are actions done by the user to manipulate the object or others through that object. Sophia did a really good article on how to do a CTA. One way to determine the CTAs is to look back at the user brief, and underline/mark the actions done by the user to the objects.
From here, you can put the CTAs above the objects.
Output
The output would be above to be used to the next part which is Brad Frost’s Atomic Design. What I liked with this approach is that I can now visually see the minimum bare essentials of the system by distilling the essential objects, their attributes, their relationships with each other, and how to manipulate/do action with them.
In the next part of this article, I’ll write about how I transform this output into a visual designed page, and how I created a style guide out of it using Brad Frost’s ideas.
