App Sitemap

In my last blog post, I have made two sitemaps for a town’s site. The town’s site I worked on was the Town of Randolph. For this new project, I was tasked to create an app sitemap. Though this site doesn’t have an app I created a sitemap for it. As I have done for the two sitemaps previously, I have created an information architecture for the app. If you forgot what information architecture is it is according to Nick Babich “all about the organization of information in a clear and logical way” (Babich).

Creating apps that originate from a website can be a bit tricky for some to do. In my app sitemap, I decided to leave some information out of the app. This is because some information is not needed and requires to be done on a website instead.

Down below is the sitemap for the Town of Randolph website that I created.

App Sitemap

If you look at the proposed website sitemap for this site and compare it to the app sitemap I created you can see a difference in what information I decided to place on the app sitemap. There are fewer links in the new app sitemap. My vision for the site is to have a side navigation bar where the information is listed for visitors to click.

In this app sitemap, I kept some information the same. The home tab on the sitemap is what I decided to keep the same. A small change was made to take out the “Reports” section and add this to a new section to the tab pull-down list. Visitors on the app can easily navigate through the categories under the “Home” tab. The next tab I decided to keep for the new app was the “Residents” tab. If residents in the town needed to quickly look for something they can easily find the information under the tabs listed in this section.

Proposed Website Sitemap (compare)

A decision I made for the next two tabs “Town News” and “Calendar” was due to how much space they take up on a site. Because this is an app for phones and or tablets much more space is needed so viewers can view the calendar and news without it being straining on the eyes.

I decided to keep the report section for the app. If you are to think about it, many people would like to report potholes when they remember where they are. If they were to wait and submit the report when they get home they may forget just where it was.

The last section in the sitemap is the footer information at the bottom of the app. In the footer the only information I decided to place there were the social media accounts and the website link. This information is needed for visitors in the app to follow their social media and go to the website link if needed.

The app sitemap for the site Town of Randolph is a bit different from the website sitemap as the app sitemap doesn’t need as much information as the other.

Information Architect Sitemaps

I have been recently introduced to a concept called Information Architect. You may be wondering what that is too but it sounds just like it is, organization of information. According to Nick Babich author of An Introduction Guide To Information Architecture he explains that Information Architect, IA, is “all about the organization of information in a clear and logical way” (Babich). When there is complex information to look at IA helps users navigate through it.

There are many different ways to show information architecture. Some are shown by creating wireframes, taxonomies, labeling, research, and hierarchy and navigation creation. For my project this week, I used the hierarchy and navigation creation. In the project, I used hierarchy and navigation creation. A sitemap is what I used for the hierarchy and navigation creation.

Looking at a municipal town website, Town of Randolph, I created a sitemap for it and I created a proposed new sitemap for it. Down below is a sitemap I created of the Town of Randolph site I used for my information architecture project.

Town of Randolph Current Sitemap

Looking at the site I can see there are lots of sections for visitors to click into. It looks like any other town website where you have the departments, action centers, calendars and much more. The site can be very helpful for its many citizens in the area to go into like possibly reporting issues and potholes in the city. Down below is the proposed new sitemap of the website.

New Proposed Sitemap

In this assignment, we were tasked to make a sitemap of what we think the site should look like. If you look at both sitemaps you can see some differences in what I placed on the site and where I placed them. In the home section for both sitemaps I created, I decided to keep it the same but changed where the social media tabs were. In the city’s website, the creators placed the social media icons on the homepage in a not so thought out place. For their social media icons, I decided to keep it on the footer of the page so when the visitors click on different links they can still see them.

In the “About Us” section of the site, I decided to change the whole section and create some new tabs. When visitors click on an “About Us” tab on a city site they would want to see a bit of the city history and town mayor. Since the site didn’t have a history tab I created one.

I also decided to make a “Residential Information” tab for the new proposed sitemap because I felt as though it didn’t fit under the “About Us” tab. The only last big change I did to the new sitemap was created a new tab for “Important Links”. The creators of the site made a big list of links they thought was important for residents to look at so I didn’t want to keep it under the “About Us” tab.

Creating sitemaps is a great example of information architect. I hope these maps I created help you better understand how it helps in seeing where information is placed on a site.

App Ideation Techniques

Ideation is an important step in the design thinking process. According to the Interaction Design Foundation “Ideation is at the heart of the design thinking process” (Dam, Teo). Creating ideas and coming up with ideas can be a bit tough for some individuals but with some techniques that I have used recently, you can use them to better your ideation thinking.

In my class, I was to come up with some ideas for an app. To my surprise, I came up with a decent amount of app ideas that are fully presented in this PDF file HERE. There are many techniques to use for ideation creation. In this project, I used three different ideation techniques. I will describe each of the techniques below which consists of the techniques brain dumping, mind mapping, and worst possible idea.

One of the techniques used to come up with ideas was brain dumping. You might wonder what brain dumping is but it is an easy ideation technique. The Interaction Design Foundation describes brain dumping as similar to brainstorming but it is done individually on a piece of paper or post-it-note and shared with the group later. Though I didn’t have a group I still used this technique. Partaking in this technique was easy as I have done this before. In all, I came up with 6 different ideas.

The next technique I used was mind mapping. Mind mapping is when there is a web of relationships based on the idea or concept in the middle. In my mindmap, the focus was on app ideas and surrounding the map was ideas I came up with for app ideas. Mind mapping can get creative where some designers decide to draw to remember some of their points.

The last technique used in this assignment was the worst idea possible. This is a new technique I haven’t used before but I came up with a great amount of “possible” ideas. The worst idea possible technique is used by coming up with the worst ideas possible for the project. This is to take the pressure off of thinking about ideas and building self-confidence. Though I came up with a few worst possible ideas, some of these ideas don’t seem as bad as I thought. Looking at some of the worst ideas on the sheet sparked some interest and thought.

Although I used three techniques for this project there are many more techniques you can consider while coming up with ideas in the ideation phase. During my ideation phase, it didn’t take me as long as I thought to come up with ideas. During my UX Design program, I have been introduced to ideation numerous times. Because of this, I get better and better at thinking of ideas for concepts I have in mind.

If you need some ideation techniques the Interaction Design Foundation has a few that you can use by yourself or with a team of others. Ideation is really the heart of design thinking. Designs and projects cannot successfully thrive and happen without having an ideation phase.

Link to PDF.

Mindmapping!

Mind maps are one of the best ideation techniques to use when you are trying to come up with ideas. According to the Interaction Design Foundation, mind mapping is a web of relationships where the problem statement or a phrase is written in the middle of the map. The ideas or solutions you come up with can be placed next to the problem statement in a web-like shape.

Mind maps can be very cool to look at depending on the person who creates it. Some mind maps have drawings and some just have words in it. In my mind map, I have both drawings and words to help me when I look back at the mind map. My mind map focuses on the topic of Ideation. Creating a mind map for this topic was a great idea. I say this because you can visually see the different methods I listed off of the topic and is easy to view. Using the drawings also help me with memorizing the information.

The Universal Methods of Design describes mind mapping as helpful when a problem or a topic has many moving parts. This book also states that “it provides a nonlinear means of externalizing the information in our heads so that we can consolidate, interpret, communicate, store, and retrieve information” (pg. 102). I will paraphrase how you can create your own mind map with these steps below:

• Create a focus question and place in the middle of the page you are working on
• Draw lines from the topic in the middle of the mind map and label the ideas coming off of the lines
• Continue and deepen the connections and if need be draw lines coming from the primary connections
• You might have to take a pause and come back to add more thought to the mind map

As you can see in my mind map I have different ideation techniques coming from the main idea in the middle labeled “Ideation”. The silver lines are connecting to the primary ideas from the main topic. Some of the primary ideas are brainstorming, sketching, role-playing, brain dumping, storyboarding, and much more. The most important key information is what I labeled in red. Below those primary ideas, I made sure to write what each of these ideas meant for my use in the future. Color coding each of the words is very helpful when there are multiple different ideas. I also think that drawing in the mind map was essential and a great idea because I can remember the visuals better than what is written. If this is how you like to retain information you can also add graphics to your mind map.

When I look at the mind map I can understand some of the techniques I am going to use for ideation. If you are considering trying to come up with ideas for something consider using the mind map and get creative with it. Or if you want, use some of the other techniques used in the mind map that I listed.

Here is the PDF of the mind map I have created. Mindmap

Creating A Brochure

Cheers to the last visual design project for this graduate course! For my final assignment, I created a fictional travel agency tri-fold brochure. In this post are two pictures of what the brochure looks like inside and out.

The first couple of tasks I did before creating this brochure was made a mock brochure to see what I wanted the brochure to look like. Another task I did was think about a color scheme for the brochure. According to a previous article I have read called Color Psychology in Marketing by Lindsay Kolowich she explains some of the reasons to use the many different colors we know. I decided to use orange, blue, white, and gray as the color scheme. These colors represent competitiveness, trust, and simplicity. All of these colors worked well together for the brochure and went ahead and used them.

As for the typography in the brochure, I used many different fonts to match some of the different tri-fold sections of the brochure. For example, the section of the tri-fold with the incentives to use the Travel In Time travel agency had a different font than the sections for booking water attractions and explorations. Though there are different fonts I tried to keep some of the fonts in the brochure uniformed like Places to Visit and About Us. Choosing a font that would entice customers was my goal for this brochure as I have seen for example brochures.

Outside Of Brochure

One of the hardest parts of creating this brochure was choosing the colors of fonts to place in front of some of the background pictures. I know I wanted to keep the color scheme so I had to do a little bit of moving around and try different things for the vision to come together.

Inside of Brochure

During this assignment, I was introduced to the broken grid. Many people in design, or not, are used to creating designs with a grid. Getting inspiration from an article by Rebecca Creger called 11 Techniques for Breaking the Typographic Grid I created designs in the brochure that I thought represented a broken grid. Some of these techniques I used were overlapping objects and using the edge of the page. In the brochure, I overlapped the squares in front of the brochure to look cool to the viewer. I also did this with the pictures for the water attraction section of the brochure. The incentive page in the brochure shows the technique of using the edge of the page. I thought this was a cool technique to incorporate to get the attention of some of the people reading the brochure. In some of the images, I chose to lower the opacity so viewers can read and see the type much better. While using these techniques I kept in mind of using good balance so I do not overdo it in some sections in the brochure.

A bit of hierarchy is used in my brochure for example the picture on the very front of the brochure and the picture of the young woman behind the “explore lots of cool places” trifold.

As you may see in the bottom right of the front brochure there is a logo named Travel In Time. I created a simple and quick logo for this fictional travel brochure. With this logo, I decided to put a plane in the logo so people know it is a travel agency. Blue was decided to become the color of the logo because it represents trust and is a noticeable color associated with flying in the sky. This logo color also matched the color scheme I chose for the brochure.

I hope you like this brochure I created. Though I am not advanced in the InDesign Adobe software I tried my best and will get better with using it in time. Thanks for reading!