The User Interface (UI) Designer’s Toolbox

Best UI Design Tools

This article will primarily be on the software used specifically within the interface design discipline, focusing on the creation of page layouts, simple interactive prototyping, and design assets.

A modern user interface designer has a number of options in regards to what software or tools that they use. These include classic tools like the whiteboards and sketchbooks to a number of software that can accomplish anything from site-mapping, page layouts or even interaction animations. What software should be used depends on the requirements of the project, and typically a single project uses a wide array of software and tools to convey the UI designer’s thoughts, ideas and research.

Whiteboards and Sketchbooks: The Classics

Oftentimes the classic tools are the most effective. When starting a digital project being able to quickly work through ideas and concepts to allow for a team quickly discover points of discussion and any potential roadblocks to the production process. To create these rapidly evolving and changing definition level items it helps to get all of the project stakeholders together and do a whiteboarding workshop. Whiteboarding is the method of using a whiteboard to rapidly draw up different layouts, organizational structures, and workflows, allowing the team to quickly try out solutions. If the whole team can’t be available or whiteboarding isn’t an option, quickly sketching (pencil and paper) concepts and discussing them with your team in order to ensure you are moving forward with the best possible solution.

The Adobe Creative Suite: The Standard

The software suite that needs no introduction, as if you are reading this post you are certainly familiar with it, The Adobe Creative Suite. Adobe has cornered the market on graphic design software for as long as I have been in the industry. It is the primary focus of most graphic design programs and the name Adobe is ubiquitous in the field of Graphic Design. As interface design was starting out, most designers created their layouts in Photoshop or Illustrator, and while there were several workarounds to make them work these programs were created with specific goals in mind, primarily dealing with the creation of designs for Print mediums. Certainly these softwares still have their uses, namely in the creation of image assets for digital products and I still haven’t found a replacement for Illustrator when it comes to the creation of icons and logos. Adobe XD is Adobe’s attempt at creating an interface design software from the ground up, but it leaves much to be desired, which brings us to…

Sketch And Invision: The New Standard

In my experience drafting UI job descriptions and looking over job postings and seeing what companies are looking for in their UI designers, the new standard for the industry has shifted from the primary focus from the creative suite to an understanding of the combination of Sketch and Invision. These two software, when integrated into a workflow, can quickly produce interactive prototypes without having to develop anything into code, allowing the digital product team to move through iterations quicker and update designs without having to redevelop the codebase. Sketch is a software that was built with interface design in mind, and as such Sketch provides the ability to efficiently layout pages using a combination of the best features from photoshop and illustrator. Invision allows the designer to take those layouts and make them interactive, giving the team and client something to click through, test and quickly iterate on to produce a better quality of work.

What’s Next?

One of the most important aspects of being a successful user interface designer is ensuring that you maintain an understanding of the best tools to create the best assets for your digital project. As the design software landscape evolves, it allows designers to create assets that better convey their ideas to their clients. It is entirely possible that the most useful tools in any UI designer’s toolbox haven’t even been created yet.

Marketing Personas Vs. User Experience Personas

Defining Digital Product Personas

Understanding who your users are when creating a digital product is of paramount importance for a user experience designer to design a successful product. But who are these users, and how does a digital product team begin to define them? This is done through the use of Personas. Persona is defined as “a role or character adopted by an author or actor to perform a role,” however within the field of digital product design, they have a slightly different focus.

A Digital Product Persona, instead of representing a role for an actor a persona represents a large group of similar users with a single individual. Personas (when used this way) are tools to allow the team to better empathize with the user groups, as the human condition allows us to better empathize with individuals, rather than large faceless groups. Digital Product Personas come in several varieties, depending on the goals of the project. Two of these persona types, Marketing Personas and User Experience Personas have sometimes been used interchangeably, leading to incorrect assumptions and flawed products.

What is a Marketing Persona?

Typically when people think of using personas within their digital product production they are using Marketing Personas. This persona type is focused primarily on the demographic information, business landscape understanding, and media consumption. Marketing personas are incredibly valuable when it comes to placing advertising, generating interest and tailoring content as the demographic information allows the team to understand where to access this user’s attention.

Unfortunately, many digital product teams stop here when creating their personas, and while this information can be crucially valuable when developing content plans and social media marketing, it lacks important nuances when it comes to understanding what the user needs to accomplish when using the future digital product. This leads teams to make incorrect assumptions and if the product isn’t properly validated through user testing later, these assumptions can make for flawed digital experiences.

How is a User Experience Persona different?

User experience personas build off the information gathered with the Marketing Persona and use that as a springboard to better understand their users. These personas are primarily focused on problems that the person is experiencing, what they do currently to alleviate the issue, and why these are even problems in the first place. For example, a marketing persona would say that construction workers need digital records on a job site because they are more efficient, whereas a UX persona would dig a bit deeper to find construction workers want to be more efficient on a job site so that they can spend more time working, less time with unorganized paper records and more time with their family. Now with that understanding, the business can position itself as the digital product that lets construction workers get home to their families quicker.

A simple way to understand the difference between a Marketing Persona and a User Experience Persona is this: a Marketing Persona is who that user group (as a person) is, whereas a UX Persona is what problems that user group faces and what the users (as people) do to confront those problems. By better understanding what those problems are by using a UX Persona, a digital product team can build a product that provides a more elegant solution and then the marketing team can use Marketing Personas to ensure that the potential users are introduced to the product.

Conveying a User’s Context through Storyboarding

How Storyboarding can play an integral part in Digital Product Design

A big part of being a successful user experience designer is building an understanding of who your potential users are. In fact, the most important tool in any UX designer’s toolbox is a soft skill that they don’t teach in any school, its empathy. Being able to put themselves in a user’s shoes goes a long way to building a successful product, but being able to communicate those emphatic ideas to project stakeholders can be a challenge. One tool for conveying these concepts to the team at whole is storyboarding.

What is a Storyboard?

Typically when someone thinks of a storyboard it is within the context of a motion picture or television show. In the case of movies, storyboards are simple graphic representations of key moments within a scene that convey the story. They are placed in a sequential timeline with notes that highlight key aspects of the shot, this allows the director a very simple way to convey the scenes narrative without having to go through and shoot it in its entirety. Storyboarding sessions include multiple members of the film’s team and its simple format allows for quick iteration to ensure that the story is being told in the clearest means. But what does being a good storyteller have to do with digital product design?

Storyboarding and Empathy

Why Storytelling is Important

Understanding your user’s personal story is important, but why convey it using a method from the film industry? Why not just relay the information to the team in a simple word document or spreadsheet, why bother creating a storyboard? To answer those questions simply, using a storyboard is a more effective means to communicate to your team. First off, a story is much more powerful than a list of facts, studies have shown that stories are much more (22 times) memorable than just plain facts. Another common adage heard is a picture is worth a thousand words, and the imagery of your story can add impact and additional meaning to your user’s narrative. It is important to remember that although a team’s user experience designer may be a master of building user empathy for themselves, a storyboard is a means to convey those concepts to key stakeholders and these ideas go a long way when building user empathy within the whole digital product team.

Using Storyboards in Digital Product Design

Using storyboards when creating a digital product serves to ensure that the team is building empathy with the users that will be using the product. Storyboards using within product design should not be confused with user journeys or red routes, which are the paths of the user through the screens of the digital product. Instead, storyboards serve as the means of telling the story of the user’s life outside of the digital product and what problems or issues have led to the user using the final product or serve as the story of how the user came to learn about the product and begin using it within their lives. Basically, storyboards provide the context within the user’s life where there is a need that your digital product can fulfill.

Storyboards are the tool with which a user experience designer can ensure the digital product team is able to understand your user’s story and the context in which they use the end product. Storyboarding as a means of conveying user empathy will allow all stakeholders to better understand the impacts of the digital product that is being built and help ensure that the end product solves the needs of the user’s it was created for.

4 Rules for Better Website Typography

Achieving Better Website Typography

For a long time, when developers and designers were building websites typography wasn’t high up on the priority list. This was due to a number of factors, sometimes it was simply lack of diverse web safe fonts and other times it was adherence to strict SEO (Search Engine Optimization) standards. Now, due to the number of internet connected devices and our ability to ceaselessly consume content, digital mediums require strong typographical sense to convey their content to the masses. Included in this article are 4 hard and fast rules to help your website’s typography provide a better user experience.

Establish a Visual Hierarchy

All design is based on communicating visually and a key component of successful design is always establishing a hierarchy, and web typography is no different. What this means is ensuring that there is an obvious separation in size between headings, subheadings and body copy. Establishing a visual hierarchy allows users to scan the content and find content that interests them quickly and easily. Additionally, establishing consistent design patterns across your site will allow users to seamlessly navigate through the experience without confusion. Creating this hierarchy also has a practical purpose as establishing it using HTML best practices creates an easy blueprint for Search Engine crawlers to work through, helping your website rank higher based on SEO best practices.

Font Selection & Sizing

When selecting your font it is important to consider what fonts the brand uses and if they are available for use on the website. This is because of font licensing, basically when you purchase a font you have either a license for printed materials or for a digital license (which is based on the number of visitors/views, but I’m not going to get into that). If the brand’s fonts are unavailable, Google has a fantastic selection of free web safe fonts for use on websites, and almost any brand’s fonts can be somewhat emulated by something in this library. When fonts are decided upon, a good baseline for your body copy is having it at least size 18px (sometimes as high as 22px, depending on the font), which may seem large, but this helps with accessibility and causes less eye strain.

 Line Measure, Alignment & Spacing

Think of physical mediums that you typically read (novels, newspapers, magazines, etc.). One thing they all have in common is a short line measure. When a user is reading your copy you want them to be able to read it without moving their head at all, and this typically means having roughly forty to sixty characters per line. Additionally, opening up your body copy’s line measure a bit helps users more easily consume your content. Finally, if a chunk of copy is over three lines long, it shouldn’t be center aligned as it makes the content difficult to follow. A final word on text alignment, NEVER JUSTIFY TEXT.

Get Rid of that Ipsum

When designing a website or digital product it is important to understand what the final content will resemble. Lorem ipsum is a great solution for initial concepts, but the longer it stays in the design the more of a pain it is to change out and modify the design based on new content types. Typically, designing without content is never a good idea, it’s hard to predict what could be available in terms of copy as designers are rarely experts in the field their website is typically for.

Websites Vs. Webapps, What’s the Difference?

“Programs and other operating information used by a computer” – that is the definition of the term software, and from that definition comes basically everything that we (as a society) do in regards to computers, hardware notwithstanding. Software is obviously a pretty broad term when it comes defining a digital product and although user experience is not relegated specifically to the internet or applications, this article will focus on defining examples of software that lives on the internet, namely; websites and web applications (web-apps).

Websites and Web Applications

When you are viewing content on the internet through a browser, every single website, page, experience, e-shop and social network can be categorized into two broad taxonomies; Websites and Web-Apps. These two categories of digital products are very similar in terms of appearance and how they are accessed. In fact, if you asked a few different people in the industry you’d probably get more than a few different answers, but generally, the arguments will boil down to this:

  • Websites are focused on being informative.

  • Web-Apps are interactive.

This means that static pages that exist to showcase information that doesn’t routinely change are websites. Think of a local restaurant site that has a menu, store locations, hours of operation and maybe an image gallery, this is an example of a simple website. Take those same restaurant pages and add in some functionality that allows guests to set up a reservation and will hold a table for them (assuming they have means of establishing a deposit) without the customer calling the restaurant, you have a web application. Web-Apps require users to input information and will provide feedback based on that information. Another common example of a web-app would be a simple eCommerce website that allows a user to purchase a product online and have it shipped to his location.

Here’s where the confusion around these terms comes in, as how a user interacts with the digital product is what defines the product itself. For example, if a user is using an eCommerce site as a primary source of information regarding the company (and not purchasing its products), the digital product in question (the eCommerce site) isn’t being used as an application but rather as a source of static information (IE a website). So similar to as how all squares are rectangles but all rectangles aren’t squares; all web-apps are websites but not all websites are web-apps.

While the nomenclature may have little impact on the final designs of the digital product, as good UX design is platform agnostic, understanding what you are building and learning how to communicate these concepts can assist your team in further establishing your expertise in the digital realm and build rapport with your clientele. Remember, half of being a good designer (at least) is being a good communicator.

digital product development process

The 6 Steps to Creating a Successful Digital Product

Digital Product Development Process

When creating a digital product, whether its an app or simple website, it is important to follow a consistent process in order to produce a consistently successful product. This is going to be a high-level overview of a process that can be adjusted to scale successfully to any project size and complexity.

The high-level workflow for a digital product production process

Step One: Discovering the Problem

Firstly, it is the UX team’s job to understand the problem that is going to be solved. This part of the project involves meetings with the client or product owners, researching the competitive landscape, performing business analysis and analyzing any data that can be provided by previous iterations analytics. When it comes down to a digital product, like a website, it is also important to understand the people using the product, why they are using it and the type of technology they are comfortable with, as this will help the UX team define the best answer to the problem’s question.

Step Two: Defining the Best Answer

Next, the UX team is responsible for using the information discovered in step one to come up with the best solution to the problem discovered. Generally speaking, this second phase is marked with lots of sketches and initial concepts that can be quickly tested and iterated upon to drive towards the best answer to the problem. Wireframing, storyboarding, site-mapping (and information architecture), sketching and whiteboarding are routine elements that make up this phase of the project.

Step Three: Designing the Solution

Typically the design phase is what most non-industry folks picture when they think of when they hear digital product design. This is when the solution that was defined in Step two is crafted into a form that resembles a completed digital product. This means applying branding elements and styles to the structures defined in the wireframes, crafting a seamless digital experience that feels very much a part of the brand. This third phase is also when interaction design is created and generally involves working closely with the development team to ensure a seamless handoff into the next phase, development.

Step Four: Developing The Product

The fourth step in this digital product creation process is the actual building of the application using code, also known as development. Here the final designs that were crafted in step three are turned into front-end code (HTML, CSS & JavaScript) and hooked into back-end databases, CMS’s or APIs. Development is also when the actual interaction design is implemented, as well as any transition or loading animations, giving the digital product some life and allowing it to be tested in terms of user delight.

Step Five: Deploying the Final Product

The fifth and final production step of the process is deployment. Here, the final developed product is transitioned from its development environment to the live internet, where it can be accessed by the masses. Generally, this migration is taken care of via the modification of the Domain Name System (DNS), pointing URLs to their correct indexes. This phase can be completed with relative ease, however, a number of situations can arise when moving digital hosting and each deployment should factor in time to allow for bug fixes and code adjustments.

Step Six: Optimization (Constantly Improving the Product and Process)

The final step, optimization, isn’t a typical phase of the digital product production process. This is because Optimization should take place throughout the project and takes a number of different forms. In the initial discovery phase, optimization takes the form of user surveys and interviews to test the assumptions the team is making while performing research. In the second and third steps, it takes the form of prototype user testing, allowing users to interact with wireframes and mockups to test concepts and workflow ideas. In development and deployment, optimization takes the form of quality assurance (QA) testing, making sure to note and quash bugs as they are discovered. Finally, optimization even takes the form of a project post-mortem, analyzing the overall project to see how elements of the process can be improved to provide solid digital solutions in the future.

Industry Acronyms & Digital Projects: UX versus UI

UX versus UI:

The digital product industry has a wide range of acronyms and job titles that make it difficult for a non-digital industry member to understand who and what everyone on a digital product team is responsible for and what roles do what work. Basically, as teams become more insulated from the population at large discussions can quickly devolve into what sounds like a jumble of letters and acronyms that are mostly meaningless to the general public. One particular point of confusion that is brought up, again and again, is the difference between UX and UI.  

What is UX, what is UI?

What is UX?

UX stands for User Experience. User experience is a broad field that can encompass anything from digital user research, information architecture, and business analysis, as well as digital product design. Practitioners of UX are generally called user experience designers, and their role in a digital project is to ensure that all decisions that are made in regards to the product take account of user needs and desires. On smaller digital product teams, UX designers perform the role of design and research generalists, producing business and user analysis as well as creating the wireframes, prototypes, and mockups that will make up the final digital product. While on larger teams, user experience can be broken up into many roles, from user experience researchers (who focus on user interviews, surveys and questionnaires) information architects (experts in developing high-level workflows and context maps to determine the user’s flows through the product) and digital visual designers (folks responsible for the styling and look and feel of the product).

When a company or team talks about “design thinking,” it is generally in reference to user experience design, or thinking about how the end user will interact and use the product. Basically, when creating something for a purpose, it is important to ensure that the purpose remains the focus of the project and that it (the purpose of the project) is in no way hindered by other elements of the product.

What is UI?

UI stands for User Interface, so a UI designer would translate to a User Interface Designer. A user interface is a technical term for what a user interacts with when operating your digital product. A user interface designer’s role in a project is more focused than that of a UX design generalist, as it centers around designing and building the interface elements itself, ensuring brand coherence and intuitive interaction. They build their interfaces based on the research and work that was done by the User Experience designer but a user interface designer is generally more focused on the visual elements of the interface and how they work together to create a seamless experience.

UI designers benefit from an understanding of the implementation of their designs or how they will be constructed in code. So much so, that many user interface designers learn front-end development languages in order to better bring their projects to life. This allows UI designers more control over their projects and gives them the ability to create more interactive and delightful experiences.

So Do I Need a UX or UI Designer?

This is a bit difficult to answer as all digital projects need elements from both UX and UI design, which is probably why roles for these positions are generally labeled as UX/UI Designer, as companies focus on generalists that can produce work throughout the digital project process. When starting a project it is important to research your users and understand their motivations to give your product immediate impact, but it is equally important to implement that information in a way that is both appealing and intuitive. Understanding how those two elements relate and walking that fine line is what makes digital projects successful, so it’s important to find a team or individual who values both.