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 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
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.
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.
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
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.