Soundcloud —The Redesign (Part 7)
In this post I will create a workflow for the redesign and select a design language. After this I want to focus on brainstorming possible flows, interactions and layouts, keeping the design language guidelines in mind to come up with an initial prototype. I will revert back to the findings and information from all previous posts to guide the redesign process.
Back it Up
The choices I make for the redesign including layout, structure of pages, hierarchy of information, text and filters are based on my understanding of Soundcloud, the examination of information architecture, content strategy, universal design principles and psychological factors from the previous posts. In a real UX design project IA, content strategy, universal design and psychological design factors should be bases on data gathered from real user research such as information from surveys, analytics, card sorting, observations and contextual inquiry. For the purpose of this project that is out of scope so I while use the proto-persona and scenario to empathize with the user and create focus for the redesign.
New Workflow
I want to simplify the workflow and make it easier for users to access all relevant information. Anything unrelated to listening, finding tracks and accessing the users information have been removed. My aim is to use a dynamic filtering system on most pages to allow the user(Jess) to manually search for and find other content in the Stream and Search pages, and to apply content strategy principles outlined in a previous post for the Explore page to allow users to automatically access and find new and interesting content.
Selecting a Design Language
I’ve selected Google Material Design(GMD) as the design language to use for the redesign. There are already some GMD elements being used but I think more guidelines could be followed to improve the usefulness, usability and visual experience.
I spent some time researching and studying Material Design to gain a deeper understanding of the core principles, properties, styling, components and patterns. Following the recommended sizing guidelines for buttons, padding, cards and fonts etc… I created a rough and ready design guideline to use for the redesign.
Below is a breakdown of the specification I used for the various components.
Font Style: Roboto
Type Weight: Regular and Medium
Headings: 20px Medium
Titles: 14px Medium
Sub Titles: 13px Regular
Floating Action buttons: Icon 24px X 24px, border 40px
Buttons and Menus: Icon 24px X 24px, padding 12px. Minimum button and menu size 48px X 48px.
Padding and spacing: Ranges from 4px, 8px, 12px, 16px, 20px, 36px and 72px
Accessibility Friendly
With the exception of one or two secondary elements, all touch targets such as buttons and menus are a minimum of 48px x 48px which is recommended by google material design as accessibility compliant.
Although I followed much of GMD recommendation and specification I customised some sizing and padding (still adhering to minimum target touch size recommendations of 26px X 26px) as visually they suited the design and layout better.
Material Design Colour Palette
I created a GMD colour scheme for the redesign using Material Pallette. Sticking with Soundclouds branding I used the dominant brand colour Orange as the primary colour, with an accent indigo as the secondary colour for floating action buttons and focus areas. The accent colour is useful for drawing the users attention to certain elements on the page and can be used to improve usability, conversion and user goal completion (e.g. for proceeding to a checkout page on an e-commerce site.)
Ideation and Sketching
Using the workflow and GMD guidelines I began brainstorming and ideation. I sketched out different concepts for the various pages in the flow and looked at different types of possible interactions, buttons and menus. I then reviewed the sketches and selected the ones I thought have the most cohesion.
Wireframes
The next stage was to turn the above sketches into wireframes that could be developed into a prototype. Using the specs from GMD and sketches above I used Axure to create each individual page. I then mapped out the the journey from page to page.
Prototype 1
Using the above wireframes I created a prototype to mimic the interactions above. First Prototype can be accessed here(Open prototype on an Android phone to experience correct flow and interactions)
Reiterate
The next stage was to create a higher fidelity prototype which would consist of real data, filters, sort by and colour scheme.
Information Architecture
I have ordered the 5 pages into what I feel is most useful to the user. In a real user experience project card sorting or web analytics could be used to define an appropriate order. I think Explore will be the most used page followed by Stream as users will be motivated by social psychological factors such as being the first to find new tracks to share, and to see what their friends and favourite artists are listening to. I think Profile and Notification Settings are important to access but will be used much less. Once a user has input their personal information and desired notifications they will rarely change it.
Page Order
- Explore
- Stream
- My Music
- Profile
- Settings and Notifications
Primary functionality will be visible to users at all time (such as Name of track and artist in a playlist) with secondary functionality being inserted into an overflow menu (such as share, repost and add to playlist). This will vary depending on where the user is, and what the users goals are on each page. This makes its easier for users to access and scan through the most important information quickly while still having access to less used features, with as little amount of work as possible (less clicks).
Track label Hierarchy
- Track Name -primary
- Artist name — primary
- Play — primary
- Likes — primary
- Repost — secondary
- Share — secondary
- Comment — secondary
- Go To Artist — secondary
- Similar — secondary
Content Strategy
Using the Explore page I want to display content that will be appealing to the user. These will be based on:
Recommended
Based on the users playback history and music type preferences, Soundcloud will show the user tracks that the user might find appealling.
Trending
These section will show new and note worthy tracks that the user could be interested in.
Weekly Top 20
Based on users preferences (music type, liked tracks, playlist and artists)this section will show the top 20 tracks of the week.
Track Design
I minimised the vertical space used for each track to allow for more tracks to fit on screen, and made the functionality that exists in search, explore and stream consistent.
Side Navigation Drawer
I decided to switch to a side drawer for the navigation as there is insufficient space to support a top screen tab layout for all the headings. With the side nav I can display many navigation targets at once. This also reduces visual clutter and provides more room for content on a screen. User can quickly navigate to all pages through this side nav drawer.
Filter Panel and Sort by
Having explored a number of different options to include in the filter panel and sort by, I have decided to go with what I feel will be the most frequently used by my proto-persona (in a real user centered design project these filters would be defined quantitatively and qualitatively by the needs and wants of real users):
Filters
- Music Type (genre)
- Audio Type
- Uploaded date
- Track Length
- Country of origin
Sort By
- Most Plays
- Most Popular
- Most Recent
- A-Z (in My Tracks and Playlists)
Prototype 2
Prototype 2 includes real content and the colour scheme. See link here (Use an Android device to experience full interaction). The below video outlines the functionality and interactions listed above.
Whats Next
In the next post I want to look at user testing. I will describe the user testing process, conduct some user testing on some real users, examine the results of the testing and make recommendations for the next iteration.
