When Fi started out in 1999, all of our energy was focused on creating the best possible design, the sleekest details, and the most delicious eye candy. Online interaction was still in its infancy, and not much thought had been given to how things were supposed to work, or who we were designing things for (ourselves right?).

We only had to account for users interacting with a site or interface in a linear way. Start at point A, end at point B sort of thing. It wasn’t hugely complicated to figure out, and the audience was very willing to “learn” the interaction required to complete the tasks.

Design was king and the user was neglected.

Times changed. We began to work with the entire interactive spectrum, and users became more sophisticated. We had to change our process and move away from a “gut-instinct” type of design, to a more methodological start of the creative process.

We now have to truly understand what it is people are looking to do. Are they browsing? Searching? Gaming? Watching Video? Trying to complete a task? Whatever it is they are here for, we have to make things as easy for them as possible by having clear language, well-organized information, and a logical and streamlined taxonomy. These are all things we have to design, before we even start thinking about typography, color schemes or logos.

Out were the colorful comps, and in came basic black and white wireframes and interactive prototypes which help us make decisions and see weaknesses in our flows, layouts and strategy. We are now forced to look at the entire experience more holistically. The whole focus has become much more user-centered.

Now, just like design, user is king too.

The creative process at Fi is truly a collaborative effort in a very multi-disciplinary environment. UX Designers, Visual Designers, and Interactive Developers all have a hand in creating the best possible user experience. It’s a shared passion where everybody pitches in with their level of expertise and voices their opinions.

So, how do we start the creative process now? Here’s a quick explanation of all the things a UX Designer does before anyone even touches Photoshop:

Determine Personas
Personas are vital when it comes to structuring the content. Sometimes companies already know who their users are, and sometimes they don’t. If they don’t, a UX designer basically has to step away from the content and think about what people are trying to accomplish. Doing this helps prioritize the content, and allows the site to be structured around the user’s goals.

Card Sorting
The current site, content or business requirements gets analyzed with a fine tooth-comb, and things that belong together get grouped (without naming the overall categories yet!). Once we start doing this, unnecessary categories become clear very quickly. We’re not afraid to toss things that don’t make sense, in fact, we throw out more than we’re comfortable with. While going through this process, the key question we keep asking ourselves is: “Would Persona A, B, C understand these categories, and will it help them accomplish their goal?” If the answer is no, we toss it. Once it’s done, the group of categories that are left will be renamed if necessary, and the overall categories are labeled. This process is key in determining the structure for the sitemap.

Sitemap
Now that the categories are identified and organized, and the user’s needs are met, a map of the overall structure of the site gets created. The content that will be in each navigation item is identified and put in the right order of importance. All secondary and tertiary pages get grouped inside the corresponding navigation item and the final sitemap gets printed out and posted next to the UX designer’s desk for a clear understanding of volume and workload.

Features and Functionality Matrix
Once the sitemap is in place, an audit of all current, new, and desired features and functionalities gets documented (e.g. Can they email content to a friend? Can they save an item for later? etc.). Everything gets written down in a basic excel sheet prioritized by level of effort, user importance and business importance.

Wireframing and User Flows

Based on all the findings and research, UX designers move to Omnigraffle (a computer wireframing tool) to create basic black and white layouts of what the pages will look like, and what content those pages will contain. Visual designers come in right at this point and create their photoshop comps based on the black and white wireframes.

All findings are included in the final client delivery, so that the client understands the underlying logic and sees decisions were created based on a methodology and not on a whim or gut feeling.

I am Irene Pereyra and I am UX Lead at Fi and if you want to join me here at this amazing team, just apply. We love our clients, we love our team and everyone that joins it.