The Window

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of Windowvation company.

Immersive story telling for makers and designers

The Window is an iPad focused web-app, aiming to provide a social platform to the community of product designers, interior designers, architects, makers, brands and design enthusiasts. The Window enables the community to showcase their works and tell the stories behind, communicate and collaborate.

The Window’s core value relies on the social elements and the metaphor it stands for.

The Metaphor that The Window evokes in a digital platform is a high street. The idea comes fom the fact that e-commerce is missing a point whivh matters for creators; the story.

My Role

My primary role in The Window was to be the champion of the Metaphor. Every experience, interaction, feature or functionality must be semantically appropriate to the metaphor, and not break it.

• Product Road Map; taking part in the planning and managing.
• Communication between design team and developer team
• Design and develop concepts for features and functionalities
• Create user flows, wireframes and prototypes
• Guerilla user research
• QA testing

Projects

Selected Project;

Windowmaker

Windowmaker is essentially the content management system of The Window; the place to create, preview, edit and publish content. At this stage, The Window was in a private alpha stage and one of the things most sorely needed was content before going public.

Legacy Windowmaker Dashboard

Legacy Windowmaker Window Editor

In the old version of windowmaker, besides several functionality and logical ux problems (such as the way that the publish button works etc.), the general paradigm of the whole site was broken. Row of windows was at the top, whereas they are at the bottom on the rest of the site.
The structure of the story screens, as well, didn’t correspond to the structure on a published window; since they sit horizontally.

The editor screen, on the other hand, didn't represent the structure of the published story either; as the elements of the screen are separated, making it complicated for the user to envision the final result. It doesn’t give any clue about the rest of the story screens and where the user stands, thus it fails to reflect the unity of the ‘window’ and the stories inside of it. This caused contextual unawareness, which was evident in the the published windows. Navigation between stories was not intuitive.
So basically, what you see wasn't even close to what you get, all over the old windowmaker.

Dashboard

When redesigning it, the first thing I focussed on was layout. I tried to keep it as consistent as possible with the main structure of the platform in order to prevent confusion, which was shown in user testing to be difficult to grasp. I repositioned the row of windows at the bottom of the screen and sorted story screens and products vertically, the way that they exist on the platform. Separating the window and the intro screens, I used the window as the primary element of the module, and the story screens and products and complimentary elements as thumbnails. I collected the main controls, online/online toggle and delete button, as well as the header, with more common interaction patterns.
Every element on the overview is drag and drop enabled (including details like, if you drop a story screen to the intro positions, the window images updates automatically), and thereby allowing the user full control over the window content.

In the editor mode, I aimed to provide a WYSIWYG experience. Integrating all previously distinguished elements, I replicated the view of a window, story screen or products in the window maker. Additionally, I added the side navigation instead of the pagination, in order to allow the user to navigate within the story easily and give a better understanding of the flow and heighten their contextual awareness. It also contributed with

Window Editor

Window Editor - Products

On the product grid, we needed to use a fixed sized view due to technical obstructions. Apart from that, it shares the same layout as the live grids.

On the product details editor, I reordered the sections of information to appear as they do on the live products. One of the delicate refinements was to adjust the path of focus area via the tab button according to the information order that designers are used to, because of their daily design tasks.

Iterations

Final Product

The final visual design of Windowmaker, like any other visual design work on thewindow.com at the time, has been crafted by talented Emilie Deneuvelaere.