The Science of Interaction

A look at the theory side of Interaction Design. Concept maps, personas, and wireframes included.

It has come to my attention that User Experience Design is a messy, ever-changing entity which encompasses a huge variety of interests, factors, and processes. This article is about the ‘paper’ side of interaction design. By ‘paper’ I mean the science-like, theory-based side of interaction design which can be showcased with a stack (in this case, 29 pages) of paper.

Although real-life scenarios are heavily influenced by client needs and feed back, this design theory class taught me a lot about the psychology, influences, and processes associated with great design.


Concept and Personas

I wanted to create an app which could work as a solution to a real-life problem. I came up with the idea for an app called ‘Suitcase’ which could store all travel documents for upcoming trips in a single location while also giving users access to a travel community as well as trip inspiration for future vacations.

I began my design process by laying out a concept map of the app which would focus on the types of users which would most likely use the app and their motivations and needs behind downloading Suitcase. I also spent time flushing out the features of the three main areas of the app (document organizer, travel community, and inspiration boards). The final concept map easily related which features would most benefit each type of user as well as how the app may be laid out when it comes to the user interface.

My concept map helped me better understand how to relate functions and user needs.

My next step was to create user personas for the typical users of the app. Since I had already spent time thinking about the needs of my users, flushing out the needs, skills, and back stories of my users was actually really fun. I chose to profile three users, each with a different goals to make sure the app was successfully meeting the needs of a variety of potential users. I also included a small idea map for each of my personas which exemplified how and why they would be using Suitcase.

Sketches, Site Maps, and Wireframes

Now that I had an idea of who would be using my app and the features it would include, it was time to nail down the flow of the site and let my ideas start taking shape. I first wrote down each of the features I wanted to include and the three main areas of focus for Suitcase on a separate sticky note and played with where each function would best fit within the app. Once I had a solid plan, I rewrote the functions on color coded sticky notes and placed them back in their respective places to make sure everything fit. My final sticky note ‘layout’ helped me better understand how to organize the variety of features in a way which would be intuitive and easy to find for users.

The digitalized version of my sticky notes, with added insights and explanations.

The sketches and wireframes, or what I call the ‘rough beginning’ of any design project, followed after my site map. I wanted the site to be very visual, with Pinterest-like tiles and navigation. My initial sketches and wireframes highlight my thoughts on the flow of my app as well as the ‘navigation skeleton’ which shows how I wanted to layout the navigation between each area of the app. This process also helps me get a better feel for actual size of clickable elements for both mobile and tablet as well as how layouts will work for each page as they grow from mobile to desktop screens.

Sketches
Initial wireframes

Prototypes and Surface Comps

Moving on from grey squares and pencil drawings (yawn), the time had come for images, typefaces, and color. The app finally starts to take real shape in this step, which explains why it is consistently my favorite part of the design process. I wanted Suitcase to have a clean, light, and slightly more feminine feel as I projected that its pinterest-like interface would appeal to women more than men.

Adding in visuals to a design always makes me reconsider my layouts, draws attention to problems I hadn’t considered, and puts sizing and color choices into perspective. So, although it is my favorite part of the design process, it is also the most time consuming. However, my finished comps had the exact look and feel I was hoping for and I am proud of the results.

The last step in my design process was to make prototype out of my pages, which would give me a better idea of how a user would flow from one screen to another. Prototyping also gives me a chance to see how my interactive functions will be presented and make small changes to placements and sizes.

Check out my finalized prototypes below.

mobile or tablet or desktop

Desktop layouts for Suitcase

The creation of my Design and Validation guide and the theory behind my designs for Suitcase made me put a lot of thought into who would be using my app and why. Spending so much time in the planning phase of this project helped me to move in a secure direction once I began designing. It gave me time to process the look, feel, and flow of the app long before any visuals for Suitcase came into play.

In the end, the importance of planning and significance of purposeful design were the major lessons I took away from this experience. Although, I still don’t always love all the bits and pieces which make up great design theory I understand how I am able to create better designs because of them.

To view my Design and Validation Guide in its entirety click here.

Katie Murdoch is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Design and Validation Guide) in the (DGM 2250 Course) and representative of the skills learned.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.