Redesign Challenge 2: Naturespace for iPhone
The Redesign of Interaction and Layout of Naturespace app

Summary
The second app I decided to redesign on my phone is Naturespace, which is an environmental soundtrack player that has a lot of audio tracks made from natural sound such as forest, ocean wave, raindrop and so on. It also supports turn-on and turn-off timer which can be used for sleeping and morning waking up. The function is quite useful while the app interface doesn’t seem to be well-designed, also the usability level is low from heuristic evaluation (Nielsen’s Heuristics and Shneiderman’s Eight Golden rules are applied), cognitive walkthrough and my personal user experience. So I redesigned this app from scratch - from content hierarchy to key functions workflow, including visual design.
Content Hierarchy
The entrance of seven content branches are all accessible from landing page, which are evenly placed in the bottom tab bar. But seven icons huddling together in the bottom makes the page looks messy and lack of emphasis, also distracts the user from their main task.
Based on the analysis above, I rearranged the structure based on the importance and frequency of use of each function. This also determines how I would place each function in the new layout design.

Then, I managed to combine similar functions in order to make the top-level category concise. First, I combined the “List of audio”, “View installed tracks”, “Files” and put it on the landing page as they are the same thing. Then, I kept the original “Welcome page” as the second category, but change its name into “Discover”, so it indicates that this page is the place to find more audio tracks available to purchase and download. I put “Timer” in the third category, which includes sleep and wake timer. Sleeping and waking with the audio tracks is the major use case, so the timer is a frequently used function and its entrance should remain in the top-level category. Lastly, I put all the settings and sharing function in the last category and kept the name “Console”, so they are all invisible from landing page, and the user wouldn’t be distracted by less frequently used functions.

Visual Design
In the first place, the motivation of improving the visual design came from my subjective preference of UI design. I would lose patience for exploring an app if it does not have a decent appearance. Moreover, poorly designed UI sometimes has a negative influence for the user to recognize the elements on the screen.
Color Scheme
The primary color used by Naturespace is black, which is used in the background. The text and icons are mostly in blue and white, with some exceptions in green. Both the blue and the green are at a really high level of saturation.
Some apps use black as background for a high-class feeling, but it doesn’t apply to Naturespace as a lifestyle app. Despite that Naturespace is probably using black to set off the content - usually in many different colors, pure black is a bit too much and usually delivers a negative mood.
The brand color of Naturespace is a grass-like kind of green, with a low saturation level. But Naturespace doesn’t use this color anywhere else in the app. Instead, high-saturated blue, green are used throughout the app for text and icons, which aggravates the visual mess. Also, the different colors of the icons in the bottom tab bar are not used for distinguishing the selected and unselected status, which does not clearly indicate which page the user is currently in.


In the redesign, I used gradient dark grey as the new background color, it increases the aesthetics while keeping the colorful content remain obvious. For the bottom bar icons, I picked the brand color (green) used as selected status, and white as unselect status. This makes it clear which is the current page.


The Bottom Tab Bar
From cognitive walkthrough another problem found about visual design is that there is no text instruction about bottom tab bar. The current icons are not intuitive enough for the user to recognize the meaning of each category without text instruction. Also, based on Nielson’s Heuristics, memory load is a key factor of usability. Unclear meaning of categories would increase the memory load for the user.

Hence, in the redesign, I improved the icon design to indicate what each category is about. The text is also added under each icon to help make the meaning even clearer.

The “Console” Page
In the original page of “Console”, the content is not properly grouped: Some buttons are on the top of the page while some are in the bottom, and options don’t seem to be in a consistent and meaningful order.


In the redesign, I regrouped the content in order to make them in a reasonable order: Volume control comes first as it is used most frequently. Following are the switches of audio mixing and automatically play new downloads. All the other information/links are put in the bottom as they are rarely used.
Key Functions Workflow
The Sleep and Wake Timer
Sleep and wake timer is definitely the most frequently used function in Naturespace app. But to setup a sleep and wake timer, the user needs to go through 7 pages to accomplish the task, which is considered as inefficient if the user only wants to modify one single parameter. And it is too much memory load as it is difficult for the user to remember what has been set in previous steps. Furthermore, there is a lot of unnecessary text instruction throughout the setup process that the user can easily remember after the first time using, e.g., what is a duration setting widget. They would be useless and rarely used after the user getting used to the setup process.







In the redesign I managed to squeeze all steps into one single page, this enables the user to easily modify any parameter without having to go through the whole setup process. I also packaged the instruction information into “information” icons so the user can access to these help info at the first time of use, while not having to see them every time later on.


The “Discover” Page
First, in the original design of “Discover” page (previously named as “Catalog”), contents are displayed in text lists without image shown directly. During the use, I found out that the image of each audio track is a significant factor that triggers the user’s interest and purchase. Without image shown beside the name of audio tracks, it is difficult to engage the user to explore more music options in the first place.
Second, to explore all available audio tracks, the user needs to slide down for a super long distance and possibly go deeply into several levels of menus to view all the options. This makes it troublesome to navigate through options and jump from different categories.


I think it would be great to show images of audio tracks at the moment when the user switches to the “Discover” page, and at the same time reduce the length of page as well as the number of catalog levels to simplify the navigation. So in the redesign of this page, I classify the catalog into three main groups: Recommended, Discount Packages and Scenes,to save the space for the content. Then I put the audio images from the same category in a horizontal order, which enables the user left and right slide to view different audio tracks while most other options still remaining visible.
