SoundStage

UI/UX, Mobile

Guiding Your Users



One of my recent freelance design projects was working with Monster Cable on improving the UI of their mobile app for their wireless speaker system, SoundStage. The Monster team found that customers were unhappy with the current mobile experience, so they brought me in for analysis and a design overhaul for the initial speaker setup process.

1. Step-by-Step


The current experience for setting up a speaker consists of graphic illustrations and blocks of text. One problem with this UI is that users are inclined to click wildly past these important instructions because a big glaringly red button that saids "Next" begs them to.


Previous Version


To better guide the users, I numbered each step to simulate an order, bolded important wait times, and color-coded words that signified when to look out for specific light colors on the speaker. I also placed less emphasis on the "Next" button so that users would not fly through the instructions and get lost.


My Version

2. Helpful Hints


There were a few recurring points of confusion among users during the setup process. Many users had trouble powering up the speaker and understanding what WPS setup was. To address these frequent barriers, I added "helpful hints" that provide more detailed instructions on these steps. Once a user clicks into one, they can easily return back to the setup process by pressing "OK."



3. Back and Forth?


Another painpoint of the current experience is setting up the Wi-Fi network. Due to the nature of the speaker, the iOS Wi-Fi setup requires exiting the SoundStage app and going into iOS settings and into Safari. This is not ideal, since it sends users back and forth from app to app.


Previous Version



To mitigate this inconvenience and reduce confusion, I warned users ahead of time that they will need to exit the app to perform the following instructions. I added a bolded instruction at the top that strongly suggests users to read through the next steps prior to leaving the app. Then at the end, users can return back to Step 1 to actually execute the steps.


My Version

4. A More Fitting Android Design



The current app experience for Android differs from the iOS version slightly, but does not fit typical Android design principles.


Previous Version


Instead, I used the ubiquitous Android font "Roboto" to better suit the Android version, and included familiar "Back" and "Next" arrow buttons that are often seen in popular Android apps.


My Version



These changes have yet to be included in the newest app release, so I am looking forward to seeing the results of these UI improvements once they are implemented. Check out the Invision prototype I made:

Takeaways


1. Guiding users requires transparency.
2. Android and iOS demand different design principles.