Select Page

OpenMW Mobile Redesign

OpenMW is an open-source fan project that aims to help run the 2002 roleplaying game The Elder Scrolls III: Morrowind on modern computers. Morrowind is the predecessor of The Elder Scrolls IV: Oblivion and The Elder Scrolls V: Skyrim.

Because the project is open-source, the game is able to be ported onto Android mobile devices. Translating a 2002 keyboard-and-mouse RPG into a well-designed mobile interface is the problem that I solved in this project.

Challenges and Goals

The biggest design challenge was the fact that the OpenMW Android port uses many icons that are either confusing or ambiguous, and the interface is cluttered.

To solve this problem, my main goal was to create meaningful icons. Symbols, when chosen well, are meaningful and communicate the player actions intuitively.

The existing OpenMW Android port interface has many buttons on screen. Translating an old PC RPG onto mobile is difficult because of the controls. A user can reach dozens of keys at once on a keyboard, but on mobile, screen real estate is at a premium.

For this issue, another goal was simplicity in my interface design. Being able to focus on just the most important interactions is critical when designing a beautiful, intuitive UI.

Research

My research consisted of user interviews and user observation.

User interviews consisted of showing 4 different users the following image of the existing OpenMW UI and asking them to identify the button of the following functions: wield magic, activate, sneak, third-person camera, and jump.

Of the four users, two had played Morrowind before, and two had not. None of them could identify any of those buttons because none of them communicate their function.

User observation consisted of researching existing videos of the OpenMW Android port that users had posted online. In this video, a user regularly mixes up buttons because of the unclear icons:

The user attempts to attack, but presses the ‘equip weapon’ button repeatedly. The icon for attack is the crossbow button, which was intended to communicate “fire”, but because the user is equipping a sword, that is not obvious at all. The icon to attack should communicate action, and the crossbow does not.

Sketching

To solve the problem of the confusing icons, I did multiple sketches of improved icons. I tried to consider established RPG icons for different interactions and images that communicated action clearly.

For the placement of the icon, I performed user testing into thumb positioning, and asked user to move their thumbs around a mobile sketching app to create a heat map of comfortable thumb positions.

Prototype

For prototyping, I used Adobe XD and created an interactive prototype from my sketching and research that users could experiment with.

 

Click here for a link to the working prototype.

Testing

During the testing phase, I showed the user the old UI design and asked them to identify what different buttons were and what function they performed. I then showed them the new UI design, and asked the same questions. Of the 7 buttons asked on each, the user could identify 3 in the old design and all 7 in the new design. This 233% increase in identification shows that the new icons clearly communicate their intended action.

Final Design

The final design solves the problem of confusing icons and a cluttered user interface. The new icons all clearly communicate what action will take place when the user activates it, and the less important buttons are moved inside a bar menu so as not to overwhelm the user.

Conclusion

In June of 2019, after working with international OpenMW developers to ensure a functioning design, OpenMW was added to the Google Play Store, and can be viewed here. It has a 4.9 star rating with over 1000 user reviews. Given that the Morrowind community is tight-knit, I have been lucky enough to be able to have conversations with users on different forums, and the feedback has been extremely positive. I regularly discuss the design with users and send design consideration to the lead developer to continue to iterate on the user experience.