Information Architecture

In my last post, I talked about the survey I made but forgot to mention a critical component that helped me. I composed a sitemap/information architecture for the current HAX structure. What is information architecture? The information architecture is like an outline of a website and displays the hierarchy. Creating an IA depicts how users work through the site to get to a specific destination.

For example, the above is the HAX structure. The user starts at the home page and can do all sorts of functions like add content, delete a page, create a page, etc. If we wanted to see how a user would add content, it is seen through the IA: edit page content ➝ add content.

HAX IA with pictures

Before this project, I was unacquainted with information architecture. Through this project, I discovered so much about why it’s necessary to have one. One analogy I liked was comparing an IA to a blueprint of a house. An architect must create a diagram before constructing a home to make sure the rooms flow properly, correct specifications, and create a design with the big picture. The same concept is applied to an IA of a website. You must have a solid foundation of how the site should flow and make sure the information is organized logically before creating wireframes and prototypes.

Wireframes

After constructing simple wireframes, the old fashion way on a piece of paper and pencil, I decided to transition my work to the computer. Starting with paper and pencil is an excellent start to brainstorm ideas quickly and not focus on sophisticated features. When I construct something on the computer, I often find myself getting distracted and adding unnecessary elements that could be cool but not a top priority. To me, a wireframe is like a skeleton. It’s the bare bones of a design or interface, and if it doesn’t function, then it’s useless. You need to have an excellent base to build off of, and then you can add the glitzy features and fun tweaks.

Example of an interactive wireframe I made on Adobe XD

I utilized Adobe XD to build the wireframes. I used Adobe XD in a past class of mine, so I was familiar with the basics. Moving the wireframes to a digital outlet enabled a realistic version that users could interact with. I sent my Adobe XD projects to the team so they could write comments on the designs. Showing them a more refined look of the designs allowed them to understand my thinking a little bit better and ultimately provide more feedback.

User Interviews

One of the most valuable things I learned in the Valley Bank internship was the importance of research. Conducting research is essential when designing because you get to learn about the users’ experience from a variety of different backgrounds and viewpoints. If you don’t recall, I created an online survey that was strictly focused on the wireframes. This time I wanted to uncover more about the current users and see what their aims are. I quickly contacted some of the users familiar with HAX and set up a time for a brief 30-minute interview. Before the meeting, I had some general goals I wanted to get from the interviews, like their skill levels, understanding of HAX, etc. I reached out to students, instructional designers, and other HAX members to gain insights.

HAX user interview notes on the Miro Board

Overall the insights were extremely informative, and I learned a lot about user groups I was unfamiliar with. For example, I never knew what an instructional designer was, but I got to hear about their day to day tasks and their role with HAX. Learning about a new user group was fun and exciting because I got a better perception of them and how to cater to their needs. Additionally, it helped with creating user personas which are fictional characters to represent different user groups. Again, to be in user experience, you must have empathy. Being able to understand and relate to people is vital.

Example user persona I made