Microsoft TechReady19
Exhibition of Excellence App

Wireframes

Because the attendees of the Microsoft TechReady event are from all over the world, our team reached the consensus right away in the kick-off meeting to have a geographical display for browsing worldwide Microsoft projects. The app has two entry points, browsing by country or by categories, to start browsing various projects. The map’s interface approach resonates with the global audience attending the event. Users can easily point to the country from which the projects came.

When users touch a pin on the map, the carousel will position to the respective Techready19 competition submission.

---

Interaction Design

The developer and I were collaboratively sketching, erasing and sketching again quickly while walking through the interaction flow.
The rapid whiteboard prototyping fostered our collaboration and was valuable in eliciting feedback to insure that our design would have a solid technical groundwork.
Our discussion included using an asset flow showing project cards as opposed to an asset grid, after users tap “Browsing by Map” or “Browsing by Project Categories” which connected the users to a database so that they could find the project they wanted to view.

---

Interaction Flow

---

Final Design

Welcome Screen with loop video invites attendees to touch the screen If users touch a pin on the map, the carousel will position to the respective submission. When users scroll the carousel, the country name in the bread crumbs is highlighted. Users are able to browse through the thumbnails by simply scrolling the asset flow and the asset in focus (in the middle of the display) to populate the pop-up detailed content page. Browsing the manual Take notes

---

Results

Two 55" PPIs (Multi-touch displays) were placed on the sides of the large printed in the main lobby. This allowed visitors not only to view the printed content on the massive wall but also to engage with the touch screens on the sides. There was no extra marketing or media used to drive people here. Instead, the app itself used the attraction loop video and invited attendees to touch the screen. The location and attract loop generated a phenomenal touch total: 1557 clicks over the week of the event.

---

What I have learned

Importance of Call to Action Design

Displays and touchscreens were not very noticeable by themselves. There were still some conference attendees walking by the devices without knowing it has interactivity. Thus, in the call to action design, idle messages and enticing ambience are what the team should continue paying attention to in order to ensure user interaction

The difference between design on a mobile touch device and a large touch device

The same basic design principles apply whether it is a tablet, smartphone or a large touchscreen. However, the design differences among these devices are the user context and the type of gestures a user can use, such as swiping and using the whole hand. For example, tapping is a familiar experience on mobile touch screen but the same design won’t bring much engagement on a large display with a crowd. Effectively combining interesting interaction with a learnable interface is the challenge of this project. Also, unlike designing a mobile app, designer can't get any sense of scale when designing a large format interface on a smaller screen. It is impossible to design without having the physical hardware to test against.