The process of wireframing for the Caribbean Women Healers Project.

Interview by Anna Lepska, Digital Scholarship Specialist GE

We met with Azle Malinao-Alvarez, UO Libraries Information Technology Consultant, to talk about her role as a front-end designer in the Caribbean Women Healers project, about the process of creating the websites, and how technical team and researchers collaborate while developing digital projects. 

On the UO Library website, it is said you work as an Information Technology Consultant. How this related to digital scholarship projects?  

Azle: I’ve been working here for over 18 years, I started as a graphic designer and eventually moved to “wearing many, many different hats”. One of them has been information technology, which enables me to meet with faculty, talk with them about their projects and help them to go from point A to point B.  

A lot of faculty don’t have experience in developing a website. So we have to do brainstorming meetings to talk about their expectations for the digital project. That sometimes means working with their content or helping to figure out what content is needed for the digital project. For example, “I want a syllabus, I want students to know how to work in the medical segment, or how to deal with the patients. I also want certain quizzes to check students’ understanding of the topic.”

We have to talk a lot about what are the learning goals and tasks for their digital projects. And then there are some websites where the faculty wants to promote a book or research. So it just depends. Our projects have evolved from mostly virtual reality projects to database projects and to more digital exhibit and research-oriented projects. It is evolving, and I am able to see different trends in the types of projects we do.  

How would you describe your role in the Caribbean Women Healers digital project?  

Azle: In this particular project, I’m a front-end designer, I am responsible for the look and the feel of the website, and for the content organization.  I make sure that the website is user-friendly and accessible since accessibility is a big thing on campus right now. And that is one of the challenging parts because internet sites need a lot of validation tools. These tools range from colorblindness tools to testing for validation of the code. I also have certain plugins and tools that I use to test accessibility. For example, the Boxlight reads through the website in the same way as a screen reader would read. Or tabbing, when you just use a keyboard and a mouse to go through the website. People who are visually impaired or have a certain disability, tend to use tools differently. And that is challenging – to develop a website that is accessible.   

As you just said, you are working on developing a website for the digital project. Can you lead me through the process of creating a website? How do you start and what are the main steps?   

Azle: We start by working with the faculty and their content. We discuss some of the challenges which we will have for this website. For example, for Caribbean Women Healers we have a global audience, so we need to follow the global guidelines with colors, we need to make sure that there will be no offensive colors among those we use. While programming and developing the website we need to use technology that is used in those regions as well.  We also need to ensure that the website has an adequate look on mobile devices.  

So once we outline what the challenges are, we start creating prototypes and wireframing the content in the actual system which we are going to use. We are using the WordPress UO blogs – the platform which is available to anyone on campus for free. Then I start populating the faculty’s current content and some of the images in the actual WordPress site and troubleshoot as I go along the way. Usually, I use the validation tools for checking for the accessibility and validity of the code. But in the meantime, I also have to think about the visual design and making sure that is going to be user-friendly to anyone, not just for us here, at the university. And it’s always a challenge because we need to take into consideration cultural differences as well. Since we have different audiences – both students and healers, we need to make sure that the visual side can be readable for both audiences. So we try to be consistent and be aware of those factors. 

After wireframing I do some more of the design. And in some sense, the wireframing kind of takes care of the design because it creates the real structure of your content, and shows how it makes sense for the users coming to the site, and how they would be looking at the pages. Finding the color and graphic elements is the actual design process. So the next thing is incorporating those elements into the website and making sure the website is tested. Since we have third-party applications that we are suing on the website (such as Penopto and digital maps) we need to test them to make sure they are working on our platform. That pretty much sums up what I have to do. But then I also work with different team members.  

 

Can you tell a bit more about how you work with other team members? How does this collaboration look like? 

Azle: I work a lot with Corey and Ray, the LTS (Library Technology Services) group, on the technical aspects. When I have a wireframe, I will let them test it to make sure they also don’t see any accessibility or validation issues or any errors.  It helps to have a variety of people looking at the website because everyone uses and approaches the internet in different ways. Also, I work with them on any prototyping or debugging issues that I have. 

Developing wireframes is a collaborative process itself. First, we talk with researches about their content. And then either using the post-it notes or the whiteboard we create a structure out of it.  One of the first things we do is a visualization for the global navigation of the website. This process gives the researchers the overall idea of what parts of the content they want to incorporate.   

All the projects have About or Contact sections on the website, and then there are really unique pages that need more thought of. Sometimes that could be a calendar system or a syllabus. Caribbean Women Healers project has the gardens and the forests that researchers want to display. And talking through the content and wireframing helps them to visualize their content. Something like, “I want to have a garden and a forest, but it doesn’t make sense to have these two links in a global navigation menu”. “How do I want to organize the content for forests?”  

So I take them through a path by asking questions.  “What kind of materials do you want to use for the Forests section? If you want to have a picture of the forest, what kind of resources are associated with this? What kind of learning aspects do you want to have? 

The process of creating wireframes helps the researchers to start thinking about the digital project piece by piece, instead of being in a situation like “What is your content?” And it also allows researchers to see what content assets they already have, what they don’t have, what they want to incorporate. And sometimes that also leads to a whole new project.  

In Caribbean Women Healers we are also using the digital story map. The faculty wanted to have some interactive features, but they didn’t know in which way it is possible to do.  So I just started to give them ideas of how we can interactively introduce different forests and gardens. And one of the challenges was that the faculty didn’t want any specific locations to be mentioned. Some of the forests are protected areas and it is important that no one can have information on how to access them.  

Wireframing is a quick way to start thinking of how we want to present the research findings and to troubleshoot all the problem areas. Because if you start doing it on the website it is really hard to change or remove things.  

I had a question about challenges, but it seems that you have been mentioning them here and there.   

Azle: Yeah, the challenges come all the way through. And it is also one of the reasons why wireframes are really important. It helps throughout the entire project because you can see the challenges and work on them ahead of time instead of building the website and all of a sudden, “Oh, it’s not working!”, which has happened before. And wireframes allow multiple people to work on building the website, so it is good for the task distribution.  

How do you get inspired about web-design and generate new ideas?  

Azle:  It is really hard in a university setting because normally you have other designers to work with or see what kind of things they are working on. Since we are such a small group in the university, I kind of have to go outside of it. I have connections with my college peers that have moved to different places. Talking to them about design or getting examples, or keeping up on the inter webs, just looking at the designs on there.  

But I do have a specific type of design because at the university we have restrictions. There are branding restrictions, there are accessibility rules. Not a lot of sites out there are developed for disabled users, but university and government websites are required to do that, it is just the best practice. So I keep that in mind, but also trying to make something creative, which can be really difficult. Content is more important than the visual aspect and I am trying to balance that out.  

Can you share what you consider the most joyful part of your work?  

Azle: When you see people using the project or when you see other universities looking at your project and wanting to use your project – I get a lot of joy out of that.  

Also, some of the faculty don’t know technology. I had this one professor who taught European history. He knew nothing about computers, nothing about technology, but he had this great idea for creating an interactive timeline. It was at the time the EU was going through a lot of different changes and he wanted to show that. And we created this timeline and he was so excited. He used it for all of his courses. And then all of a sudden he would come back and “Oh, Azle, I got a laptop, I am doing a blog now!”. Seeing the growth of someone who came in not knowing anything and all of sudden learning WordPress and being excited about his project. That was back in 2004 and he is still using it to this day. And it is fun to see the growth of faculty themselves, and how the students are using technology in classes, or other universities are trying to do something which is very similar to what we do.