The project’s goal is to make a Set-Top box’ s TV application that supports Movie, Program VODs. It had to be synchronized with other services (Web, mobile). The problem is that target devices did not have the same hardware performance.
However, the client asked me to implement a high-end application that suitable and available to the target devices. In fact, the application was incompatible with low-end Set-Top Box. The application itself was actually not needed high-end. However, the target boxes are too old to run the application. And I had to migrate this application into usable form.
In this project, I was a User Interface designer, but also substituted Project Manager’s role for a while.
As a proxy PM, I discussed the major features and its development plan and set them. Also, I gathered, summarized, and delivered issues that came out from developers and graphic user interface designers. and check status of the issues.
As a UI designer, I designed workflow and wireframes, and interactions of the application. And plus, I made prototype to persuade my client to change UI in efficient form.
Context
The status of the project was serious due to the absence of Project Manager. The project members had been run separately without knowing key feature of the project. To make things worsen, the contraction had done in vague sentence in terms of development, which means that the clients and the project team were not actually agreed in key features and schedules: the project team thought that the major feature only covers contents managing features and account registration, the clients thought that we should build internal VOD purchasing system and payment control. It must there had been miscommunication in the contract level. Plus, the clients replied to inquiry email too slow. The project team and I had to wait the client’s reply for normally 10 days.
So I thought I was the most appropriate person to handle this because I know development side and visual design side, and business management side.
Design Direction
I started to figure out what was happening and what was the most important issue. I reviewed developer’s and designer’s discussion and inquiry email, including the client’s reply. And then arranged a meeting to set up developmental priority.
Actually, internal meeting was not that effective, so we invited the client to join conference call. By doing so, we could set some of major issues each other notwithstanding there were unsolved issues.
These unsolved issues were actually critical to the project: it were about setting key features and schedule.
To solve it, me and the MBC clients arranged 4 days workshop in Dubai. During the workshop, my colleague and I dealt with key feature and its development schedule. And then we discussed UI and performance of the development with the clients.
the main points were following:
- Key feature: It was not set which feature should come first.
- Coverage : If features were set, setting the functional coverage were essential
- Phase : If features that should be implemented were too many, developmental phase should be split by their priority.
The clients and our project team could build consensus on key features, the service’s coverage, schedule. Fortunately, the consensus was made within 2 workshop days out of 4 workshop days.
Thanks to the early consensus, we could get time to discuss remnant issues such as key screen wireframes, functions, maximum number of items in a screen.
Wireframes
As UI wireframe works do, my wireframe works were depend on key features and concept. Before the concept and key features were not set, I made several key wireframes to suggest concepts.
After we set key features, I specify the key images and workflow.
The application’s functions are not that complicated: promoting featured contents, showing the thumbnail of contents, and playing the video. The thing is, the number of contents are so many. The more items have to show, the more computational burden is applied to processor.
So, I suggested a UI for the most complicated screen. In terms of TV UI works, different with touch based interaction, TV UI is on remote-controller based interaction. So, when I design these UIs, I should consider the focus (cursor moved by remote controller) interaction flow. Also, a processor used for the Set-Top box is not good at processing interaction, which means that it takes time every focus movement and selection.
UI Concept 1 : Basic
- Basic concept has a strong benefit when it applied because folder CMS is widely used. there is no need to worry about additional learning. However, it cannot show the deepest depth at one interaction. And it increase needless interactions and using time.
UI Concept 2 : Promotion
- This concept is good at showing broadcasting company’s CI and their strong programs. Also this concept is favorable to move to the 1st depth in one screen. Whereas, too many items in one screen increases the burden that the processor load every items via Internet.
UI Concept 3 : Preview
- The concept tries to solve the depth issue in UI Concept 1. It shows and browse channels and their programs at once. However, the number of channels and programs are not many, which means that the executives of contents providers will not happy with it.
UI Concept 4 : Accordion
- Accordion concept comes from ‘Google Image’. It is great to show images for users ‘consider’ that they are not entering 2nd depth. (but actually they are!). It is beneficial to spare time to load 2nd depth items. But, as you can see, it does not gives actual improvement in proformance, which means the users still have to suffer the focus delay and to enter 2nd depth. Furthermore, Its focus movement is not intuitive. Users have no idea when they press ‘UP’ button on their remote controller at the top of the 2nd depth/ 1st depth.
UI Concept 5 : Alternative
- This concept is to take benefits of other UIs and eliminate their shortcomings. It increase the number of channel or genre in a screen, also can show their programs. Moreover, its focus interaction is simple: upward/downward is for depth movement, left/right is for browsing contents. If the client want to expand the number of items, use text instead of thumbnail or logo. And, the loading problem might be solved: items and channels exclude for currently activated channel or genre are substitute to background images. At that time, the process spare loading time to load remained items to screen.
Application Structure Design
Through the workshop days, the clients and our time can fix major UI screens. Although they did not accept all my proposal, they implement my UIs throughout the application.
<img>
Basically, they tried to promote their featured program, channels. While they seeking promoting methods, they were getting greed. The most of UI screens turned similar into my UI concept 2. Although I respect their decision, I thought I should warn them the possible consequences from what they had chosen : the video clip is a simulation of the possible performance.
<performance video>?
Screenshots
I finished UI scenario for the first phase. And the development was done a weeks later when I quit the job.
Currently, the company is working on the second phase with new contraction between the two companies.
Latest Works
A patient-centered medical information platform for breast cancer patients
A medical reminder system for adolescents to enhance medication adherence
Finding correlation in prescription between mental health and physical health