Category: Ideation, Prototyping & Testing

This semester, in my Ideation, Prototyping, and Testing course at Quinnipiac University, I have been creating a companion app to accompany the city of Baltimore website. From assessing the Information Architecture (IA) of the city’s site to creating an IA map for a companion app to naming the app Baltimorean and mapping our user flow diagrams, I got to explore what it takes to truly Ideate, Prototype, and Test a product.

Finally, after paper prototyping and performing usability tests, I present to you Baltimorean’s first high-fidelity prototype. 

To view my entire creation process from start to finish, view the PDF below. For now, I will walk you through my high-fidelity prototyping experience. 

What is Prototyping?

In UX Design it is imperative to ensure that a product works before releasing it to the public. Prototyping creates the space to “determine whether or not the design (or changes) work the way you intended them to—before they’re out in the world and in the hands of your users.”

A prototype is a scaled-down version of a product, used to sample or simulate ideas and designs. Prototypes provide a quick way to investigate your ideas before investing a great deal of time and money into developing a product. Prototypes come in all kinds of shapes, sizes, and versions, “ranging from simple paper models to fully functional, interactive digital prototypes.”

High-Fidelity Prototypes

CareerFoundry describes high-fidelity prototypes as, “the more detailed, realistic prototypes that look and operate much like the final product.” High-fidelity prototypes are often created once User Experience professionals have a solid idea and understanding of the product they are building. They are often refined versions of paper prototypes and/or low-fidelity prototypes. High-fidelity prototypes are more realistic, typically containing hierarchy, clickable links, and buttons, functional menus, and content that may appear in the final design. 

Some prototyping tools utilized to create high-fidelity prototypes include Marvel, Axure, Balsamiq, Sketch, InVision, and Adobe XD. For Baltimorean, I chose to use Adobe XD.

Prototyping Baltimorean

My XD Experience 

Generally, I use Adobe’s Creative Cloud software to accomplish my daily tasks as a graphic designer, both professionally and personally. In the past few months, I have become more familiar with Adobe XD. Though I have mostly worked on prototyping websites, this project presented the perfect opportunity to grow my skills and experience in the program. I utilized Adobe XD to create my Baltimorean high-fidelity prototype. 

While referencing my work from week 5, I created each screen using XD’s design feature. I linked the pages together and added interaction into the app using XD’s prototyping feature. As I progressed, to test the functionality of my app and gauge my choices regarding the interface, I previewed using XD’s desktop preview feature as well as the XD app on my phone. Once my screens were complete, I used XD to screen record a user journey through the app, exploring all the pages I created and features I added.

Rotato

Although XD provides great previews via the desktop and an external device, this program does not have a feature for viewing the prototype within a device mockup. I used Rotato to complete my prototype. 

Rotato is a virtual mockup software that allows users to bring their designs to life. You can upload photos, videos, and audio to your device mockup, customize your device, and add in a few animations to make your product fun and engaging. I uploaded my XD screen recording to Rotato to give my app a realistic feel and complete my prototype. 

Screen Captures

Here are screen captures from my prototype, created in Adobe XD and mocked up in Photoshop. You can also view the XD screens here.

App Revisions

While designing my prototype, I considered my findings from usability testing highly. I made sure to pair text with the bottom navigation icons to mitigate confusion. Furthermore, some of the elements that were previously icons became buttons or links with written-out text. In the top navigation, I chose to represent the language selector with an abbreviation instead of an icon. I also incorporated a back button within the app so users can return to previous app screens without having to start their journey over. 

To simplify the app, I removed the “more” page entirely. Similarly, I expounded upon some text and limited some text within the app for clarity’s sake. 

Overall, I chose to maintain a simplistic approach to Baltimorean’s design. 

 Not too many photos, but just enough. not too many colors, but just enough. Not too many typefaces, features, transitions, etc., but just enough for the user to be able to accomplish their goal in a convenient and timely manner. Design-wise, I followed one of Baltimore’s brand guides, found online, to keep myself structured.

Final Thoughts

The process of crafting a companion app to accompany a complicated, confusing, and slightly disorganized city or town website is no small feat, especially when a companion app has never been created for that city. User experience design seeks to unearth user’s needs and find viable solutions for those needs. 

This Ideation, Prototyping, and Testing course taught me how to do just that: Ideate, Prototype, and Test. Through this project, I was able to gain first-hand experience on iterate aspects and stages of Design Thinking. Although I did not foresee how beneficial a companion app would be for Baltimore City’s website, I now understand that this app would be a great tool for Baltimore’s residents. Instead of spending time searching the city’s website endlessly, an app like Baltimorean would allow users to find what they are seeking swiftly, especially when on the go. 

Altogether, I loved the process of building Baltimorean from the ground up. I enjoyed exploring and experimenting with various steps, techniques, strategies, and practices all with one goal in mind: meeting the user’s needs. I have great respect for UX professionals tasked with making complicated products, services, and features more simple, accessible, and enjoyable.

Last week, I stated, “In User Experience (UX) Design, creating a simplified version of a product before its full development is called Prototyping.” Prototype is the fourth stage in the UX Design Thinking Process. This week, I tested my prototype with two users. Although Design Thinking is an iterative process, the final stage of the 5 stage-model is called Test.

Stage 5: Test

Testing is a crucial component of product development that involves real users. Users interact with a prototype and provide honest feedback. This stage helps UX designers determine whether their product or solution is valid and works effectively or if it needs reworking. Amid a testing session, alterations and refinements may occur as designers observe how users experience and interact with their prototype. Furthermore, the test results may lead back to prior Design Thinking stages, or even as far back as identifying additional needs users may have and redefining the problem. 

User Testing vs. Usability Testing

User testing and usability testing take place in the testing stage of Design Thinking. The two sound similar, have similar end goals, and are UX terms often used interchangeably (even by me). However, CareerFoundry makes it clear that they are distinctly different. 

Here are the similarities between the two:

• Both tests seek to design a product or solution that meets user needs
• Both tests take note of user interactions, experiences, and challenges while utilizing the product or solution
• Both look for ways to combat and address the identified challenges

Here are the differences:

• User testing focus on the user. A product or solution is presented to a user to determine whether the user would actually want, need, or make use of the product. User testing asks the user if this product would be of any benefit to them.
• Usability testing focuses on the product. It “looks at users’ needs in the context of an existing product.” The goal is to observe a user’s interactions with the product to see if the product works for them. There are often tasks for the user to complete which help UX professionals identify how users might journey through the prototype to accomplish their tasks. 

Usability Testing in Practice

This week, I performed two usability test sessions using a prototype of an app I am designing for the city of Baltimore called Baltimorean. I’ll take you through the preparation of my usability tests as well as my test results.

Creating Tasks Prompts

Every usability test is performed by observing participants through activities. Within a test session, users have specific tasks to complete. According to Leow Hou Teng, writing good task scenarios for usability tests allows us to “test our products more robustly to collect the insights we need.” 

I wanted my tasks to be realistic and relatable for a potential resident of the city of Baltimore. I recently created user flow diagrams, detailing three specific user journeys within Baltimorean. For my usability test sessions, I converted these three user stories into task prompts to observe how these user flows would take place with real users. 

1. User Flow 1: Finding Relevant Articles
2. User Flow 2: Finding a Local Event
3. User Flow 3: Submitting a Service Request

• Task 1: You would like to read one of the most recent news articles published by the City of Baltimore. After reading the story, favorite or save it for later reference.
• Task 2: You have noticed a pothole developing on a road you frequently use. You would like to view all services and notify the city by submitting a service request. 
• Task 3: You would like to view upcoming events within a specific event category. Once you find an event you are interested in, add it to your calendar. 

Drafting a Script

To prepare for my test sessions, I created a script. My script assisted me with guiding and coaching my users through each session. Following an example test script, I drafted my own script to read aloud during my test sessions and keep each session controlled and focused. The session script helped me do the following:

• prepare each user for the session
• ask for their consent to record the session
• inform them that we would be testing the product and not them
• ask questions concerning their daily device usage
• walk them through each task
• inquire about any additional questions, comments, and feedback they have

You can read my full script within the full usability test document linked below. 

Prototyping with POP

Although I created my first prototype for the app last week, this week I took it one step further by using a prototyping app and web platform called Prototyping on Paper (POP). POP allows designers to turn basic prototypes into interactive ones. Here’s an example of how the app works.

I took photos of my screens from last week’s prototype and formatted them for POP’s iPhone X. Once all screens were formatted correctly, I uploaded them using the POP app and then took to the web platform to link pages and add in interactivity. After testing my digital prototype a few times to ensure the interactivity worked as intended, it was time to get testing! Here is a link to my POP prototype. 

Although usability tests are traditionally performed in person, I performed my tests virtually via Zoom. Whether remote or in person, test sessions are typically recorded for later reference. 

Usability Test 1

Participant Background

Aideh O., 26

• Maryland resident, Baltimore County
• Engineer, Illustrator/Designer/Visual Artist
• “Looks at computers all day”
• Spends about 12 hours a day using devices to access the internet
• Mobile devices include smartphone, tablet, and smartwatch, all Apple-branded
• Utilizes mobile devices and desktop devices comparably
• Favorite app: Procreate

Usability Test 2

Participant Background

Tolani B., 26

• Maryland resident, Prince George’s County
• Cyber Security Analyst, Videographer
• “Works all day”
• Spends about 10 hours a day using devices to access the internet
• Mobile device: Apple-branded smartphone
• Utilizes mobile device more than her desktop/laptop
• Favorite apps: Twitter, HBO Max

Test Results

As you may have noticed while watching my testing sessions, the usability test sessions gave great insight into what works well within the Baltimorean app and what needs revising. Both participants mentioned that the app was very straightforward and clear. 

The following potential problem areas were highlighted during user testing sessions: 

• The app needs a back button in case users want to return to a previous step within their journey.
• The icons on the event pages should be revisited to represent and communicate “add to calendar,” “register,” “turn on notifications,” and “contact event planner” more clearly. 
• The language selector and online payment icons need to be substituted with other icons or text. Language selection can potentially take place on a screen before the app’s home screen.
• The “more” page may not be necessary because users can access more information on Baltimore city’s website. Additionally, the bottom icon navigation feels more solid and direct with five icons. 
• On the “services” page, “all services” can be read as “view all services by category.” Options on the “services” page can be labeled with descriptions 
•  for clarity. Pages within “services” could also use description blurbs so users 
•  are aware of what they are viewing and what options they have. 

Altogether, users were able to utilize the app and perform tasks seamlessly, finding what they were looking for quickly. They stated that the bottom icon navigation worked well and the app was easy to navigate. 

Final Thoughts

All great products have been tested and tested again. Apps update, websites are refreshed, products are upgraded, etc. The testing does not stop, even after a product, solution, software, or service has been released to the public. Testing is a critical part of product development because improvements can always be made. The more a product is refined and perfected to meet a user’s needs, the happier the user will be. So if you have identified pain points within your first prototype, rework it. If at first you don’t succeed, try again!

Whether publishing a book, selling a product, releasing a new medication, advertising software, selling perfume, you name it, it is commonplace to create a “rough draft” of sorts to ensure that your product has been tested effectively and proved tried and true. In User Experience (UX) Design, creating a simplified version of a product before its full development is called Prototyping. Prototype is the fourth stage in the UX Design Thinking process.

Design Thinking: A Brief Explanation

There are five stages in the UX Design Thinking process: Empathize, Define, Ideate, Prototype, and Test. Individually, each stage is vital, unique, and significant. Although we will focus on prototyping, here is a brief blueprint for all five stages. Keep in mind, “these stages are not always sequential, and teams often run them in parallel, out of order, and repeat them in an iterative fashion.”

• Empathize: This stage seeks to understand your target audience and the problem(s) they face. This is achieved through immersing yourself in the environment of your audience. Ask questions, take surveys, seek experiences, and dig deep.
• Define: After gaining insight into your user’s perspective, you can use what you learned to define the problem. In this stage, the goal is to formulate a problem statement. The problem statement focuses on the user’s core needs. It is a guiding point for all subsequent stages. You can view it as a mission or vision statement.
• Ideate: The third stage involves generating ideas. This is where you brainstorm ways to address your user’s needs. Viewing your problem in alternative ways and thinking outside the box is encouraged. In this stage, it is important to come up with multiple feasible ideas. Quantity wins over quality. 
• Prototype: Prototyping involves selecting the best of your ideas and creating an inexpensive version of your solution(s). This experimental stage is a chance to create something tangible. Prototypes are often created using whatever materials may be available, including paper, tape, paper clips, play-doh, popsicle sticks, etc. The product is a simple first draft of your main idea. 
• Test: In the testing stage, your user will interact with your prototype and provide feedback. This stage helps you determine whether your solution is valid or if it needs reworking. Your results may lead you back to prior stages, or even as far back as identifying additional needs and redefining the problem.

Prototyping Explained

In UX Design it is imperative to ensure that a product works before releasing it to the public. Prototyping creates the space to “determine whether or not the design (or changes) work the way you intended them to—before they’re out in the world and in the hands of your users.”

A prototype is a scaled-down version of a product, used to sample or simulate ideas and designs. Prototypes are typically inexpensive and easy to create. They often start with paper, pencils, sticky notes, and other stationery items. Prototypes provide a quick way to investigate your ideas before investing a great deal of time and money into developing a product. Prototypes come in all kinds of shapes, sizes, and versions, “ranging from simple paper models to fully functional, interactive digital prototypes.”

Why Prototype?

Many UX professionals would agree that prototyping is a crucial and valuable step within Design Thinking. Here are a few reasons why DIY prototypes prove fruitful. 

• Prototyping is universal. Most people are capable of creating rough sketches of their ideas. Prototyping is not limited to designers as any individual can make a paper prototype.
• Prototyping is affordable. Paper and printed prototyping materials are inexpensive. Additionally, prototyping saves time and money in the moment and the long run.
• Prototyping warrants honest feedback. People freely offer constructive criticism when they are aware that they are not interacting with a finished product. In this case, paper prototypes may encourage honest feedback more than a polished prototype.
• Prototyping identifies usability issues and design flaws. While users interact with your product, you will gain insight in real-time. Furthermore, you will notice challenges users may have way before it is too late. “Prototypes enable you to fail early and cheaply.”
• Prototyping helps designers make informed decisions. Prototyping allows you to test multiple designs, layouts, and solutions to determine the best approach. In every way, prototyping informs you of how a user may experience your product and gives you room to refine your work.

My Paper Prototyping Exercise

In recent weeks, I proposed an idea for an app to accompany the City of Baltimore website, called Baltimorean. Following my proposal, I created user flow diagrams to explore how Baltimore residents might find the content and resources they need while using the app. This week, I took my app one step further through low-fidelity paper prototyping. You can view my prototyping exercise in the PDF below. I’ll explain my prototyping process here. 

Remember the User

Before crafting anything, I wanted to ensure that I kept my users at the center of my process. I revisited the following things determined in prior activities:

Target Audience

Baltimorean’s target audience would include all Baltimore residents, especially those familiar with the city website. Residents who frequently visit Baltimore’s site would benefit from an app that gives them easy access to information and resources without having to peruse the city’s site.

App Purpose

Baltimorean is a companion app, created to accompany the City of Baltimore website. This app would focus on the services and resources offered by the city. The goal of the app is to keep users in the loop, providing them with easy access to the city’s latest news and upcoming events. The app would also allow residents to access the city’s directory, submit and review service requests, and make online payments conveniently.

User’s Needs

Baltimorean will meet the following resident needs:

• Residents will be more informed about city happenings
• Residents will feel more connected with their community and the city
• Residents will browse relevant city-related content in a more manageable way
• Residents will be able to make payments and submit requests more conveniently

App Information Architecture (IA)

User Flows

The following flows are displayed through my paper prototyping exercise:

• Finding Relevant Articles
• Submitting a Service Request
• Finding a Local Event

Gather Materials

At the very least, paper prototyping requires paper and a writing utensil. I looked around my home office and gathered the following stationery items:

• A notepad with a dot grid to ensure well-aligned elements.
• Sticky notes in varied colors and sizes to point out interactive buttons and fields, identify user selections, and symbolize windows and dialog boxes.
• Pencils with erasers for tracing and sketching.
• A black fineliner pen for outlining static areas.
• Scissors to scale screens to size.
• Double-sided tape to adhere and reuse buttons, fields, and screens. 
• Cardboard to reinforce my prototype.
• An old phone case to frame my screens and make the experience feel more concrete.

Determine Approach

Following Ben Coleman’s lead, I focused on small portions of my prototype that work together to make up the larger whole. These small portions include devices, screens, elements, and interactivity. 

Devices

Generally, prototyping requires designers to determine which device they will be designing for. Available user research and data typically inform what devices a specific audience prefers to use. The device determines the size of the prototype, which affects the product layout and the size of the elements within the prototype. 

In this case, I am creating a mobile app. I designed my prototype using screens crafted for an average-sized smartphone. I utilized an old phone case to frame my prototype so that it would feel realistic to myself and my users in the testing phase.

Screens

Here, you select and define the screens that are necessary to communicate the design to your audience. Screens are informed by steps a user may take in their journey to locate the content they need. A list of screens can be developed by referring back to existing UX works including sitemaps, IA, user flow diagrams, and more. 

Thankfully, I previously produced flowcharts to examine the journey of three users of the Baltimorean app. I returned to my flowcharts to develop a list of screens necessary to include in these three journeys. Some screens were recyclable while others were unique to their specific journeys. 

Elements

Like a website, the elements within an app screen can either move or change from screen to screen or remain anchored on every page. Furthermore, items housed within one area of the page can directly impact what the user sees in other areas. It is important to consider how these elements contribute to the screens within the prototype and the user’s overall experience. 

With the Baltimorean app, I chose to maintain the same header on every screen. I treated the app’s bottom icon navigation the same. Maintaining the header and navigation throughout the app assisted me with ensuring my user feels comfortable with navigating the app. It keeps them from getting lost and lets them know what to expect regarding changes from screen to screen.

Interactivity

Next, I thought about how users would potentially interact with the screens of my app? What would they click? What text fields would they need to fill in? Are there pop-ups or dialog boxes? How would I differentiate between static and interactive areas? How would I indicate the user’s selections so that the journey was communicated clearly?

This is where my sticky notes came in handy. I cut up light blue sticky notes, utilizing them for links, buttons, and fields. Light pink signified dialog boxes and overlays. Orange page-marker sticky indicated the user’s specific selection on each screen. 

Create

Once I had a sheet of notepad paper sized to screen, stuck to cardboard, and fit within the phone case, I began creating. I cut out multiple sheets of notepad paper to slide into my phone case to transition between screens. Next, I sketched, outlined, and placed my static header and bottom icon navigation within my prototype. Utilizing the Baltimore city site, my flow charts, and my app IA for reference, I went through each screen on my list. 

I started each screen by sketching the general layout, placing example content on every page. I followed with sketches on light blue sticky notes for interactivity and cut them out to stick onto portions of my screens. Once I had a good idea of how I would place everything, I outlined my sketches, erased the pencil markings, and used double-sided tape to piece everything together. Finally, I added page-marker stickies on the edges of my prototype to indicate user selections and overlaid pink stickies for dialog boxes where necessary. When I felt that my screen was complete, I took a few photos to document the current step in the journey before moving on to the next screen. In my final step, using my photos, I pieced each journey together in a PDF document and added notes to help effectively communicate what is taking place within each step of the journey to the viewer.

Paper Prototyping Takeaways

As I crafted each screen within my prototype, I quickly learned that there are many questions to ask and aspects to explore. Should I use icons? Should I use cards? Does this page need a photo? Is there too much content on this page? Will my user understand what to do here? Are there too many steps? Is this process complicated? Is this clear and concise? Is this meeting my user’s needs? The list goes on.

Altogether, this exercise taught me that paper prototyping is an effective way to test endless possibilities and land on a workable and useful reality. Although user journeys and flowcharts and other tools are highly useful, creating a prototype that fits in your user’s hands gives designers deeper insight. Prototypes clearly indicate what is working and what may need improvements. They highlight imperfections and help designers make calculated decisions. Prototyping produces messy rough drafts that lead to appreciable finished works.

“I’m writing a first draft and reminding myself that I’m simply shoveling sand into a box so that later I can build castles.”

– Shannon Hale

Flow is a concept identified by psychologist Mihaly Csikszentmihalyi. According to Csikszentmihalyi, flow is “a state in which people are so involved in an activity that nothing else seems to matter; the experience is so enjoyable that people will continue to do it even at great cost, for the sheer sake of doing it.” Flow happens when an individual is highly focused or in the zone. In User Experience design, flows help designers foresee their user’s cognitive patterns. This helps designers develop products that foster the state of flow.

What are User Flows?

In UX, User flows, sometimes called UX flows or flowcharts, are diagrams depicting the path a user follows when using a product. Users can take numerous pathways when utilizing a product. Flows display possible routes a user can take while using a website or application from beginning to end. 

The user flow lays out the user’s movement through the product, mapping out each and every step the user takes—from entry point right through to the final interaction. – Camren Browne, CareerFoundry

How are User Flows Useful?

User flows detail each step in a user’s journey to achieving a goal. A flowchart “begins with the consumer’s entry point on the product, like an onboarding screen or homepage, and ends with the final action or outcome, like purchasing a product or signing up for an account.” Documenting this process within a visual representation assists designers, allowing them to observe, understand, and evaluate the user’s experience. Designers can then update the flow and improve the experience. 

Flowcharts benefit product designers as well as product users. They consider the user, ensuring that the user’s journey is straightforward and their needs are met. If the product meets the user’s needs effectively and the experience is satisfactory, the user will continue to utilize the product.

Creating a Flowchart 

Although flowcharts are a useful UX tool, individuals within many fields and professions utilize flowcharts to communicate the steps and decisions needed to perform a process. Flowcharts are widely used and recognized. Thankfully, there are many flowchart resources online, including guides, tutorials, templates, and how-tos. Following are a few tips to make use of before you jump into creating a flowchart. 

User Flow Diagram Tips

Before creating a user flow diagram, start with these steps.

• Determine the purpose and objective: What will your diagram depict? Which user path do you want to explore? What insight are you hoping to gain? Who will benefit from viewing this diagram? 
• Assess user and user needs: What kind of user would utilize your product? What goal is your user seeking to achieve? What problem do they need to be solved? Are there specific features that are important to them? How will your product make their experience seamless and convenient? 
• Create an outline: Draft a list of steps within your flow diagram from beginning to end. Start with an entry point, followed by steps to completion. Will the user have any decision points? If so, what are the results of each decision? Conclude your outline with a final interaction or endpoint. 
• Define your flowchart elements: All flowcharts utilize shapes to depict starting points, endpoints, decisions, and more. They also utilize arrows to depict the direction of the process. There are many standard symbols incorporated in flow diagrams that communicate varying meanings. Ultimately, the diagram designer determines what elements to use, creating a key so viewers can easily understand what is taking place within each step.

My Flowchart Exercise

I recently wrote about Information Architecture (IA), completing an analysis exercise of the current structure of the website of the City Baltimore. I created a site map for the city’s current IA, followed by a site map proposing a new structure and flow. 

Simply put, Information Architecture is the science of organizing and structuring content in a logical user-friendly way. IA focuses on the organization of information within digital products, such as applications, software, and websites. 

My next task involved proposing a companion app for the website. Here is the IA structure I created for the app.

 

This week, I named the app Baltimorean and completed a flowchart exercise to observe how three Baltimore residents might journey through the app to access specific resources. You can view my complete exercise below. In the meantime, here is my process for one of my users, Savannah.

Baltimorean Overview

Purpose

This app would focus on the services and resources offered by the City of Baltimore. The goal is to keep residents in the loop, providing them with easy access to the city’s latest news and upcoming events. The app would also allow residents to access the city’s directory, submit and review service requests, and make online payments conveniently.

Functions

• Make online payments
• View Baltimore’s most recent news stories
• Find local event information
• Submit or view the status of a service request
• Gain more information about the Mayor 
• Connect with the city through social media
• View directory information concerning each 
•  branch of the city’s government

Audience and Needs

Target Audience

Baltimorean’s target audience would include all Baltimore residents, especially those familiar with the city website. Residents who frequently visit Baltimore’s site would benefit from an app that gives them easy access to information and resources without having to peruse the city’s site.

User Needs

Baltimorean will meet the following resident needs:

• Residents will be more informed about city happenings
• Residents will feel more connected with their community and the city
• Residents will browse relevant city-related content in a more manageable way
• Residents will be able to make payments and submit requests more conveniently

Savannah’s Story and Scenario

Story 

As a local artist, I want to find upcoming art-related events so that I can network and connect with other creative professionals in my city.

Scenario

Savannah is a recent graduate and a local artist seeking a community. She wants to become more connected to Baltimore city’s art community. She is interested in upcoming art events in the city in which she can hopefully share her work and network with other local creative professionals. Savannah wants to get information about all of Baltimore’s upcoming art events and exhibitions. She desires to find these events quickly and conveniently, register, and add them to her calendar. She needs to stay informed because attending these events will result in many things. Savannah will be inspired and encouraged, and hopefully, she will develop connections and find opportunities to showcase her work. 

Flow Chart Elements

Here are the elements I used to represent steps within a user’s process. Additionally, I utilized dashed arrows to indicate the flow direction.

• Rounded Rectangle: Starting point and endpoint
• Hexagon: Decision point
• Rectangle: Action point

Savannah’s User Flow Diagram

Final Thoughts

Creating user flows for the Baltimorean app granted a closer look into the app pages and functionalities. My flowcharts served as testing methods, helping me examine the strength of the IA I developed for the app. Baltimorean is intended to assist city residents with locating and utilizing the city’s resources and services promptly and conveniently. Thanks to my user flow diagrams, I can revisit and revamp Baltimorean’s IA to better meet my user’s needs and improve their experiences with the app. 

User flow diagrams are practical tools that designers use to challenge and assess the information architecture and interface of an application or website. These diagrams communicate every step in a process or task, helping individuals envision what it takes to complete a process and strategize for improvements. 

From the mid-20th to our current 21st century, our times have been referred to as the digital age, information age, and more. Information has become a commodity that is quickly and widely disseminated and easily available. Every moment of every day, people are seeking content. Whether news, podcasts, reviews, case studies, products, articles, e-books, or more, people constantly seek content and information unique to their desires and needs. 

While seeking this information, we frequent multiple websites throughout the day and often find numerous tabs open in our browser window. When on the go, we use our mobile devices to search the web or utilize mobile applications to meet our needs. Being mobile or stationary does not affect the rate at which users expect to access the information they are seeking.

Users need to feel comfortable and capable while accessing the information they seek regardless of the method used to access this information. Therefore, websites have become responsive, formatted to fit the screens of our many devices. Furthermore, websites, software, and services have developed companion apps so users can accomplish their goals conveniently and effectively. These days, it is common to have a companion app for a site, software, or service, and sometimes odd when one does not exist.

However, the organization and flow of an app or site are crucial. If an app or site is ill-organized, confusing, and challenging to navigate, the user will likely become frustrated and forego utilizing that platform. 

Information Architecture

In User Experience (UX) Design, Information Architecture (IA) is the science of organizing and structuring content in a logical user-friendly way. This discipline focuses on the organization of information within digital products, such as applications, software, and websites. 

Information Architecture considers the user while structuring the content the user is seeking. Solid structure and flow within the apps and websites we utilize help us locate the content we want effortlessly. If users can find the content they are pursuing straightforwardly, they are more likely to continue utilizing the app or website.

IA Visualizations

UX architects understand how the end-user will interact with a platform. They unite the platform and user in a way that makes sense and is comfortable for the user. UX architects achieve information architecture by focusing on the structure and flow of digital products. They conduct research and translate and organize the information into visual representations including sitemaps, wireframes, and prototypes. 

Site Maps

A UX site map is a visual representation of the architecture of a website. Site maps are like the table of contents, working as a visual index to a site, displaying where pages are located and what they contain. They are hierarchical diagrams that display how pages are prioritized, linked, and labeled. Information Architects build site maps to clarify the purpose and goals of a website, communicate the structure and flow of a site to colleagues and team members working on the site, or analyze the organization of an existing site for improvement.

My Site Map Exercise

In my last post, I analyzed the structure and flow of the City of Baltimore website. Websites for counties, cities, and town municipalities are widely known for having poorly organized websites overloaded with content. At first glance, the website of the City of Baltimore appeared to be more organized and simplified than the average Maryland city site. However, my site map exercise revealed some issues and pain points within the site structure.

First, I developed a site map for Baltimore’s current site. I found that some content in the current structure was redundant, some content was outdated, and some content felt out of place. Following my findings, I created a new site map, rearranging the content to propose an updated structure and flow for the site and improve the user experience. Below are my current and proposed site maps for reference. You can also view the PDF for a closer look. 

City of Baltimore Companion App

Since mobile apps are highly sought after and utilized frequently, creating a companion app for the City of Baltimore would impact the city’s users and residents positively. When developing a companion app, UX professionals think about the users on a broad scale while also considering a niched group within those users—users accessing content mobily. Although an app and a site can both serve the City of Baltimore, they can serve the city in different ways.

Succeeding my site map exercise, I created a map for a potential companion app. Before creating the diagram, I reviewed the content on the City of Baltimore’s current site and asked my following questions: 

• Should all content be included in the app?
• What information would mobile users benefit from the most? What pages/content would residents want to access on the go?
• What will make this app useful?

Here are my answers.

Should all content be included in the app?

All content on the City of Baltimore site does not need to be included in a companion app. Considering that the app would need to be useful and produce results rapidly, residents and users would want to utilize the app to access news, events, services, and the city’s directory primarily. Furthermore, it is likely that they already became familiar with the city’s content via the website. They would not need a full introduction to the mayor, cabinet, mayoral offices, etc. Additionally, there would be no need to view a photo gallery or stream of city-related tweets. These things could be linked externally. The app would limit the site’s content to information residents would need to access and reference quickly.

What information would mobile users benefit from the most? What pages/content would residents want to access on the go?

Mobile users would want to access information and services that interest them or impact them directly. This content includes news articles, upcoming events, service requests, government branch information, and the city’s online payment portal. 

What will make this app useful?

Creating a companion app that makes processes smoother and more convenient would be more convenient for users and residents. Making payments and submitting service requests on the go would help users save time and accomplish their goals. Similarly, reading the latest news or viewing events concerning the City of Baltimore within an app would keep users informed favorably. Users would no longer have to search the web or visit the city’s site to access this content unless they desired to.

After reviewing Baltimore city’s site content and answering my research questions, I created a map for my proposed companion app. Here’s the final diagram. 

Companion App Explained

In short, Baltimore city’s companion app would house five main screens within a bottom icon navigation. The five main screens are as follows: News, Events, Services, Directory, and More. Similar to the site, the app would also have a header on every page, containing the city’s logo, a search bar, a language selector, and a link to the online payment portal. 

To refrain from overloading the app with content, the “News” and “More” screens within the app would contain external links to additional information existing on the main site if the user wanted to dive deeper into the city’s content. For a closer look and more understanding of the page organization, view the full PDF. 

Final Thoughts

According to Vibryt, “An app is a way to bring your consumer closer to your products or services. It allows customers to easily interact and make transactions without physical limitations.” A companion app is a great way to further unite a user with a site, software, or service. There are companion apps for online banking portals, companion apps for Adobe’s design software, companion apps for online shopping at companies like Amazon, Target, Etsy, and more. Apps assist users with accomplishing their goals quickly, conveniently, and comfortably. 

However, when creating an application, the Information Architecture of the app is significant. All the information within a website does not always need to carry over to the app. Furthermore, the structure and flow of the app affect the user’s experience. If the app helps the user access what they need seamlessly and smoothly, without roadblocks, it’s quite possible that the user will default to utilizing the app over the site. The apps IA will make or break the experience for the user.

The aisles within your local grocery store are categorized in a way that helps you, the customer, navigate the store and locate the items you are seeking. Library books are arranged using a specific system that helps people easily access work by an author within their favorite genre or subject area. Shopping for a product on Amazon Prime is often seamless and straightforward for the user due to the site’s organization. In short, people need and value direction and structure. Furthermore, people thrive best in well-organized environments because they can quickly access exactly what they need. This idea holds true within User Experience (UX) Design.

Information Architecture and UX Architects

In User Experience Design, Information Architecture, also called IA, is the science of organizing and structuring content in a logical user-friendly way. This discipline focuses on the organization of information within digital products, such as applications, software, and websites. 

UX architects achieve information architecture. They focus on the structure and flow of digital products. They conduct research and translate and organize the information into visual representations including sitemaps, wireframes, and prototypes. UX architects understand how the end-user will interact with a platform. They seek to unite the platform and the user in a way that is comfortable for the user. 

The Significance of Information Architecture

So why is IA important? Everyone is seeking some form of content and they’re looking to find it fast. Therefore, locating content is a time-sensitive practice. In today’s information age, information has become a commodity that is quickly and widely disseminated and easily available. User Experience Design ensures that the user’s experience is smooth and painless when interacting with a product or service. 

Information Architecture considers the user while structuring the content the user is seeking. Solid structure and flow within the apps and websites we utilize help us locate the content we want effortlessly. Additionally, if users can find the content they are pursuing straightforwardly, they are more likely to continue utilizing the app, software, or website. Conversely, if they cannot achieve their goal, they will likely abandon the platform.

Information Architecture is effective when the end-user is not hindered by the structure or flow of an app or site they are using. According to CareerFoundry, when all is in order, IA becomes invisible. 

“Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”

Jared Spool, UX Designer, Writer, Researcher, Speaker, Educator

UX architects are tasked with creating an experience in which a user can focus on retrieving the content they are seeking instead of figuring out how to navigate the platform they are using. Although IA is not directly visible or identifiable, it is the “backbone for design.” 

Eight Principles of Information Architecture

Information Architecture did not have a set of principles or guidelines, until Dan Brown, a well-known UX Designer, Information Architect, Speaker, and Consultant, shared his own. Brown published the following principles as a reference when creating and assessing the Information Architecture of a platform. 

1. The Principle of Objects: Treat content as a living, breathing thing with a lifecycle, behaviors, and attributes.
2. The Principle of Choices: Create pages that offer meaningful choices to users, keeping the range of choices available focused on a particular task.
3. The Principle of Disclosure: Show only enough information to help people understand what kinds of information they’ll find as they dig deeper.
4. The Principle of Exemplars: Describe the contents of categories by showing examples of the contents.
5. The Principle of Front Doors: Assume at least half of the website’s visitors will come through some page other than the home page.
6. The Principle of Multiple Classification: Offer users several different classification schemes to browse the site’s content.
7. The Principle of Focused Navigation: The principle of focused navigation – Don’t mix apples and oranges in your navigation scheme.
8. The Principle of Growth: Assume the content you have today is a small fraction of the content you will have tomorrow.

For a deeper look, view Brown’s Full PDF.

Site Maps in Information Architecture

A UX site map is a visual representation of the architecture of a website. Site maps are hierarchical diagrams that display how pages are prioritized, linked, and labeled. Information Architects often build site maps to clarify the purpose and goals of a website, communicate the structure and flow of a site to colleagues and team members working on the site, or analyze the organization of an existing site for improvement.

Site Maps: The City of Baltimore Website

Recently, I created a site map for the current Information Architecture of the City of Baltimore website. Town, city, and county websites within the United States are often structured poorly. Although these sites host a great amount of crucial content, the experience of obtaining this information can be a painful one. 

Current Site Map

At first glance, Baltimore’s site doesn’t look too bad. However, as I dove into the subpages of this site, I found that some of the pages are redundant, while other content feels out of place. 

For example, some main pages, such as “News,” also exist as subpages (under “Office of the Mayor). I understand why this may have been done, as users may want to access the latest news quickly and the news articles are published by the Office of the Mayor. However, in my opinion, this category of information is significant enough to stand alone. 

Similarly, “Online Payments” is linked within the top navigation of the site, but also exists within “311 Services.” Baltimore’s online payments are processed through an entirely different external website, so the link does not lead to a subpage. I could argue that “Online Payments” does not mesh with the rest of the content within “311 Services” but also feels misplaced in the top navigation. 

Finally, the site’s “Connect” page feels unnecessary and outdated, as it generates a stream of recent posts connected to individuals and branches serving the city. At the top of the page, there are icon links to filter these posts by social media, but the only icons that generate results are “All” and “Twitter.” Although the goal is for users to connect with the City of Baltimore via multiple platforms, this can be achieved differently. 

Proposed Site Map

After familiarizing myself with the City of Baltimore’s current site IA, I rearranged some of the site’s content to create a more manageable structure and flow. Here is my proposed site map.

Here, I limited some of the redundancy within the site by moving “Online Payments” to the header. “Online Payments” is important for the users of the site to access, but felt awkwardly placed in the top navigation. I decided to move “Online Payments” to the header since it links to an external website. That way, it’s one of the first things users see but does not disrupt the flow of the top navigation content. Considering its importance, I maintained “Online Payments” within the services page, just in case users miss it in the site header.

Additionally, I kept “News” in the top navigation of the site, but removed it from the “Office of the Mayor” page because I believe it is significant enough to stand alone. Each “News” subpage and article clearly communicate that the articles are published by the office of the mayor. 

To group similar content categories and limit the number of pages in the top navigation, I decided to combine “311 Services” and “Directory” into one page that eventually divides into two subpages. Furthermore, I removed the “Connect” page entirely, replacing it with social media links placed in the site’s footer. 

Altogether, my goal in developing a new Information Architecture was to limit the redundancy within the City of Baltimore’s website, solidify the purpose of each top navigation page, eliminate unnecessary pages and paths, and make navigating the site a smoother experience. 

View my entire sitemap exercise below.

Site Map Exercise Final Thoughts

Kudos to information architects! Structuring content and considering the user is definitely a balancing act. Through this exercise, I found that it may be easier for architects to develop a site map from scratch as opposed to creating a new structure and flow from the old. But then again, either approach may present challenges.

Some websites, like Google.com, may be straightforward, focusing on one specific topic or housing one kind of content, resulting in clean and simple site maps. Others, like town sites, may be hubs for all kinds of information and content. Nevertheless, there are likely gray areas and blurry lines when organizing content. Some information stands alone, some fits into multiple categories. 

All things considered, information architecture makes or breaks an application or website. If the organization of a platform inhibits the user from achieving their goal and accessing the content they need, the IA should be reworked. 

Have you ever planned a night out with a close friend, loved one, or significant other, a date night of sorts? How was that experience? Maybe you struggled to sort out the details of a new activity. For peace of mind, you may have opted for dinner instead. 

“Date nights are important because they are a break from the normal routine and they relieve stress. Couples are more likely to enjoy higher levels of emotional satisfaction and not take each other for granted if they regularly set aside time to be alone together.”

^{Amazing Kids}

My husband and I have recently neglected our date nights for multiple reasons. Generally, we are extremely busy, we both work from home, and we’re always together. However, we believe it is important to reserve specific time blocks within our schedules to take a break from our routines and spend time bonding with one another. Therefore, an app and service that helps us maintain our date nights without committing any extra time or energy to plan and search for creative experiences would benefit us tremendously. 

DateNight App Ideation Exercise

If you haven’t figured it out already, this week I completed an app ideation exercise. Mobile app ideation is the first milestone in the mobile app making journey. 

My app ideation activity guided me through developing and building upon an idea for DateNight, an app that assists loved ones with planning and preparing for dates. After creating the general idea for my app, I walked through three ideation techniques to observe and understand the practical aspects of DateNight. 

To view my entire exercise, download the PDF below. For now, I’ll walk you through my initial steps, my app use, my Point Of View statement, one of my ideation methods, and my conclusion.

Initial Steps

To start my exercise and develop a general idea for my app, I answered three questions.

Q: What is one app you would love?

A: I would love to have a go-to app for date nights. Regularly planning and scheduling quality time with a partner or significant other can often be neglected. Amongst a busy schedule filled with innumerable obligations, it can be difficult to remain intentional about setting time aside for new experiences alongside loved ones. 

Having an app that integrates with your calendar, recommends restaurants and activities based on interests and preferences, and makes reservations and/or bookings for you would help automate the planning and scheduling aspects of a night out.

Q: What will the app do?

A: Incorporating features from Groupon, Yelp, DoorDash, Airbnb Experiences, Meal Kits services, and other apps and services, DateNight would serve as a hub for users to find and book unique experiences, make restaurant reservations, or have at-home activity kits delivered. 

DateNight would offer subscription services as well as one-time experience opportunities suitable for two individuals. This app would suggest three different categories to users: Experiences, Dinner Dates, and At-Home Activities. 

Users paying monthly to utilize the app would be offered six date night options bi-weekly, two from each category, based on their interests and preferences. Once the user selects their option, the app automatically books or reserves their selection, sends the user day-of details, notifies all participants of the upcoming experience, and marks the booking or reservation on their calendars. 

DateNight would serve as a search engine for users seeking one-time experiences. Once these users take interest in a particular activity they have found, they would book, reserve, or purchase the experience or activity themselves.

Q: What purpose will it serve?

A: Whether in the comfort of their homes or out and about, DateNight will support couples and parties of two with scheduling quality time together. It will help find new and creative ways for people to bond with one another, limit redundancy, and maintain joy and excitement in the relationship. A service that helps automate the planning and scheduling aspects of a date night will help relieve stress, keeping the overall experience light, fun, and spontaneous.

App Use

Next, I reviewed some of the applications I utilize regularly and compared them to apps I dislike or do not make use of. 

Favored Apps

Most of the apps I use benefit me in one way or another. I may be seeking connection with others, first-hand experiences, reviews, food, products, tools to help me stay structured, or more. Nevertheless, I try to make the most of the time I use on each of these apps, utilizing them mostly to meet my personal needs. 

Disfavored Apps

I tend to limit my use of apps that require a lot of my time and attention without meeting my needs or benefitting me directly. With a busy schedule and a lot of responsibilities, beyond a quick trip to Instagram, I prefer not to be whisked away by social media’s black holes.

Point Of View Statement

In User Experience design, a Point Of View (POV) statement” is a meaningful and actionable problem statement, which will allow you to ideate in a goal-oriented manner.” POV statements help pinpoint a direct need that needs to be met. This assists UX professionals in targeting the need and developing a solution. Instead of attempting to juggle many issues at once with their attention divided, UX professionals remain direct, opting to find a solution for one specific problem at a time. 

POV statements combine three components – the user, the need, and the insight. A Point Of View statement is formatted in the following manner:  

[User . . . (descriptive)] needs [need . . . (verb)] because [insight. . . (compelling)].

My POV Statement

Following is the POV statement I created for the DateNight App. I utilized this statement as a focal point while walking through my ideation techniques.

Users that struggle with scheduling time with loved ones need a simple and creative way to select and plan bonding activities regularly because planning date nights can become stressful and redundant.

Ideation Method

Ideation is a creative process in which design thinkers spark off ideas. It is the third stage in the UX Design Thinking Process. Designers utilize numerous techniques to generate new ideas. One technique I utilized in my app ideation exercise is called Sketch.

Sketch

This visual method involves creating rough sketches of possible solutions to generate ideas. Sketching sparks creativity and innovation, things needed for a successful ideation session. The key to the sketch technique is to refrain from committing a lot of time to well-developed sketches. The sketches should be as simple and rough as possible with just enough detail to convey meaning.

Using an iPhone template, I drafted sketches of three screens within the DateNight app: Personalized Date Feed, Date Categories, and Experience Selection. 

Personalized Date Feed

For subscribed users, the date feed will display a few upcoming dates that have already been selected by the user and scheduled through the app. The next date that needs to be selected will be housed at the bottom of this feed.

Date Categories

Once the user opts to plan their next date, the next screen they see will allow them to explore date options for their next date by category: Experiences, Dinner Dates, and At-Home Activities. 

Experience Selection

When the user selects a category such as Experiences, they are given two unique Experience options to select from for the week. This limits the selection process so they don’t spend too much time choosing. Each Experience option will have a little bit of a description including the location and the distance so that the user knows what to expect. When the user selects what they would like to do, the app will schedule the event and keep the user notified regarding their upcoming date.

My Exercise Conclusion

After practicing three ideation techniques including Sketch, Storyboard, and Pessimist Vs. Optimist, I concluded that the app ideation activity was a fun and innovative way to develop ideas for an app that could one-day benefit many loved ones, including myself and my husband. Creating sketches and storyboards for DateNight were similar processes. Both of these techniques helped me develop the app idea further, adding more detail and making the idea more realistic and relatable. 

On the other hand, the Pessimist Vs. Optimist ideation technique assisted with sorting through my underlying thoughts and concerns about the app. This method helped me determine whether developing an app like this is feasible. 

Final Thoughts

Overall, I think DateNight is an app I would make use of regularly. My husband and I have neglected our date nights but an app like DateNight would benefit us as a way to remain consistent and spend time together without committing any extra time or energy to plan and search for creative date experiences.

This activity was a great introduction and crash course to the mobile app-making journey. It also helped me learn more about and practice three specific ideation techniques. Moving forward, I would like to explore DateNight further, as I truly believe that this app could benefit many. 

In a previous blog post, I went over four different ideation techniques that individuals can utilize to generate ideas for meeting user needs. Those four techniques, Braindump, Brainwrite, Mindmap, and Sketch, were simple introductions to ideation activities. However, if you are seeking new and creative ways to conjure up ideas and potential solutions to a problem, there are a vast amount of ideation techniques and resources available and accessible.

Ideate as part of UX Design Thinking

In User Experience design, Ideate is the third step in the Design Thinking process. Led by Empathize and Define, Ideate is an innovative stage in which teams generate quick and simple ideas that can be transformed into designs and solutions later on. Ideation involves coming up with various ways to address your user’s needs. In this stage, it is important to generate multiple ideas instead of focusing on a few. Additionally, viewing your problem alternatively and thinking outside the box is encouraged. 

“You ideate by combining your conscious and unconscious mind. You combine your rational thoughts with your imagination.”

I^{ntroduction to the Essential Ideation Techniques which are the Heart of Design Thinking by Interaction Design Foundation}

Brainstorm as a Starting Point

So what ideation techniques work best? And which method should you try first? The ideation technique that is the most popular and most likely practiced is Brainstorm. People often turn to Brainstorming when they want to develop new ideas and strategies. During a Brainstorm session, participants work together to blend ideas they generate into one workable solution. Brainstorm encourages free-thinking, open discussion, and wild ideas, without judgment or criticism. 

Although Brainstorm is a great starting place, there are many other ideation techniques that may suit different teams, team numbers, scenarios, working styles, and goals. Furthermore, the outcome of each technique will be distinct.

Techniques Beyond Brainstorm

Beyond Brainstorm, there are various ideation methods that can be organized into different categories. Some of these techniques are closely related to others, while some are unique and special. Some require pen and paper, while others are thought-based or conversation-based. Altogether, while problem-solving, each of these techniques can be utilized to formulate a concrete solution idea.

Ideation Technique Mindmap

I recently created a Mindmap of a number of ideation techniques, organizing them by category and their relationship to their counterparts. Moving forward, I plan to use this Mindmap as a reference for my future ideation endeavors and you can too!

Following is a quick rundown of each ideation method included in the Mindmap. For a closer look, feel free to download the full PDF below.

Brainstorm & Family

• Brainstorm: Leveraging the synergy of a group to reach new ideas by building on others’ ideas. Generated ideas are blended together, resulting in one workable solution.
• Braindump: Very similar to Brainstorm, braindump is a silent ideation method achieved individually. With a timer set, participants write down their ideas on sheets of paper, cards, or sticky notes. Later on, these ideas are shared with the group for further discussion. 
• Brainwrite: This technique encourages participants to write down their ideas on paper and then pass their piece of paper to another participant. This participant elaborates on the first person’s ideas. A few minutes later, the papers are passed again, and so on. Finally, the pieces of paper are collected and posted for discussion.
• Brainwalk: This method resembles Brainwriting, except participants walk around the room to find new “ideation stations” where they can elaborate on other participants’ ideas.

Inverted Techniques

• Worst Possible Idea: This fun, stress-relieving technique encourages participants to come up with the worst possible solution ideas. Worst Possible Idea intends to lighten the mood and get creative juices flowing. 
• Pessimist Vs. Optimist: This ideation method finds creative solutions in an unexpected way — by way of observing the conversation between a pessimist and an optimist. By building upon one another’s responses, a general idea can evolve into a more relevant one within the conversation between someone who is hopeful and someone who is practical. 

Systematic Techniques

• Break & Build: Breaking down complex thoughts into more detailed pieces of information or building upon simple ideas to reach a broader viewpoint results in a range of related information. In the end, the solution can be based on the wide range of information identified during this process. 
• Mindmap: Mindmapping is a graphical technique in which participants build a web of relationships. By branching out from a central main idea, this strategy creates a visual representation of related terms and ideas.
• Brainstorm Graphic Organizer: Brainstorming Webs, Tree Diagrams, and Flow Diagrams help visually structure a deep dive into a problem space. Brainstorm Graphic Organizers visually communicate the rigor required of most Brainstorming sessions.

Illustrative Techniques

• Sketch: Creating rough sketches of possible solutions is an illustrative way to generate ideas. Sketching sparks creativity and innovation, things needed for a successful ideation session. The key to the sketch technique is to refrain from committing a lot of time to well-developed sketches. The sketches should be as simple and rough as possible with just enough detail to convey meaning.
• Storyboard: Developing a story relating to the problem, design, or solution which needs to be explained or explored. Attaching a story to an idea evokes emotion, making the idea more understandable and relatable. Storyboards include pictures and quotes from users of the app, product, or service, and communicate the context in which a technology or form factor will be used. They help visualize the main concept from start to finish. 
• Right Braining: Releasing creative thoughts by doodling incomplete images. Leaving out portions or aspects of an image can spark creativity later. The different images can later be combined in different ways to generate new ideas.

Unpredictable Techniques

• Randomness: In this technique, participants find the connection between a random word or thought and a general topic to develop a new creative idea. Starting with a general idea, participants select a random object and come up with a list of words that can be used to describe the object or are associated with it. Finally, participants pick the words from the list that can relate back to the general idea to create a solution.
• Mash-Up: A fun exercise that “brings odd or unexpected things together to spark fresh ideas.” After developing a “How Might We (HMW)” question to identify a current problem needing a solution, Mash-Up encourages participants to list elements from two broad, unrelated categories. Next, participants cross-pollinate the list items to develop crazy, new ideas. Finally, five ideas are selected to name, sketch, and build upon.

Visual Research Methods as Ideation Techniques 

• Image Board: Collected pictures, illustrations, or brand identity imagery can be used visually to communicate an essential description of targeted aesthetics, style, audience, context, or other aspects of design intent. Image boards and mood boards have many uses, but, essentially, they capture and communicate the overall design idea and intent to designers, design teams, clients, and more, in a tangible way.
• Word Cloud: A method of information visualization that organizes text-based content into interesting spatial arrangements. Word clouds are “colorful word collages” that show the most frequently used words or word pairs in a text-based source document. They are communicative artifacts for design teams. Observing words related to the app, product, or service in a dynamic arrangement can spark new ideas.
• Collage: Collaging allows participants to visually express their thoughts, feelings, desires, and other aspects of their life that are difficult to articulate using traditional means. Patterns and themes across several collages can point out important aspects to focus on.
• Photo Study: This technique invites the participant to photo-document aspects of his or her life and interactions, providing the designer with visual, self-reported insights into user behaviors and priorities. Designers can use this insight to identify pain points and develop user-specific solutions. 
• Journey Map: This technique follows the user along their journey as they utilize an app, product, or service. UX professionals experiencing the journey alongside their users can identify and strategize for key moments in the product, experience, or service. 

Final Thoughts

As stated earlier, the amount of ideation techniques available is innumerable. If you are looking for creative ways to generate new ideas, skip Brainstorming and check out the following resources. I’m sure you’ll find something that works perfectly for you.

• IDEO Design Kit Methods
• Introduction to the Essential Ideation Techniques which are the Heart of Design Thinking by Interaction Design Foundation
• Learn How to Use the Best Ideation Methods: Brainstorming, Braindumping, Brainwriting, and Brainwalking by Interaction Design Foundation