Opera Unite Media Player
- Brief
- Develop a music player using the Opera Unite Media Service built on top of the upcoming Opera 10.5 standalone widget runtime as a useful sample application.
- Context
- The widget was developed late 2009/early 2010 by Opera WebApps in Chandigarh, India with an integrated team of 7 people (developers, testers and designers) in a timeframe of 4 months while the widget runtime was still under heavy development.
- Role
- Project manager and interaction designer.
- Activities
- Developed the concept for the product, defined the feature set as a balance of technical feasibility and usefulness for the users. Managed the project in regards of time, feature set, personnel and tasks and interfaced towards the upper management and other departments with dependencies. Created and maintained the roadmap for future versions of the widget. Designed the wireframes and revised them with the developers, graphical designer and other interaction designer. Iterated on the user interface and defined the interaction, look and feel into the last details in collaboration with another interaction designer. Did extensive refinement work and guerilla usability testing with internal previews and feedback sessions.
- Design Explanation
- The goal was to make a simple-to-use music player, that users from iTunes, Spotify or Winamp would feel familiar with. Some of the design challenges were:
- How to efficiently display different structures of music collections (flat vs. nested).
- How to structure the app to clearly communicate the role and importance of the different entities (player, share browser, file browser, user info panel).
- How to balance the look and feel of the application in its space (native application vs. platform-independent web application).
- How to provide simple, parallel but inter-connected navigation to enable users to browse while playing music without getting lost.
- How to keep the user interface extensible for further versions.
- Outcome
- Released the widget on time with the agreed feature set that allows users to browse and listen to their own music and other peoples’ music share; comfort features such as search, favouring and minimised mode designed and implemented. Over 200.000 total downloads, around 10.000 weekly downloads.
Download widget here. (local mirror)
Opera eBook Reader
- Brief
- Enhance the existing eBook Reader Widget to become more robust and useful; port it onto of the upcoming Opera 10.5 standalone widget runtime as a useful sample application.
- Context
- The widget was developed late 2009/early 2010 by Opera WebApps in Chandigarh, India with an integrated team of 7 people (developers, testers and designers) in a timeframe of 2 months while the widget runtime was still under heavy development.
- Role
- Project manager and interaction design guidance.
- Activities
- Supervised the design of the product, feature definition and implementation. Managed the project in regards of time, personnel and tasks. Collaborated, discussed and guided the main interaction designer on the wireframes, functionality and look and feel from early stages until delivery to make sure all the details are right.
- Design Explanation
- The final product aimed at providing one integrated eBook reading environment, that could be used to browse for eBooks, import them and read them, much like similar products from Adobe or the iPad. Also, the application was intended to suit well for reference purposes, which require more direct access than the more linear reading. Some of the design challenges met in the solution:
- The eBook standard does not support pages if rendered as by author instructions. How to make the UI work well with chapters instead of pages.
- How to visualise an online library in a simple but efficient manner without access to extensive XML APIs.
- How to display and sort a library of books in order to make the user’s access quick and efficient without the need of searching and sorting.
- How to simply (visually) integrate a download manager and a book browser into a basic, list-based library.
- Outcome
- Released the widget on time with the agreed feature set that allows users to browse, download, import and read eBooks. Almost 200.000 total downloads, above 5.000 weekly downloads.
Download widget here. (local mirror)
Opera Dragonfly
- Brief
- Design the user interaction for Opera’s debugging tool.
- Context
- Compared to Firefox/Firebug and WebKit/Drosera Opera was lacking good developer tools to compete for the developer market share. From almost its beginning (middle 2007) until end of 2008 I was the interaction designer for the team developing the Opera Dragonfly.
- Role
- Interaction designer.
- Activities
- Collaborated on the product almost since its inception producing conceptual sketches, defining the feature scope and collaborating on the roadmap. Conducted user and competitor research interviews to define use cases, feature outlines, priorities and incorporate these into the roadmap. Specified the UI (and often the functional capabilities) of features and defined their look and behaviour through wireframes, interactive prototypes and other documentation. Worked closely with the lead developer to make sure the UI of the tool is both intuitive, simple and also syntactically correct. Collected user feedback and conducted internal guerrilla user testing.
- Design Explanation
- The main challenge with a developer tool is to represent data in a correct and intuitive matter while still providing a learning curve that is not too steep. The user focus of a tool like that is usually advanced and expert users, which are very demanding in terms of feature set and functionality. The Dragonfly UI design needed to tackle a set of challenges, some of which were:
- Which features are most important and need to be implemented first, which parts of features are less critical, how to define a roadmap and build an extensible framework.
- How to make an extension to a native app in web technology look and feel like it was native.
- How to communicate a vast set of debugging scenarios from debugging a single tab over switching between multiple tabs and a standalone debugger to debugging a remote client like a mobile device.
- How to group and layout informative views that belong together or need to be seen at the same time in different aspect ratios such as full-screen, landscape and portrait.
- How to highlight currently selected elements and communicate that changing the selection in one sub-view affects other (invisible) views.
- Which colour coding, information layout and structure communicates different tasks best.
- How to make a whole application accessible by keyboard across operating systems when the most common keyboard shortcuts are already taken.
- Outcome
- Opera Dragonfly has over 100.00 daily users and is still under active development built upon the same UI foundation laid in the beginning. By the time I left the project all views had been specified into enough detail that allowed the completion to be done by the developers, graphical designers and QA. See the product pages here.
IBC ’09 Demo Widgets
- Brief
- Develop a set of six interactive widgets in two months for a demo of the Opera Widget platform on set-top boxes and TVs.
- Context
- The project was conducted mid 2009 by Opera WebApps in Chandigarh, India with an integrated team of 10 people (developers, testers and designers) in a timeframe of 2 months while the widget runtime being developed by another team in another location. The specification of these widgets was given and some of the wireframes were final before start.
- Role
- Interaction designer and project manager.
- Activities
- Lead the prototyping and development of all 6 widgets in parallel, managed the project in regards of time, resources and tasks. Interfaced with the other teams involved and ensured a quality delivery of the showcase. Worked with the integrated team to finalise high-quality UIs by extending and modifying the given wireframes down into details and creating new ones where required. Iterated with the graphical designers and the product manager to reach a high quality user interface.
- Design Explanation
- This was the first real project for TV screen for the whole team and as the platform was developed in parallel, the support of various functionalities was uncertain. Overall, the interaction capabilities are rather limited with 4 direction keys, an OK button and 4 colour buttons (which could not be used). This demands the UI to be easily traversable and only rely on a affirmative action. At a later stage text entry was designed and implemented for a Twitter widget. The widgets would run in different modes and have possibilities to interact with the TV program (which was faked in the demo) and the challenge was to define good hooks – such as being able to buy and download the currently played track or tweet the currently watched movie.
- Outcome
- All six widgets were released on time (hard deadline) and made it into the demo. The result of this work can also be seen in these two official YouTube videos by Opera Software: Widgets Walkthrough and Connected TVs
Other Opera Projects: Widgets, WebApps, Desktop, Mobile, etc.
- Context
- Define the interaction and user experience for numerous other projects at Opera Software during the time from middle 2006 until early 2010 in collaboration with other (interaction) designers, developers, QAs, product managers, etc.
- Role
- Interaction designer.
- Activities
- Developing concepts, product prototypes, vision documents, creating wireframes and specifying functionalities and/or their look and feel. Conducting user studies, collecting user feedback, auditing and reviewing user interfaces, working with and/or helping eternal customers and partners to create good user experience. Speaking and representing Opera Software at different events.
- Outcome
- A variety of resources such as wireframes, specifications, documentation or prototypes:
- Interaction design for the Touchless Demo Widget in middle 2009: YouTube video
- Interaction design for the Opera Widget Emulator, which is used at Opera and its partners/customers.
- Designed the use case flow and the wireframes for the T-Mobile Web‘n’Walk Widget Portal.
- Talks at IIT Kanpur and ACM Bangalore (photo).
User Experience of Mobile Web Browsing
- Brief
- Investigate into the Mobile Internet User Experience and develop improvements to the page rendering and page interaction. Look at how to translate the successful use of adaptive zoom on Opera’s Nintendo Wii browser and Nokia’s WebKit Browser onto mobile phones and how to improve it.
- Context
- This Master’s thesis was written at Opera Software for the IT University in Gothenburg (Chalmers TH) from Aug 06 until Apr 07.
- Role
- Interaction Design Intern.
- Activities
- Research into page rendering strategies and other means to improve the User Experience of the mobile Internet.
- Design Explanation
- Mobile web browsing is the next big thing for the Internet. At the point of writing, the number of mobile phones soared, but the number of mobile web users only grows slowly. Especially in markets where access to computers is simple, people seem reluctant to use mobile phones. The main focus of this work was page rendering and page interaction since they are one central part of the mobile Internet user experience. While connection speed slows the user down, one main problem is how to show pages designed for big computer screens on small mobile phone and how to interact with these. Factors hindering the user experience, such as high variety of form factors, usage contexts and user expectations, are analysed.
- Outcome
- Proposal of an approach based on a fluid zoom interaction where the user gets contextual information needed while loading and scrolling, and a detailed view when reading and interacting with the page. Beneath that proposal, a couple of other ideas have been compiled, such as hierarchical access, tabbed browsing on mobile phones, form field interaction and visual history.
W. Maehr (2007): “User Experience of Mobile Web Browsing.”, Master’s Thesis, Chalmers TH, Gothenburg, Sweden.
BoxVox
- Brief
- Create a product with compelling interaction and an interesting user experience.
- Context
- Semester project in spring 2006 at the IT University of Gothenburg in a group of 5 interaction designers.
- Role
- General guidance and planning, design and development of the physical instrument body and analytical problem solving.
- Activities
- Design Explanation
- New digital technology and electronic devices create new possibilities for the development of new instruments, musical expression and artistic performance. Using computing power as the key ingredients enables us to explore new design and interaction possibilities without the constraints that have to be taken into account when creating traditional acoustic instruments. We have focused on creating an instrument that is aesthetic, both in visual appearance and interaction and that subtly expresses its place within the tradition of musical instruments and audio products.
More in the design report. - Outcome
- We created a musical instrument targeted for amateur and professional musicians with an experimental lust. The performer interacts with the BoxVox mainly through hand gestures but there is the possibility to contribute with additional, optional input form other body movements. The direct mapping of arm gestures and sound gives the performer the feeling of shaping the music with the own body, almost as if one self is the instrument. See the YouTube video.
Last updated: Jul 2010