Cover twitter for N9 concept Cover twitter for N9 concept Cover twitter for N9 concept Cover twitter for N9 concept
APP design

A new Twitter client for Nokia N9, Meego app prototype.

Try our navigable concept for an updated Meego Harmattan Twitter app.
Also, this mockup follows the Nokia UX guidelines and the “Seattle UI” look and feel.

The context

Nokia N9 is an unforgotten legendary device: it was the NOKIA’s “song of the swan”, before to be bought by Microsoft. After years of works, R&D, industrial design, and last but not least, UI design and software engineering, Nokia took up the challenge launched by Apple in 2007 with the iPhone 2G.

Nokia N9, finally launched in 2011, was a device that – although for some technical aspects inferior to iPhone 4S (Apple has iterate in the while!) – it exceeded him clearly looking at daily User experience, UI solutions in OS, Industrial Design and also Graphic Design.

For all that reason, a strong fanbase still in 2020’s year love this device. And still use it!

#NokiaN9 on twitter

The prototype

Below you find the embedded prototype, made with Adobe XD. In case of slow performance or lag, see it in a separate window.

 

Project

Below a short technical report that accompanying the project.

The hypothesis

The main purpose of the project was to verify if it was possible to use the Components provided by Nokia in its graphical kit in 2011/2012, and design a contemporary Twitter app.

The answer was: YES.

The components, that corresponds to QTQuick 1.1 items with a look and feel same as the Meego UI, called

More: The UI style of Harmattan 1 is called “Seattle UI” by Nokia.
This is an unknown detail, not indexed by google buy visible opening the UI templates for designers.

1) Rough

The first stage was to visualise an overall view of the app. The media chosen was a solid A3 paper, with the rough of main pages (low fidelty prototype). A touch of color is given by a cyan Promarker.

twitter_n9_concept01

2) Layout

The format for mockup was a 480 x 854 px format, the display size of Noka N9 target device, vertical state.
You may see it larger than how it would be, consider it is a 3.9 inches display!

As said, it was chosen for this prototype the Adobe XD. This because all the Nokia UI kit were in .AI format, and the ability to do copy/paste directly in XD was unvaluable. The software allowed to simulate barely all the N9 system transition with good age.

The reference in authoring the app was the latest iOS Twitter official app: menus and function are matched by the Meego components, although in different position or requesting one more tap.

3) Test

The actual stage of project is the test: navigate it and let’s us know if you wants a more simplified and N9 style, or a more complex hierarchical UI.
The NEW TWEET button is placed in top header, like in old Twitter stock N9 app. Also, the New Tweet button now opens a new Sheet.

Did you wanted the button in toolbar instead?

 

4) Code (Production)

This is not a fancy concept: every element is an official component provided by Nokia, with its QTQuick item as reference. So it may be easy for some good QT 4 developer assemble the app. After that will be needed to connect it to the backend, and get a Twitter Oauth 2.

Will may be created a Github repo in future.

Share this



BACK TO TOP
CHOOSE BY CATEGORY