Hello, I'm Alicia.

I'm interested making things make sense for users. I like problem solving, clean design, organizing information, and reducing fractions. Right now, I'm working on projects at TIFF.

If you'd like to chat, please drop me a line.

This site is a summary of my work on the relaunch of TIFF.net. I worked on this project with a small team of four people (2 developers, 1 interaction designer, and myself) over the course of eight months.

Research

Our identity

To find out what direction we should be going in, I conducted research internally. I looked at existing stakeholder data (interviews, notes that had been compiled previously) and conducted my own research via information interviews, and internal surveys.

I wanted to get a picture of what our identity was. What were we trying convey? Who was the audience we wanted to target? What were the problems we were trying to solve?

I used card sorting to work through some of these questions with our staff- what were the key things we wanted to target? What were the primary problems we should focus on?

Our users

Simultaneously, we were looking at the data and demographics we had access to, which were surveys and Google analytics data. I wanted to find out: What are they interested in? What do they do for a living? How old are they? What do they like to do? How do they want to interact with us?

Now that I had a better idea of who our users were, I wanted to see what we could do to improve their experience. What were the problems they wanted to see us solve?

What’s working? What’s not working? How do our users feel about the product? Conducting surveys with very focused questions that elicit honest answers is a helpful way to determine successes and failures. I used answers from a Typeform survey on our existing website, surveys sent to users, in-person user testing sessions, as well as Google analytics to help guide what problems we needed to solve.

Sample of audiences and userflows

With this info, I created user personas and potential user flows for those personas. Placing myself in their shoes was the way to test my theories and assumptions. Based on my findings, I created summary reports for our working group to talk through.

Data systems

A major challenge we experienced was connecting our events management system to our website. To help mitigate this challenge, I collaborated with those managing the information architecture of the organization to document how data was organized in the system, and how that needed to translate to web in a clear way.

I broke down our existing templates as they corresponded to the information we were pulling from our events management system. I did this with a combination of data visualization and data modeling in order to translate this information for the wider stakeholder groups.

I documented our business requirements, current information architecture, and existing systems in use. This information was used to help our lead developer determine the best web stack for our needs as an organization.

Content inventory

There was a lot of information on our website. We do a lot as an organization, and we wanted to highlight all the great work we were doing. We had 9 top-level items in our global navigation, and over 400 individual pages on our website. Unfortunately, the information was quite siloed and difficult to find for our users.

I took a critical look at our content by documenting information about each page: I looked at the purpose of each page, the message being conveyed, and if that information was duplicated elsewhere. As part of this inventory process, I also documented the analytics for each page- had people been visiting and engaging with this page in the past year? How did this feed into the flow of the rest of the site? Were people taking the action we wanted them to from this page?

The most critical questions were: how important was this information to the audiences and users we had identified? Does this content contribute to the problems we’re looking at solving?

Some tools I used while researching:

  • Typeform
  • Google Sheets and Google Forms
  • Google Analytics
  • CrazyEgg
  • MailChimp
  • Trello

Organization

Site architecture

Based on the content audit, and the problems we outlined, how can we prioritize and streamline our site structure? I know we can’t give our users everything or we end up giving them nothing.

To start, I used card sorting again to work through content priorities as well as features functionality desired for the website based on the research from internal stakeholders and the users we had surveyed.

I started to sketch out different ways to organize the site. Starting from the birds eye view of everything that is possible helped to narrow my focus and scope to build a site architecture that made sense for our users.

I created multiple global navigation iterations until we landed on the one we felt worked best. We determined this through whiteboarding sessions and ultimately user testing and feedback. From there, I created short, basic functionality outlines for each section.

Content audit

With the priorities and basic site flow mapped out, I worked on re-organizing the content we felt helped to solve the problems we outlined. This meant re-writing and re-organizing our core information.

Some questions I asked when working through this content: What did we want our users to know, and remember? What was our primary message? Did this content serve a purpose that related to our core principles and priorities? Was it our voice and tone?

This helped to cut fat, and be clear and concise in our messaging. I referred to experts within the organization to help me tell our story, and referred to our users to find out what they wanted from our site.

Sketches and wireframes

What are the most important actions our users can take? What will deter our users from interacting with us?

Wireframes with functionality notes

Creating wireframes that take into account user behavior and feedback is where I get to see what works and doesn’t work. Talking through them with colleagues, and having users poke holes in my theories and ideas is how I iterated.

I worked alongside our Interactive Designer to sketch out ideas on paper, whiteboards, and in Illustrator. We looked at different websites, and what we liked (or didn’t like) about them that we wanted to take into our flows. Quite frequently, we pulled in other colleagues to test our ideas as we worked on them.

Some tools I used to organize information

  • Google Sheets and Google Forms
  • Trello
  • Adobe Illustrator
  • Sketches and whiteboarding

Design

Mockups and prototypes

Live functionality, design, and branding is where things start to become more accessible. We jumped quickly into click-through prototypes of our wireframes, and created several different design mockups.

This is where I found people were most excited to be included in the project. Design is the stage where stakeholders start to really engage and understand the product. It’s where we can see how people will interact and respond to what we’ve created.

A preliminary wireframe (left) and live site (right)

As we did with the wireframing, we took a similar iterative approach to the design phase. While our Interactive Designer took the lead, I (as well as the rest of our team) fed in with our ideas, inspiration and feedback. We tested and showed the designs to as many people as possible.

Style guide

We broke out the design into different modules, and begun building out a style guide. Often, these modules were changing and evolving as we were documenting them.

Style guide samples

Having a standardized design language was a major departure from how the current site looked and felt - it was built out with many different styles applied as the site grew. We wanted to create the same consistency in visual language and our visual voice and tone as we did with our content and present the organization as one cohesive entity, even though we had previously used many sub-brands and voices.

Development

Working with our development team, I helped to translate the designs and click-through prototypes into the real working version of the site.

Click-through prototype

Moving out of basic HTML click-throughs, I worked with our developers on Pug templates and wrote CSS and jQuery to style the site according to our designs.

Simultaneously, I worked to test our designs for technical functionality using several different tools, including Browserstack and a multitude of different devices I had access to. I also continued to test on users, and try to refine our designs as we learned more from our audience.

Iteration

After our initial launch, we continued to document bugs, feature ideas, and feedback. We began working to prioritize features for upcoming releases, and continue to evolve based on feedback and data obtained from users, analytics, and anecdotal feedback and ongoing research.

Some tools I used for design, development and feedback:

  • Adobe Illustrator
  • Invision
  • Atom
  • HTML/CSS/Sass
  • Javascript/jQuery
  • Pug (Jade)
  • Trello
  • Basecamp
  • Slack
  • Browserstack
  • Github
  • Waffle.io

Right now

For the past three years I've been working on a multitude of great projects at TIFF. Most notably, I've been working with a small team on the restructure, reorganization and redesign of TIFF.net from the research phase to development and launch.

I've also been working on many other projects at TIFF including planning and implementing our newsletter strategy and redesign, planning and implementation of microsites for our different festivals and projects, and many more ongoing digital projects.

For more info on projects I'm working on, please reach out.

Kind Words

"The thing that impressed me the most about Alicia was her thoroughness. She was always one step ahead, anticipating our questions and making things easy for us."
"Our new website is easy to navigate providing significant information without being cluttered or confusing. The new website and redesigned forms give our company a cohesive, professional appearance.

We found Alicia to be very helpful as we worked to create a new look. She understood what we were trying to do and made many good suggestions. Designing a website requires a lot of back and forth communication. We always found Alicia to be very responsive to our needs..."
“Alicia was a joy to work with on my law firm website. She was always open to my suggestions about improvements and was prompt with revisions. The end result was a website that exceeded my expectations – beautiful, functional and very affordable. I cannot recommend Alicia’s web design services enough.”
“The design was crisp and clean and she allowed me to provide her with as much information as I wanted to to make it my own. She’s highly creative and an expert at what she does."
“Alicia is a creative and talented individual we had the pleasure of working along side with for several months. Her creativity is only matched by her ability to understand what we were looking for and making it come to life... She is a wonderful individual; creative, professional and respectful, that is ready, willing and capable...”

Get in touch

Now that you know a bit more about me, send me an email to continue the conversation. I'd love to hear from you.