Wireframes

How did we begin the process?

We heard about a great software named, Figma, which enabled us to create the content below. Click here to see our wireframe on the actual interactive site!

Initial Survey the User sees after downloading StreetSmart

The initial survey view of our application is completed when first using the app to personalize their profile. The user selects the answer that speaks most to them. After selecting one, the user will be directed to the next question or hit the back arrow to go to the previous question. The Survey asks general questions for all people, but after the first 10, future questions are asked based on previous responses.

In the Moment, Quick, Survey

Oftentimes, our users will want to use the app in unpredictable ways. How they we feeling that day of their initial survey may have encapsulated them well but not well enough to tailor suggestions at any moment. Our users wish to do activities in the spur of the moment, so an "in-the-moment survey" looks to fill the void. These little surveys serve as check-ins to track user habits and provide better insight into the user's interests.

StreetSmart Users are sometimes notified by phone notifications to answer a few questions if they are bored or maybe hungry.

They can either select an answer choice to go to the home screen or hit the back button to go back to the survey.

Showing Off The Best Spots In Your Area

After the surveys, the user is presented with the main page of the app. The main page consists of a tab bar; Places, Map, and Journal. On the Places tab, users can search for a specific place/location or scroll through the list of popular locations in the area. You can tap on each location to send you to the "Places on the Map" screen which will allow you learn more information on the location. The filter bar to the left allows the users to narrow down their results for a better search using a variety of different filters, such as type of location, ratings, etc. The button on the right side is the settings button, which takes the user to the settings of the app.

Settings

The settings page consists of different features that the user may want to change or edit such as their account, FAQs, map, journal, take a new survey, places/location, or (if they have a business account) add a store location. The back button in the top left takes the user back to the home screen while selecting one of the options takes you to the settings of that feature. For example, pressing the account button bring up profile information. When you click the Frequently Asked Questions, you are brought to the FAQ page listing questions that others found helpful. Buttons like maps, journal, and places and location allow the user to customize the display. The purpose of the new survey button is for the user to explore other destinations, especially when personal interests have changed. The add store location button is useful for business owners that wish to register the business to appear on StreetSmart.

Frequently Asked Questions

Often times when traveling, users will want to get acquainted with how the new environment they are entering works. FAQs serve to eliminate the user's countless and sporadic google searches. This gives them all the important information that they would probably surf the web for. And it's all in one place for them so little to no research on their end has to be done.

On the Frequently Asked Page, users are presented with a search bar to look up specific questions, a list of frequently asked questions for their location, the home button (top left) to go back to the home screen, and the add button (top right) to post a question of their own. When the user clicks on a question, they are taken to the thread page for that question which lists the thread in detail, as well as responses from other users. When the user clicks the add button to post their own question, they are given a blank template that they can post (or if they change their mind, they can discard the post).

Users are able to view and save FAQs that they searched in the past, creating their own FAQ sheet!

Most Popular Spots On A Map Near You

On the maps tab, users can search for specific places or locations, view a map of the area, or view the trending locations nearby. On the first screen you can see that when first clicking on the "Map" section, you are shown a page with a search bar, map, and a list of popular locations that you may have an interest in. When the user clicks on the search bar, they are able to look up any location they may want to visit and find directions there. Additionally, as shown in the second image, their recent searches are shown in chronological order so they can see where they last went. Additionally if you want to filter the searches you can press the button that has three lines with dots. This allows you to filter through locations on the map to find what you might be looking for. The right of the screen is the settings button which takes the user to the settings page.

Navigating To Your Destination

Places on the map shows more information on specific places on the map. This page will show up after selecting on a location of a map in the map screen. After selecting a location, you will see the screen similar to the first one in the image which shows a picture and description of the location the owner of this location chose. Additionally if you are the owner of this location you will have access to the "UPLOAD PROFILE" button shown at the bottom of the screen on the first image. This will then take you to the screen shown by the second image were you can change the information on your store. This information includes the name, description, and location which is selected using a map as shown in the second image. After typing in the correct information you can click "Done" and your store information will be updated.

If your store/location does not already have a designated place on the map you can add it by selecting the "Add Store location" shown in a section above under "Settings". This will immediately take you to the screen shown by the second image. The difference is, after clicking "Done", rather than the store information being updated, your store will show up as a new location on the map.

Journal Feature

When selecting the Journal's part of the top bar, you are brought to this page as shown as the image on the far left. It will show all of the past journals you created and a plus sign on the far right. This plus sign will bring you to the page shown below which will allow you to add an entry to the journal. If you have no journals it will show up blank.

If you press "New Post" which is to the left of History right below the top row, you will be able to create an entirely new journal. It will bring you to the second picture shown which will allow you to name the journal and give it a date (it is automatically set to the current date and time. After doing this and clicking next it will take you to the final picture which will allow you to type your entry into the journal.

Possible Journal Entry Types

In the journal entry screen, there are three different additional options for a journal entry apart from the standard text entry.

If you press the first icon below history that looks like a picture, it allows you to add pictures to your journal. It takes you to the screen that is shown in the the second screen in the picture. It shows you pictures in your camera roll and you can then click on these images to choose what pictures get added to your journal. you can then press the checkmark or "x" shown at the bottom to confirm if you want to add them. After this, you will be taken back to the main journal page shown by the first image in the picture.

If you want to add a voice recording to your journal, you can click the microphone icon to the left of the picture. This will take you to the screen shown by the third screen in the picture. You then type a name for your voice recording and press the black button to start recording. If you're happy with your recording you can then click the check button to save it or "x" to discard it. After this, you will be taken back to the main journal page shown by the first image in the picture.

The final thing you can add to your journal is a text box. If you click the "T" to the left of the microphone you can create a text box in your journal. After doing this you will be taken to the screen shown by the fourth screen in the image. You can then type the text you want to add in the text box and click done when you are finished. Your text will be shown in a box in your journal separately from the rest of the text. You will then be taken back to the main journal shown by the first screen in the picture.

Process

After the Ideation and Design Studio Feedback, we came together as a group to finalize our design for our application. We thoroughly reviewed the multiple designs created for each feature and combined the best parts of each one. There were many suggestions that came up that seemed like a good idea at the time, however a core thought when designing our app was its usability. We did not want to clutter the app with unnecessary features that would not be used by a vast majority its customers. The interviews conducted in part 2 of the project significantly helped with this section as well as the Design Process. Being able to get feedback from real people on how useful all of the features allowed us to see what was good and what we could improve upon.

We were able to make great improvements on the "places on the map" feature because of this. We learned that people were concerned on whether or not people would be able to add new locations on the map to visit that were more niche. Because of this we added the "places on the map" feature which allowed users to be able to add new locations to the map that were not already previously there. After making these improvements we had to figure out how all these features would fit together in the wireframe.

We put our sketches in order of where we would want them to show up in the app so we could more easily visualize how the user would experience the app. After finalizing our layout and designs, we used Figma to create our wireframes and show the navigation within our application. We chose this design because it was rather simple, yet conveyed all of the information relevant to the user in an easy-to-use manner. At this point, we had already had a great understanding of how our wireframe was going to look so we were able to quite easily complete it.

Representative User Feedback (Alex Howell) :

After the sketches, storyboard, and wireframes were complete, we brought them to our representative user named Alex.

The first that he said right away was, "where is the color in your wireframes?". But then went into more detail on each frame, describing how it made him feel and whether they were covering everything he would need as a traveler.

When looking at the journaling frame, he asked if there was a feature to go straight into journaling from your lock screen. We considered this and made a mockup on a whiteboard, pictured on the right, with him which he loved.

One notable takeaway from the conversation was that Alex believed that StreetSmart must be unique enough to survive in the industry. Alex was also concerned that the majority of StreetSmart users would be people in their 20s, who are typically more knowledgeable in technology.

He also wondered if he had the option to share his journals or make them public. We mentioned we had thought about providing an option for the user to post their journal to a location. Then anyone can click on that location and see public posting journals. Alex liked the notion of it but thought that he wouldn't really like to see a thousand random journals about people he doesn't know. He suggested that you should be able to just send your journey to a friend rather than make it public to anyone.

Page updated

Google Sites

Report abuse