Project #2. Wireframes & Userflow.

Prototypes - click here. 

Userflows - below.

Guess Who Wireframes

Link

Tracking App Low Res Wireframes & App Map

Project#1: &sounds. Design and Prototype.

Next steps after last week's user testings: 

1. Decide on improving either prototype 1 or 2.

2. POP prototype 

I've decided to work on Prototype 2.

Changes: 

1. Added a secondary navigation, so it'll less steps for users to explore new sounds, access their sounds, and check their feed.
2. MY FEED. Changed the square "thumbnail format to a band. This is to reduce the amount of information overload on the feed and sounds are usually presented in a list. (Signal to ration & using elements of the real world into the design principles). 
3. CATEGORY. Colors assigned are now determined by sound category, suggested by computer, to give a bit of a surprise. 
4. SEARCH. "Side Nav" Search function is combined together with "Explore", as it was confusing for users. Instead of 2 search functions with 2 different filters, now it's 1 and users will be able to add categories. 
5. EDIT. This function follows the search filters, to make it more uniform with the rest of the app. And also to minimize confusion. (On hind sight, I think it'll be confusing, as users will need to apply filter & listen to the changes they've made). 
6. SIDE NAV now has lesser options. "My playlist" isn't something that's as important as "my sounds" or discovering new sound. User can access it through "my profile". 

Here's the POP Protoype.

Flinto Paper Prototype:

https://www.flinto.com/p/0f1f4380

Project #1: &sounds. 2 Prototypes. Wireframe iteration 3.

Credit: solidifyapp.com

The improved prototypes, below.
Changes made based on the result of user testing #1 and feedback.








USER TESTING #1
AppMapV3a-1 (wireframes 3) – Prototype
Participants:
- 1 grad student, an iPhone user
- 1 grad student, an Android user
- 1 developer, an Android user
Results:
Discover
- What happens if there's someone who's recorded an illegal or vulgar soundbite?
- What are these grey pins?
- How do I go back?
Record
- Are these grey pins my recordings or others? It's pretty similar with the other one.
- I like the editing feature
- It's like instagram for sounds!

Credit: solidifyapp.com

USER TESTING #2 
AppMapV3a-1 (wireframes 3) – Prototype
Participants:
- 4 app savvy mates
Results:
Side Nav
- Clicking the Logo to go to Home is causing a bit of confusion. Users tapped on the Hamburger menu button first, before trying others.
- Include Home/Discover buttons?
Discover
- List icon isn't clear
- I didn't get that it's a list view
- I like how the list view is instagram-ish
- The Map gives me a sense of satisfaction.
- The Map can be overwhelming.
- How do I follow other people?
- Why do I need to declare where I am? It isn't clear that I have to declare my whereabouts.
User Profile
- List icon very similar to Hamburger
Record
- Are these grey pins my recordings or others? It's pretty similar with the other one.
My Sounds (music player)
- How do i go back to Map view to play a different sound?
Overall
- Being consistent from screen to screen (transition, behavior, etc)
- I like how the place matters here.
- I like how the Log in is not upfront, users only log in/sign up when they share sounds.

AppMapV4 – Prototype 2

Participants:
- the same 4 app savvy mates
Results:
Discover
- How about including a category such as mystery/surprise me sounds? For users who don't check-in and etc.
My Feed
- How do I go back to previous screen?
- It can get confusing & difficult to listen to many sounds at once
Music Player
- Play Next track button isn't clear.
- Can't I play the sound while in list mode?
- "•••" button throws me off
- How do I hide the comment, like, etc buttons?

Overall
- Simpler than Prototype 1
- Very audio based, location isn't very important here
- I'm just recording, less about the place/location
- I like how it's fast & easy for me to access the audio and record

Next steps:
- Decide which iteration/approach
- Animate the background animation
- Insert sound

Wireframes_Second_iteration