Design KKBOX app for UWP
Universal Windows Platform is going to reinvent the way you develop apps.
How to design a KKBOX app on UWP?
The goals we set when we began to design KKBOX app on UWP:
1. Maintain good user experience across all screen sizes.
2. Support three device types first (Desktop, Tablet, and Mobile). These devices will have the same user experience and functions.
3. Support both touch and mouse control.
At first, we reviewed our apps on WA & WP 8.1 systems. “Framework” is the primary thing we need to deal with, because our original Windows Phone 8.1 and Windows App 8.1 apps have different frameworks to suit their systems’ guidelines. Our Windows Phone 8.1 app is similar to the Android framework but Windows App 8.1 app looked too similar to Desktop version, so we decided to use Windows Phone 8.1 ‘s framework to build our newest app. A further innovation was that big screen devices are now able to use the Wins 10 split view feature, to reveal more content. As “Split view” is a new concept, we did paper user testing in order to help us design it.
User Testing
I discussed four different kinds of split views with our engineers, and chose versions A, B ,and C for testing.
The main points that we wanted to test were:
- Transitions into split view
- Split view screen sizes
Final framework: We chose version C as our split view framework, but users are able to resize their screens depending on their personal needs.
Communication is the key to success.
“Communication” during the developing process.
As the product designer in this project, I think communication with the engineering team is key to the success or failure of this project.
Due to the nature of the Universal Windows Platform, constant communication between the design team and the engineers was required. Under such a system the two teams are able to reach a consensus on how to overcome major hurdles on the project. This article will focus on three hurdles we overcame by looking at the problems we encountered implementing the initial designs, as well as how the two sides cooperated to reach a solution and lastly how we modified our original plans to implement a functional design.
The first problem was the design of tab bar for tablet screens.
1. We initially designed our tab bar according to the specifications of the Windows 10 app. However as some of the icons were unclear we had to add script in order to clearly communicate the tab’s function.
2. Due to the layout of the spit view screen we had to adjust the search bar to the tab section.
These adjustments were essential as the theme store needed to be highlighted for customers and the search bar was simply out of place when users entered the split view mode.
The second problem was with our search page.
As we mentioned above, in the initial designs we placed the search bar inside the drawer on tablet screen, so we needed the search bar to be focused on the screen when using the search function. This process would be hard for engineers to code because the layout was not uniform with our other pages. After redesigning this function over five times, we finally decided that the best solution was to follow the design of the mobile view. This solution proved less problematic for our engineers and ensured ease and familiarity for users.
The third problem was with our ‘now playing’ page.
We initially wanted to keep our now playing screen identical across all devices, however on large screen devices this left far too much empty space. The engineering team suggested having the lyrics function automatically playing beside the album cover. Having thought this was a brilliant idea I began working on the designs immediately, however I had no idea at the outset that such a simple idea would require almost three days of continuous work.
Let’s start with the specifications our engineers needed to know:
1. Width > n
2. Height > m
3. Width > n && Height > m（not including the height of Status Bar）
Album cover & Lyrics：
1. Set album cover minimum height
2. Set lyrics minimum width
Check if album cover.height < 1 and then check if width > 2.
If the two equations hold，then bring out lyrics
(song access button go with lyrics and song/album name with album cover)
For me personally this was very challenging and the mathematical approach to the problem clashed with my usual focus on design. Initially I could not picture the overall design across all devices in order to give the engineers the dimensions they required and it really made me reflect on the fact that engineers work in numbers, whilst creative types like myself work visually.
Upon implementation, this design became even harder to achieve as some devices would encounter problems when switching between horizontal and vertical views (for example sometimes the lyrics would only appear one line at a time). Despite the arrival of large screen phones users are still required to switch between the album artwork and the lyrics view with the use of a button.
Lastly we encountered problems in accommodating both touch screen and mouse input applications. Despite the functionality of sliding between screens, this model was simply not practical for users working with a mouse. In order to overcome this problem, we simply needed to add arrows to the design so users could switch pages when they were unable to swipe the screen.
More information:
Article by our engineer Pou Lin : Introduce functions of KKBOX on UWP
We launched our app in Apr 2016. You’re welcome to give it a try. Let KKBOX on UWP change the way you use apps.
Download from Microsoft Store.
If you have any questions, please e-mail (uwp-dev-intl@kkbox.com). Let our team improve our apps and make the experience better for you.
Thank you for reading.
