When I am working on a UX project, things can easily get messy with bunch of sketches, flows, wireframes, user research data, notes, prototypes and so on. While I feel a strong temptation to just focus on the current UX work, I learned overtime that it’s actually really important that I always keep up with my UX process documentation as I go. I’d like to share my learning with you.
Why document your process?
Here are the reasons why I think it’s important to keep up with process documentation based on my experience:
1. It helped me see a bigger picture of a project.
While I am deep in a UX process, I focus on my current task in front of me, and I tend to lose sight of where I am from a larger context. Documenting my process allowed me not to lose a high-level perspective of a project because glancing at the documented version of my work always gave me a slightly more objective view of my project.
2. It helped me keep track of what changes I made based on what reason.
When I made design changes, I experienced many times that I couldn’t remember exactly how that happened. Things got lost in transition, and it was always hard to pinpoint later whether a change was made based on a user research feedback, or a comment from a stakeholder meeting/etc. Keeping up with a process documentation really helped me stay organized, so that I didn’t lose sight of all these cause and effect relationships that occurred over the course of the design process.
A process documentation to me is a critical artifact and a record of a project. This was extremely useful when I wanted to put together an in-depth case study of my project for an in-person job interview type of occasions. Of course I had to create a more simplified version to be used effectively for any particular interviews that I had, but the foundational information was already there in my process documentation, which made it super easy to do so. No need for further digging or trying to remember what happened when I was actually working on that specific project a few years ago.
From my experience, it worked better to put together a process documentation in a presentation format such as Microsoft Powerpoint or Apple Keynote, rather than a document format such as Microsoft Word, or a web-based platform such as Confluence.
Microsoft Word does not work well for an on-screen presentation as presentation screens are typically landscape, and it works better when each slide does not require scrolling.
Some companies use Confluence for project communication and documentation purposes, but the problem with Confluence is that :
Things can easily get out of control
It makes it harder to archive when you leave a company
A presentation format also helped me organize and summarize key points so that it all fits in one screen.
How to organize
When I work on a UX project, I typically follow a UX process.
Naturally, a process documentation that I create roughly follow this process in a chronological order, so that I can easily follow the progression of a project.
Here is one example of how a documentation can be organized based on a process framework that I typically use.
1. Problem statement
I define what problem I tackled clearly at the beginning.
Additionally, I often create different slides for things such as: project background, goal, a team structure including my role and responsibility, timeline, project type (launched product, future concept proposal/etc).
2. Competitive analysis
I typically find it very useful and informative to do a competitive analysis of some sort for any project.
When I do, the learnings could impact my design decision and output. Thus it’s good to document how I researched the competition, or how I learned certain things and took queues from other products relevant to my project.
3. Concept development
This is where IA diagrams, task flows, wireframes and prototypes go in.
If I did brainstorming or workshop type of activities to come up with and expand ideas and concepts, I document those too with images and output summary.
Each findings should have concrete actions to take.
Other things to include are: user research framework (what and how I or my team tested), research overview (when, how many participants, how long, research format), brief summary of each participant’s profile.
It’s always good to include photos of user research sessions to give the audience some visual cue to help their understanding on how research sessions were held.
Insightful user quotes are always great to include and highlight, which could be put as part of summary of findings.
No need to put every single details, but including all above usually gives a very clear overview of the learnings from the user research and how actions were defined based on those.
5. Design iteration
This is where I show how I iterated the design by incorporating learnings from the user research.
It’s important to highlight which part of the design is modified/improved based on which user feedback from which user research round if there are a few rounds.
Depending on a project, I may have a few rounds of user research and design iteration.
6. Next steps
Depending on a project, I may also add “Next steps” to describe what should be done after the step 5.
7. What worked, what did not work
It’s also helpful to spend some time and write down what worked and what didn’t work throughout a project.
Sometimes a project team does postmortem sessions. I’ve experienced several of those, and it was always very helpful. If that’s the case, discussion points from those sessions should be included here.
Acknowledging what did not work is an important part of being a UX designer. In reality, every project has things that did not work well. Understanding this is a great learning opportunity to do something better in the future.
In order to clarify and highlight a success (or a failure) of a project, it’s also effective to include user test participant’s and stakeholder’s quotes.
I also find it important to include key design decisions made throughout the process, so that it becomes clear how I or a team made certain decisions based on what kind of reasonings along the way.
From a practical point of view, it’s also helpful to insert various links from the documentation back to more detailed assets such as prototypes or user research raw data, so that I can easily bring those up when needed.
You might feel that all these are too much extra work on top of what you already have on your to-do list.
But over time, you will feel grateful that you did. At least I did.
Because, I can easily forget many of the details and nuance of a project once it’s completed, and if I leave it for a while, a few months, a few years, then I won’t be able to accurately recollect and capture those details in my documentation. As long as I do this while I’m still working on a project and my full attention is on it, I can document it in the most accurate way possible with enough important details to help telling my story later on.
Process documentation became an invaluable asset and record of my work. That’s what I went through and found out.
Many people are not sure if UX is the right fit for them, especially when they want to switch their career path or a field of study.
Because the field of UX is broad and constantly evolving, everyone sees UX differently.
The only way for you to find out if it’s the right fit for you is to actually experience what its like to be a user experience designer.
So what does that mean?
This means, you have to try working on your own UX project.
Some of you might wonder,
“What? How can I work on a UX project if I haven’t learned anything yet?”
That’s very true to be fair.
But at the same time though, the best way to learn is to actually try it by yourself.
If you are already interested in UX at this point, something in UX must have attracted you in the first place, right?
That means you know something about UX.
You might have already done quite a bit of research, reading books and articles, watching videos and so on.
If that’s the case, it’s all good.
You can start your own UX project.
To do so, you need to go through the followings:
Define a problem
Research similar products that solve similar problem you are trying to solve.
Develop a concept to solve the problem
Test with users
Iterate your design based on what you learned from users
It’s OK that you don’t know.
The important thing is that you look for a UX problem that you came across in a product or a service that you use on a regular basis, and start defining that problem clearly.
Once the problem is clearly defined, go through the 5 step UX process that I described.
For more details on how to work on your own UX project, check out my other article.
There’s another thing that you should look into.
This is more about your mindset and traits, whether it fits for a UX designer or not.
I put together 12 traits that are required for a UX designer as follows:
Great at collaboration
Eager to experiment
Understand how UX impacts business
Good story teller
A UX designer solves a user’s problem. You need to be a problem solver, as well as a problem spotter, and a problem definer.
To do so, you need to talk to various people including users and stakeholders. You need to be a good listener when listening to PM and engineers to understand product requirements. Same thing when you listen to what users have to say during user research. Especially when you listen to users describing their pain points when using a product or a service, you need to be empathetic so that you can put user’s shoes to really understand their frustrations.
During usability test, you need to shut your mouth, and be a curious observer trying to carefully observe how users interact with your prototype.
UX designers often function as a facilitator of various different teams. When working as part of larger team, you need to be great at collaboration, with less ego with a humble mind to be open for other people’s comments and critiques.
And when you take all the stakeholders’ feedback and user research insights, UX designers should have do-er mentality and be eager to experiment with various ideas and concepts hands-on to explore and achieve the best solution for a given problem.
At the same time, UX designers should have a good understanding of how UX impacts the business, so that they don’t propose unrealistic concepts.
When presenting UX concepts or user research findings to a larger product team, UX designers need to become a good story teller without getting egoistic. At the end of the day, UX designers create user experience for users, not for themselves.
As you can see, all these traits are deeply inter-connected with each other.
Many of these can be learned/acquired, especially #11, but some people have some of these more “naturally” than others.
To summarize, you should be able to discover many things around whether UX is the right fit for you by
Working on your own UX project.
Going through 12 traits required for a UX designer to see how many fits you.
Aspiring to-be-UX designers tend to focus their attention on fancy, shiny user interfaces of popular products and services from Apple, Google, Facebook, Amazon, or amazing futuristic cutting-edge technology opportunities such as A.I., virtual reality, and so on.
While many UX designers are involved in such high-profile products and services for sure, the reality is that far more UX designers deal with not-so-fancy (but meaningful) works. I wanted to talk about one of such products called AppAssist. Hopefully this gives a glimpse of how UX designers work in some of those non-fancy projects and what that means.
AppAssist was a mobile app that Veritas Technologies released in 2016. I had an opportunity to work on it as a lead UX designer of the team.
Veritas offers data backup and management solutions for enterprise customers, through a mix of hardwares, softwares and services. These hardwares are called data storage appliances, which are primarily used by customers to store their computer data in on-site or off-site data centers.
Because these appliances are bulky server computers with peta-bytes of storage capacity, it required specially-trained hardware service engineers to do installations and repairs. Veritas partners with a third-party company to handle appliance installations and repairs. To assist the third-party company’s hardware service engineers with the installation and repairs, Veritas created AppAssist.
Installing an appliance hardware at a data center was a pain-in-the-ass work
Appliance hardware installation typically happens in a harsh data center environment, where customers or third-party service engineers just want to know what they need right away to get their jobs done as quickly as possible.
What do I mean by “harsh”? These data centers are filled with rows and rows of computer server racks, with each rack filled with numbers of server boxes. Because these are enterprise monster servers with hundreds of hardware disk drives for storage spaces, it gets very noisy with the sound of spinning disks and cooling fans. For this reason, a data center’s room air temperature is kept very low like a giant refrigerator. Altogether, it creates an environment where you don’t want to spend too much time in it.
Appliance hardware installation was identified by the responsible UX team as one of the biggest challenges in the appliance journey map. It was a fairly complicated procedure that must be done correctly by service engineers at a harsh environment under a tight time constraint. If something was done incorrectly, that meant scheduling another service engineer visit to a data center, which was an additional cost. If a service engineer kept calling Veritas support phone line during the installation procedure, that was another additional cost. It all adds up. At the end of the day, it were the customers who suffered the most because all these delays forced them to delay their server deployments, which could be a huge impact for their businesses.
Enterprise world is slow to adapt technology trends
Before AppAssist was created in 2016, the company already had bunch of supporting documents to help service engineers install appliance hardwares. But these were traditional PDF documents meant for printouts, and videos produced for internal training sessions. Some service engineers went through these materials at their offices prior to arriving at a data center, or brought a PDF printouts with them. It was never fully optimized to fit the actual use cases with real contexts in mind.
In 2015, the internal UX team initially created an interim solution, in the form of a set of flip cards. This was a neat idea, a lot more visual and portable compared to traditional PDF so that you could flip through to find what you needed visually. It also had a convenient keychain clip so that you could clip it to your cloth during the work for easier access. While this was quite an improvement compared to a PDF, it was not perfect.
Meantime, the whole world was moving ahead with everything becoming accessible via mobile phones. When everyone already had a mobile phone by default, not taking advantage of that seemed a missed opportunity.
This was where the internal UX team proactively took an initiative to bring in mobile as part of appliance hardware installation experience. This initial effort was lead by then-director, Jane Bungum working closely with Loren Horsager and Catherine Gillis from a SAAS startup company called Mobile Composer. After they successfully convinced Veritas top management, I joined the team.
How can a mobile app improve appliance hardware installation UX?
Just enough. Just-in-time. Hardware help in your pocket.
This was AppAssist tagline. Let me deep-dive into what this means.
Many data centers have very strict security rules, and don’t allow internet connection to protect servers from potential computer virus attacks and data breaches. So service engineers were forced to figure things out either by reading through static print documents, or calling Veritas support phone line for a help. These data centers are called “dark sites”.
Having all the necessary information in form of video in a mobile app could potentially improve service engineers’ appliance hardware installation experiences. But because of no internet connection at a data center, video streaming was not an option. So AppAssist went with a download model.
In today’s streaming-centric world, content download model sounds so outdated, but that was exactly needed to fulfill this specific user need in such a restricted environment. Welcome to the enterprise world.
Leveraging existing content through forming a multi-disciplinary team
The company already had several internal teams who were in charge of producing supportive contents including appliance hardware installation guides in form of PDF and videos.
Technically, no new content was created for AppAssist. Instead, AppAssist leveraged existing content already produced by internal teams, and focused on optimizing those content to fit best to this specific UX problem for specific users (customers and third-party service engineers) under a specific context (install appliance hardware at a data center).
In order to make this work efficiently and effectively, a multi-disciplinary team was formed.
It consisted of a UX director, a product owner , a visual designer, a UX researcher, a technical writer, engineers from Mobile Composer, and myself as a lead UX designer.
Important thing to highlight here is that AppAssist team respected the existing functions that the company already had, and invited those people to join the team, instead of creating a new fancy position such as a “UX writer” and try to take things over.
For example, a technical writer who joined the team was the one who had always been in charge of producing technical guide documents. A videographer that I collaborated was the one who had always been in charge of producing instructional videos for educational purposes. The videographer was not exactly a member of the team, but I collaborated closely with him, and participated in his video shooting sessions so that the video was shot with mobile usage in mind. Kavita Bhalerao, a visual designer, even supported their video production by creating an animation that showed how to position server boxes into a data center rack.
What AppAssist team essentially did was simply utilized what already existed, and optimized those content into a mobile-friendly experience through content analysis, content reorganization, and user-centered design practice, through a tight collaboration among people from various different disciplines.
Because Loren Horsager from Mobile Composer was one of key members of this multi-disciplinary team, AppAssist was able to take full advantage of Mobile Composer’s SAAS platform, and plugged in all the content into its content management system (CMS), and utilized its analytics engine to learn usage patterns.
Mobile Composer’s CMS enabled content update on the app super-easy. This worked beautifully, so that Chad Busch, a technical writer was able to update pretty much any text within the app from a web-based CMS UI without having to publish a newer version of the app at app stores.
Mobile Composer’s platform was also capable of capturing detailed analytics data such as in-depth workflows of its users.
Jennifer Teves, a UX researcher created an intriguing workflow map above, which was a visualization of a 62-minute-long journey of one of AppAssist users. Through these analytics, Jennifer was able to further study how users were interacting with the app during their hardware installation works at data centers.
Concept development: Static flip card to video-centric experience
The physical nature of the original flip card made it a nice-to-have goodies. But at the same time, it had quite a few problems, such as pages easily got torn off and dropped from the ring, it was hard to update, you couldn’t see things in action/motion. Also a physical format felt a bit outdated in today’s world where everyone had a smartphone.
Mobile app introduced motion (video, animation), dynamic interactivity, and hyperlinks. Step-by-step procedures captured in video greatly helped a user’s cognitive understanding of how each step actually worked. In order to maximize this advantage, I had to design a mobile app with “video-centric experience” in mind.
Traditional video transport controls such as fast forward, rewind, previous and next originated from mechanical controls for physical tapes, which only allowed mechanically-even incremental jumps forward and backward. This didn’t provide any meaningful + intelligent control as it didn’t consider content breakpoints. Modern mobile video players introduced an interactive progress bar that you can scrub through along the timeline, but this didn’t necessarily work well to find an exact scene that you wanted to go to either.
During the research phase, I came across Khan Academy mobile app, which had an interesting UI where it listed all the subtitles underneath the video like a playlist. A user could tap on any of those to actually jump to that point in the video. It allowed a user to scan through key moments within a video quickly, and jump right in to that scene. Everyone in the team really liked this content-oriented approach, and I took a cue from this reference.
Deep dive into content structure
In order to create the best experience for a user, it’s critical to have a deep understanding of the content itself. As part of that effort, I created a structure breakdown of 88 pages of existing flip card. Magenta-colored pages indicated that those had QR codes that linked to relevant videos.
Breaking down videos into micro-scenes for better scan-ability and find-ability
Video is a powerful media. It can show things in action, things in motion. It works great for instructional purposes. One of problems with video as a media format is find-ability of a specific scene within a video. To solve this, the team came up with a concept of “micro-scene”, which was a smaller component breakdown of a video, taking a cue from Kahn Academy app.
Below shows how each video was broken down into micro-scenes so that each micro-scene was labeled exactly with what it was showing.
This was a lot of work, and required a thorough understanding of the content. Fortunately, I was able to get a help from an expert in the team. Chad Busch, a technical writer, took on this task and did a great job breaking down videos into micro-scenes, recorded all the time stamps, and added every micro-scene a unique, easy-to-understand name.
The overall information architecture of AppAssist was driven from a deep understanding of the content itself. Naturally, content was organized based on different appliance models, with each model having primary steps/categories such as storage, compute node, cabling, verifying, access, with each category broken down into a number of micro-scenes.
How to effectively navigate micro-scenes
Once the content analysis was completed which informed the overall information architecture, the next step was to define an interaction model. Since how to find a specific scene within a video quickly was the core focus, I came up with two interaction models: a) flat model and b) hierarchical model.
The flat model basically stitched all the micro-scenes across all 5 categories into one long list. The hierarchical model added a category page to pick a category first before getting to a micro-scene list.
When Jennifer Teves, a UX researcher conducted user research sessions, most participants preferred the hierarchical model over flat model, because this model was simpler to understand, and made it clear to them which category they were currently looking at.
I also explored a few different ways to help navigate micro-scenes faster, including speed-scroll feature. The portrait speed scroll never implemented, but the horizontal carousel view was implemented. Because AppAssist adopted hierarchical model, the speed-scroll became less relevant as the micro-scene list ended up shorter.
The version 1 launch
AppAssist version 1 launched in 2016. Essentially, it was a super-optimized hardware installation video for hardware service engineers, so that they can immediately find specific scene by scrolling through micro-scenes, and playback that part right away. It may sound underwhelming on paper, but it served the purpose, and was received very well by service engineers. You can see the app in action below.
Compared to a PDF or a flip card, AppAssist added substantial key values to both its users and Veritas internal teams.
AppAssist provided an always-current, accurate hardware information that was easy to scan through and find what you needed.
A web-based CMS made it super-easy for the internal team to update the content without having to publish a newer version of the app.
AppAssist was able to track every interaction of its user to better understand both product needs and training, communication gaps.
AppAssist reduced customer service calls by making information universally accessible. Support calls were expensive, so this was a big deal for the company.
The version 2 launch
AppAssist version 2 launched in 2017. The version 2 added support for parts replacement guides. Just like hardware installation videos in version 1, AppAssist version 2 optimized already existing PDF guides to fit better to a mobile viewing experience in form of an accordion-structured format. These documents also adopted the content download model for the same reason as videos in version 1. It was nothing more than that. But it served the purpose well, and received very well by its users again.
Since launched in 2016, AppAssist had helped hardware service engineers install Veritas appliances, and replace hardware parts by having hardware installation videos and parts replacement guides in the palm of their hands.
Unfortunately, AppAssist discontinued in 2019 due to financial reason.
A rewarding experience
Even though it may not necessarily look like a fancy project, it gave me a very rewarding experience. I truly enjoyed the entire journey of launching version 1 and 2 of AppAssist. I felt very lucky to have had a chance to work as a lead UX designer for the project with such a talented, highly-motivated group of people, including Jane Bungum (director), Siddharth Mankad (product owner), Jennifer Teves (UX researcher), Kavita Bhalerao (visual designer), Chad Busch (technical writer), Loren Horsager (CEO and founder, Mobile Composer), Catherine Gillis (CMO and founder, Mobile Composer), and in a later phase of the project, Raj Rath (UX researcher), Mark Harris (technical writer), and Stephanie Kuo (UX/visual designer).
Everyone in the team contributed from different perspective and expertise, and formulated excitement and synergy throughout the project, which fueled fast-paced iterative design and development process.
In a nutshell, having an experience working for an enterprise product/project could give you a very rewarding experience, if you have a right expectation and a right mindset, and have an opportunity to work with highly motivated group of people.
It may look boring on the surface. But a true value lies beneath the surface. And that’s the beauty of being a UX designer, to be able to get down to reveal what’s behind the surface through deeper understanding of a user, content, a problem space, and an overall context.
Enterprise companies are more likely to have better, intimate relationships with their customers because of the nature of their businesses, which actually could provide a great UX research opportunities. So if you never thought of working for enterprise companies/projects that you’ve never heard of, consider those, as it might potentially reward you more than what may seem fancier.
Mobile Composer is a software startup company based in Minneapolis, Minnesota, specializing in mobile app development based on a SAAS platform. AppAssist was featured as one of their case studies on their website.
Today, I wanted to give you a bit more in-depth workflow comparison between these two:
Draw with a capacitive stylus on a trackpad
Draw with a pen on paper then scan
OK, let’s start with a stylus on a trackpad.I draw these simple line art illustrations for my YouTube videos.
Let me show you how I do that.
I open a Photoshop file with a dimension of 1920px by 1080px to fit a full HD video. I already have my Photoshop file set up with a blue background. In Photoshop, I choose a pencil, and set a size to be 12px.
Then I choose white color then start drawing with a stylus on a trackpad.
As I mentioned in my previous article, one of slightly annoying things with a capacitive stylus on a trackpad is that you have to do the registration every time you start a new stroke.
This means that you have to move around the stylus to make sure where the cursor is before start drawing. Once you start drawing, it works fine as long as you draw a continuous line.
But once you finish a line, then you need to register the stylus position again.
Now this time, unlike the very first time, it’s easier because you just finished your first stroke, so the cursor still remains at where you left off for the most part, so that you can pick it up from there.
When you are drawing with a stylus on a trackpad, basically you have to maintain the clicked status of the trackpad.
But sometimes, you accidentally exit from this clicked status.
When this happens, you have to apply pressure to get back to the clicked status so that you can draw again.
If you want to change the size of your pen, you just have to adjust the size in Photoshop or whichever software that you use.
Since my illustration style is kind of casual and loose, I worry less about precision. Having some looseness actually adds some nuance and taste to the illustration style, so it’s better not to be super precise.
Once I’m done with basic line drawings, I do the coloring. I use 2-3 colors for coloring. To fill a closed area, it’s a lot easier to use Photoshop’s magic wand tool to make selection. Once coloring is done, that completes the illustration.
Because I drew everything directly on computer with a capacitive stylus on a MacBook trackpad, this is it and I don’t need any back and forth process, which is the beauty of using stylus to draw directly on a computer.
Now, drawing with a capacitive stylus on a trackpad is definitely not as natural as a pen and a paper.
You lose some ability to have detailed, fine-tuned, precise controls.
And it’s a bit annoying that sometimes you accidentally exit from a clicked status of the trackpad.
Also, for the most part I keep my drawing hand off the trackpad while drawing, so that the side of my palm doesn’t get recognized by my trackpad, which sometimes happens.
Overall, you need to be more careful and paying attention continuously on how you hold your hand, how you maintain the clicked status by applying just the right pressure to the trackpad as you draw.
But for the most part, it works fine for this type of rough illustrations.
Now, let me show you how I draw the same illustration using a traditional pen and paper.
Here I have a Sharpie, and I’m drawing on my sketchbook.
The feeling of drawing with Sharpie on a paper definitely feels much better.
You feel like you are actually drawing in a conventional sense.
The strokes are a bit more fluid, and I can draw a bit faster compared to stylus on a trackpad.
I can have a bit more subtle nuance to my illustration.
Once I’m done with my drawing, I scan it using a mobile app called Genius Scan.
It works pretty well.
Again because my illustration style is casual and rough, I don’t need any flatbed scanner for this.
Genius Scan has a few different filters.
For my purpose, I choose black and white so that I can capture my line drawing in a crisp black & white lines.
Once my drawing is captured in black and white using Genius Scan, I airdrop it from my phone to my MacBook.
I open the file in Photoshop, and do the followings:
increase the contrast
Select black part, then select “similar” to select all the line drawing parts.
Fill the selection with white
Copy & paste selection into the Photoshop file that I already created in 1920px by 1080px with a blue background.
Scale the illustration down to appropriate size
Finally I have my pen-based line drawing sketch in white on top of a blue background in my Photoshop file.
Coloring part is pretty much the same as I showed you in stylus version.
Now which works better?
A stylus on a trackpad, or a pen on a paper?
It kind of depends on your goals and purposes.
In my case, either one works fine.
Personally speaking, I still prefer a pen on a paper to draw, because you get a better control in your subtle touch, and you feel better when holding and running a pen on a paper.
But it’s also true that the process of getting my pen drawing into a Photoshop file is cumbersome, that I have to go through:
adjust a contrast
Select and color
Copy and paste
If I have to do this process over and over again, I get frustrated.
Google Sheets is a spreadsheet, just like Microsoft Excel.
Most people associate it with calculating numbers. But Google Sheets is actually great for organizing your ideas, making lists, even creating a low-fidelity prototype.
When I come up with an idea for a product or a design concept, I want to capture that initial vision in my head by writing it down in text, or visualizing it in sketches.
Once my vision is written down as a statement, a sketch, or a description of some sort, I need to further break it down into a set of high-level features in order to turn that vision into an actionable product requirement or a design brief to formulate a project.
I found that this whole initial process, from a vision to a high-level feature set, then to a low-fidelity prototype can be done fairly efficiently in Google Sheets.
In this article, I’d like to share this process in Google Sheets with you, taking a portfolio website as an example.
1. Vision and user story
First I write down my vision in Google Sheets document. Since I’m taking a portfolio website as an example, I start describing what kind of portfolio site that I want to create.
Because my portfolio website’s users are recruiters and hiring managers, it’s a good idea to put myself in their shoes, and write down a user story from their perspective.
2. Vision to feature set
As soon as I write down my vision and a user story from a user’s perspective, I start generating a feature set — all the things that I need to have in my portfolio website. A spreadsheet structure makes it super-easy to create and edit such a list.
Once I write down all the features/content that I can think of, I prioritize those in an order.
3. Feature set to pages
As soon as I have a list of features and content, I start thinking how these should be distributed across multiple pages of my portfolio website.
I create a new column called Pages, and assign an appropriate page for each feature and content that I listed.
4. Pages to main menu
These pages become main menu items.
I create another column called Main menu, and put pages in an order that I want to have in the main menu of my site.
At this point I have an overall information architecture of my portfolio website, in forms of a main menu, and a list of features and content with assigned pages for each.
5. Creating each page
Now it’s time to create each page of my site using a tab feature. Tabs are perfect for creating separate pages of my prototype still within the same Google Sheets document.
I copy and paste corresponding elements for each page from feature/content list, which I already created and organized in the first tab of Google Sheets document. Below screenshots shows a sequence of creating new pages in new tabs.
6. Linking pages
Once all the pages are created as separate tabs within the Google Sheets document, I copy and paste the main menu to the home page.
I insert a link to each main menu item by grabbing a URL of each page, which is a different tab in the same document.
I copy and paste the main menu with all the inserted links to other pages.
I add a highlight to a corresponding main menu item in each page to represent the selected status.
Now I have a clickable low-fidelity prototype so that I can test and evaluate the overall structure of my portfolio website, before moving forward with creating a high-fidelity design or building the actual portfolio site on a website-building platform such as WordPress.
The beauty of this prototype is that it’s fast, and I can stay razor-focused on my very vision without being distracted by all the visual treatments.
Before jumping into UX design/prototyping tools or a site-building platform to start building a website, it’s probably a better idea to focus on my vision and high-level idea first to see if it makes sense overall.
Because, as soon as I start diving deep into a UX design tool, my attention could easily be taken away by all the user interface details that I can play around with, such as colors, sizes, typography, white spaces, iconography, images, videos and so on.
The fact that it’s a spreadsheet meant for numbers somehow seems to offload my desire and obligation to make it look good as I would when using any design/prototyping tools. It’s an interesting psychological effect.
This approach works great even for non-designers too, such as product managers, product owners, business owners, entrepreneurs, and engineers.
Because Google Sheets is a simple spreadsheet, most people know how to use it. And it’s free.
Google Sheets allows anyone to freely mock up their ideas into a simple low-fidelity prototype without visual distractions and having to worry about learning how to use fancier UX prototyping tools. I found it quite useful.
In one of my previous articles, I talked about my disappointment with my MacBook Pro damaged keyboard. I have a follow-up story on this.
Previously I was assuming that I would probably have to pay if I were to replace damaged keys because the initial 1 year warranty period has passed.
This was not only based only my assumption but actually one of Apple store person that I talked to before confirmed at the time.
The other day, I had a chance to go to Apple store for a Genius Bar appointment for some other reasons. I casually asked about my MacBook keyboard problem.
To my surprise, the Apple store staff said that they can replace damaged keys up to 5 keys!
So I made another Genius Bar appointment few days later.
When I showed my MacBook Pro to a Genius Bar staff and mentioned that I was previously told by another staff that they could replace damaged keys up to 5 keys without charging.
he said “OK, let me replace all the damaged keys.” after examining my MacBook.
20 minutes later, he came back with my MacBook, with the keyboard looking good! He said, “OK, so I replaced all the 14 keys that were damaged.”
Wow, what a surprise!
And I asked, “So this is all free of charge?”
He said, “yes”
Me: so as I mentioned, this never happened to my older 17 inch MacBook. Why is this happening to this newer MacBook?
Here are what he mentioned:
So this newer MacBook has a lot thinner keys compared to older ones.
Each key is fully transparent when not painted so that the backlit LED shines through.
Then you put a white layer on it.
Finally on top of that, you put another layer with silkscreening of black with letter shape cutout so that the letter shows up in white.
Because of this 3 layer structure, when the keyboard is heavily used, it wears off the top black layer, exposing the 2nd layer which is white.
His assumption is that because now that the entire key is thinner, each 3 layer might be also thinner, which might be the reason why this is happening more often compared to the older MacBook which had thicker keys, probably with thicker layers too.
He said that he has a 10 years of experience at Apple Store.
His explanation made sense, and I was very satisfied with how he replaced all the damaged keys of my MacBook.
I didn’t expect this to happen, so this was a pleasant surprise.
Which is why I wanted to make another video to give a clear statement and a shoutout to how Apple Store treated me with good care.
Now the question still remains.
I know that my 15 inch MacBook is definitely a lot thinner and slicker compared to my older 17 inch MacBook.
It’s definitely a lot lighter, so its easy to carry around so that I can take it with me to anywhere. It’s great.
But if this slickness, thinness and portability is realized at the expense of “easier to wear off keyboards” that is constantly at the risk of getting messy, I wonder if that’s worth or not.
Maybe my typing or way of handling the keyboard applied more pressure than needed which might have caused the keyboard to wear off faster.
I don’t know.
But I’m curious if Apple collected this kind of information from customers.
This type of issues require longer time period to fully observe and evaluate.
Maybe we already live in such a high-paced consumerism that companies and customers don’t care much about using one particular tech product for a long period of time because a newer product always comes out with faster performance, cheaper price, and better features so you just upgrade anyway?
It reminds me of things like mobile phone battery that dies immediately after the warranty expires, or a major car components start to break after the 3 year warranty.
It also reminded me of Apple a few years ago that admitted that certain iPhone models had their batteries performance went down significantly after a certain period of time.
They ended up launching a special program to replace such iPhones’ batteries for free.
In a way, we are all trapped in this industry cycle, that we have to upgrade our devices to the latest ones in order to be on top of the technology trend, or in order to keep up with the highest productivity level to stay competitive as professionals?
One thousand dollar mobile phone must have sounded ridiculous in late 90s. But somehow it became a norm.
I still use iPhone 8 in the year 2020, and yes, it works perfectly fine! Because I’m a UX designer, so I feel like I always have to upgrade my phone to the latest.
But at the same time, I question this whole “have to upgrade” mentality and trend that we all have somehow blindly adopted without having a deeper thinking whether we really need it or not.
I bought a 47 dollar bunkie board made by Zinus. Bunkie Board is a frame you put under a mattress of your bed to prevent the mattress to sag in the middle for a better, healthier sleep. It’s nothing special, just a boring home product, right? Which is why it caught me with a nice unexpected surprise when I unpacked the product and went through its Out-Of-Box-Experience (OOBE).
Besides the actual product which comes in pieces to be assembled, below are OOBE components that greeted me when I opened a box.
1. An envelope with a thank you message
When you open a dark green envelope, a thank you message comes out. Interesting thing is that it is printed on a slip-off band that wraps around three cards. The message has a nice casual touch. The message explains that because they don’t want to waste materials including their thank you card, they printed their message on a slip-off band rather than on a card itself, so that the actual cards (three of them) can be used as regular cards by a customer to send to friends and family for whatever later occasion.
2. Hardware Kits
All the screws are packaged in pairs so that it’s easy to see and count how many. It’s also nice that the spare parts are clearly labeled as spare. An Allen wrench is included too.
The OOBE package also includes this tool, which is a hex wrench of some sort, in addition to a typical Allen wrench mentioned above. I used the Allen wrench during the assembly, and did not use this tool. But it’s a nice gesture.
3. Instruction manual — overview and components
The instruction manual was the best part. While thank you message and cards are definitely a nice touch, the core user experience of the product OOBE is assembling Bunkie Board itself. Therefore, this is the most important thing.
The instruction manual starts with an overview diagram above. It clearly shows how to place frames in which orientation, and in which particular order to assemble. This is actually quite useful so that you can absolutely make sure to place all the parts in right orientations in right positions relative to each other so that you don’t end up assembling parts the wrong way or the wrong orientation. It seems so simple and straightforward, but there are many hardware products that don’t have as clear instruction as this.
Right underneath the overview diagram, you see Components, which describes all the components needed to assemble the product. Illustrations of components are fairly accurate, both in terms of the shapes and relative size with each other (except the Allen wrench and the screw of course!),which is helpful.
Again, you come across quite a few hardware products with inaccurate technical illustrations on their instruction manuals. When you come across such inaccuracy, sometimes you can immediately tell that it was done purely from production efficiency purposes such as slightly different models with different shapes sharing exactly the same instruction manuals with generic illustrations that may not look like the product you purchased.
When I started assembling with the step 1, it was super-clear because the numbering system on the assembly instruction was consistently carried through to the actual components too. As you can see in the assembly instruction and pictures below, the actual components had numbering stickers, so that you can make sure to match the same numbers to screw those together.
It’s kind of similar to IKEA furnitures in terms of its instruction manual that shows you how to assemble products. But from my perspective, this was done much better, a lot easier and clearer to understand so that you don’t make mistakes. From my past experience, IKEA instruction manuals are sometimes a bit confusing especially when you have similar parts not accurately drawn in illustrations. Also, IKEA instruction manuals have almost no instruction texts, so you have to reply on illustrations only. On the other hand, Zinus Bunkie Board has a better, clearer instruction diagrams, and more accurate illustrations overall with text descriptions if needed.
Another thing that I liked about this product is that it was very well built when considering the price tag ($47). I felt this especially when I inserted all the thirteen “D” parts into slits of “B” parts. (see picture on above-right). Every parts fit perfectly into the slits.
Sure, this is a simple product. How can it go wrong?
But because it’s a simple product, its assembly should be super-clear and super-simple. What I documented here may not seem anything spectacular or magical. Yes, everything is very straightforward. It may seem that it’s a no brainer to make something like this. That’s the beauty, when something is very well thought-out and manufactured, so that everything feels right.
But the fact and reality that there are so many products out there that don’t have its OOBE as simple and clear as this tell me that it is actually quite hard to do what it seems so easy to achieve on paper.
And this type of experience — the one that seems so simple and gives you a pleasant experience without anything too fancy — is what we as UX designers should aim for in whichever products or services we design.
Many UX beginners struggle that a lot of entry-level UX positions already require 2-3 year work experience.
How do you overcome applying for entry-level job positions that require 2-3 year of work experience when you just graduated from college, or if you don’t have such work experience?
So the field of UX has been attracting so many people from all the different fields.
As soon as you start applying for a job, you will confront this.
Hiring managers and recruiters ask you:
“What kind of work experience do you have?”
And lot of times, you will hear them telling you that,
“You don’t have enough experience”.
And you wonder, how can I possibly already have work experience when I just graduated from a college?
Hiring managers and recruiters are looking to fill in open positions in their companies with someone who can directly function from day 1. Lot of the time, the hiring side is in a desperate business need to fill in an open position to get their business going. This means that they have no time to hire someone with no experience, because that means they need to train and educate that new person. This is a significant investment, that they want to avoid.
Which is why, hiring managers and recruiters will focus on candidates’ work experiences and portfolios as concrete proofs.
So what do all these mean to you?
This means you need to understand this reality, and plan ahead.
While you are still in college, you should do the followings:
1. Try to do internships as much as possible.
Most colleges offer internship opportunities. This is a great way to get an early exposure to the real world, and get a chance to work on real world projects while you are still in college, so that you can put those projects in your portfolio.
If the internship goes really well, you might even get an offer for a full-time position once you graduate.
2. Try to set your school project in a real world context
Instead of working on pure, imaginary project, try to find a real client such as a local non-profit organization that you can work with for your school project.
This works great because…
It turns your school project into a real world project, solving a real user’s problem
The whole process of you finding an organization, making a pitch to them, and working through problems with them will be a great experience for you, which could make a great case study to be put in your portfolio.
3. Continuously work on your own UX projects
If you cannot find an organization to work with as described in #2, you can still work on your own UX projects. Even if you are able to do #2, I would still suggest you work on your own UX projects to continuously build up your experience.
Instead of working on a generic “redesign of existing popular website or app”, try to find a specific problem, and focus on solving that specific problem.
When you work on your own UX project, treat it as if it’s a real project.
Go through a whole cycle of:
Define a problem
Research on competitive products that solve similar problems
Test your concepts with users
Iterate your design based on learnings from the user test
For more details on how to work on your own UX project, check out my other article.
In order to gain experience, you need to keep working on UX projects. That’s the only way, and the best way to learn and grow as a UX designer.
If you can do all these three, and put these in form of a case study, or an in-depth process walkthrough as part of your portfolio, your portfolio becomes a concrete proof that you have experience, and you can deliver concrete results.
The only way to overcome being seen as “not enough experience” is to prove yourself that you can actually deliver by showing them your tangible output in form of a portfolio.
Keep working hard, enjoy the whole process. Good luck!
Lot of people new to UX want to know which UX prototyping tool they should use. Prototyping is critical part of UX process. Important thing is how you think and use a tool to visualize your ideas so that it becomes communicative to others. To do so, you need to be proficient enough with a tool, so that you don’t become a slave of it.
The whole point of prototyping is to quickly test and evaluate concepts before its too late. Therefore, speed and ease of use are critical.
Today, Sketch still remains as the most popular design tool, which has a prototyping capability. While Sketch is the most popular and it’s a great design tool, when it comes to prototyping, it’s not the best.
Most of today’s popular prototyping tools have what is called “stitch screens with wires” interaction model.
This is a very intuitive way to quickly make a prototype, just by linking from one screen to another to create a transition.
To make these transitions feel natural when interacting with a prototype, you need some transition effects. These include simple fade, slide in, and more sophisticated animated effects. This is where Sketch falls short.
Other tools such as InVision Studio, Principle, Adobe XD have better transition effects with fine-tuning capability.
The good news is, most of these softwares have some sort of compatibility with Sketch, and it works very similar to each other.
In today’s mobile-centric world, running a prototype on a mobile phone is becoming more and more important. Sketch does have a mobile app called Sketch Mirror to support this, but the app needs to be used while you have your Sketch file open on your Mac, and both your Mac and your mobile phone need to be connected to the same wifi network. This means you cannot share your prototype with your team members online on mobile.
This is also where other tools are better, such as Craft plugin for Sketch, InVision Studio, Adobe XD.
These days, collaborating with other designers seamlessly is becoming more and more important. Sketch has Team feature, but with additional paid subscription.
If the collaboration feature is important for you, Figma and Adobe XD might be a better fit for you, as they provide collaboration feature for free to certain extent.
All these information might be quite overwhelming for beginners.
So here’s a good news for you!
I created, and just launched Prototype Resource Map Lite.
This is a 131 page free ebook.
It gives you a comprehensive overview of today’s 8 most popular prototyping tools.
It gives you a comparison of these 8 tools in various factors such as price, basic prototyping features and so on.
It also walks you through each tool with its pros and cons, and uniqueness.
It should give you a thorough understanding of 8 popular tools, to help you make a smart, informed decision on choosing which tool to start, and which tool to use for what purpose.
A lot of people are interested in becoming a UX researcher, but seem to be struggling to break in to the field especially when you come from a different background, and you don’t have a relevant education and experience yet. In the field of UX, experience is everything. You need to show an artifact of your work in form of a portfolio in order to prove that you can put your knowledge in action effectively in a UX project context. Which is why it’s important to work on your own UX project as as UX researcher.
If you haven’t done that, you should start working on it.
Start working on your own projects to build your portfolio as a UX researcher.
A UX researcher works as part of a UX team. The goal of UX research is to help making the user experience of the product/service better.
To do so, UX researchers can help in various ways both qualitative and quantitative research, including ethnography research, generative research, concept validation, usability test and so on.
Hiring managers and recruiters need to see:
How a UX researcher plans and executes a research (sessions)
Summarizes the findings
Distills those findings into a list of actionable items
And then communicates all these effectively and efficiently to stakeholders
Yes, you will hear many people tell you “you don’t have experience”, if you never worked on a real world project as a UX researcher.
The only way to overcome this is to show a concrete proof that you can actually deliver.
Real world projects are obviously ideal, but if you don’t have those, the next best thing is to build your own projects and work on those as if it’s a real project.
Below are just some examples to give you an idea on what kind of projects that you can work on your own.
Future opportunity research around a topic of ABC:
Pick a topic area of your interest (e.g. future of voice assistant), and interview 5-10 people who are relevant to that area in some way.
Ideally you should pick at least one expert in the field, a power-user, and a casual user.
Summarize the interviews into a report or a presentation.
You could also run a quantitative survey.
Incorporate your desk research results.
Summarize all above into a presentation / report.
Deep dive of a software or an app, and find pain points and possible solutions:
Pick a software or an app that you have an access to its power users.
Closely observe these users interact with the software or app with their permissions, record these, take notes.
Distill user pain points that you found,
Come up with possible improvement points.
Summarize all the findings with possible solutions in form of report or a presentation.
Taking above ideas as a springboard, feel free to expand and explore your ideas on what kind of UX research projects that you would like to work on!