Runways. Walk this way. Runways is a prototype smartphone application designed to compliment a user s Melbourne Spring Fashion Week experience.

Size: px

Start display at page:

Download "Runways. Walk this way. Runways is a prototype smartphone application designed to compliment a user s Melbourne Spring Fashion Week experience."

David Nicholson
5 years ago
Views:

1 Runways Walk this way. Runways is a prototype smartphone application designed to compliment a user s Melbourne Spring Fashion Week experience. Background Melbourne Spring Fashion Week (MSFW) is a nine day event hosted by the city of Melbourne, Australia. It is a showcase for established and emerging designers, models and brands. It drives retail sales, and consists of runways, exhibitions, workshops, parties, fashion firms and activations. Since 2014, IBM has been the Official Innovation and Technology Partner for the MSFW event. They have delivered an enhanced event experience through data and mobile technology. Through this partnership, IBM was able to provide us with Twitter and Instagram data from 2014 and Using this data, we were to develop our own enhanced event experience through data and mobile technology. The Data For the most part, the data provided took the form of.xls files. By carefully sorting and filtering the data in Numbers, I was able to derive three main insights. There may be a golden set of rules to follow in your posts in order to gain more followers. The weather may have an effect on Instagram activity People move around a lot while at MSFW. While the first and second insights were interesting and potentially beneficial to users, they posed little to no benefit to the clients (IBM and the City of Melbourne). The third however, created multiple opportunities. I soon chose one to focus on in particular. Using the location and time data from a user s Instagram posts, it s possible to build a summary of a user s day. Posts could be linked together with lines that show the user where they ve been, and viewing their friends summaries could show where they should go. Such an experience could encourage users to walk further, see more, and post more images of places they ve been if they know their progress is tracked Mark Ollis - moll0275

2 Concept Now it was time to refine the opportunity I d identified in the data into a concept that would enhance the MSFW experience, and offer value to all it s stakeholders. One of the first decisions I made was that the experience should that the form of a smartphone app. It allows for anytime, anywhere viewing, but also feels more private. The proposed experience relies heavily on tracking exactly where you ve been during your day, and this information may feel more secure on a smartphone rather than on public display. Users will have the option of whether their data is displayed publicly or not. Target Audience The target audience for the experience is people who love to post to Instagram. This may seem simplistic, but it is vitally important as without regular Instagram posts, a summary cannot be built. In terms of demographics, the city of Melbourne reported that in % of all MSFW attendees were female, and 70% were between aged between 18 and 34. Taking this into account, I developed two user personas. Jess, a well seasoned MSFW attendee, and Georgia, a first timer. These personas helped me envision some scenarios in which my proposed experience may be of use. The user takes images throughout their day at MSFW. They take selfies of people they meet and post it all to Instagram. In the app, they can see where they ve moved and see the images they posted. I envisioned Jess taking part in the first scenario. She loves posting everything about her day at MSFW to Instagram, and now she can see a fun summary of where she s been and what she did. The user is not sure where to head next at MSFW. They check the app, and can see that other users have moved towards a popular place. They now know a popular location to go to Mark Ollis - moll0275

3 Georgia, as a MSFW first-timer, would benefit greatly from the feature described in the second scenario. Using the app, she could see were other people have been going and decide where she should go next. Benefits Users See a fun summary of their day. See popular places that people visit to help plan their day. See images taken at places they haven t been. Follow new people and gain followers. MSFW & IBM Encouragement for people to visit more places at MSFW. Encouragement for people to post more to social media. Gain insight to where people visit most. Concept From all of this, Runways was born. With every Instagram post you make, Runways builds a summary of where you ve been during your day. Each post is plotted on a map, and Runways links them together with lines that pulse in the direction you moved. 21 The combined length of these lines is the amount of Runways you ve travelled during your day. A runway is a unique unit of measurement that is equal to the average length of a fashion runway at MSFW. I created this instead of using kilometres because the distance that Runways will report back is not a true indication of how far you ve travelled in your day. All measurements are as the crow flies, and you may have not taken a picture at some places you visit. So while the distance you traveled could be expressed in kilometres, it has more meaning within the context of the app when it s converted into runways. This gives the app a fun twist, and integrates it deeply into the MSFW experience. The amount Instagram posts you make, and how far apart you make them, will determine your number of runways. The app compares your amount of Runways to your friends, incentivising you to post more. You can even see the runways of people you don t follow on Instagram, increasing your overall exposure to what MSFW has to offer. Additionally, Runways is designed to require minimal interaction. Once installed and connected to your Instagram account, it builds a summary of the your day in the background. You can check in from time to time to see how you, your friends, and everyone else is going. To combat the risk of neglect, Runways will also have a physical presence at MSFW. Large posters will be on the Mark Ollis - moll0275

ground at popular photo spots, reminding user s to take photos to gain runways. The app will prompt users with notifications if they are near one of these spots.

4 ground at popular photo spots, reminding user s to take photos to gain runways. The app will prompt users with notifications if they are near one of these spots. Development The Runways Prototype was designed with ios in mind. ios has a highly established and worldrenowned design language that enhances the look and feel of Runways. The app is designed to feel at home on ios, taking design queues from Apple s Settings and Find My Friends applications. Keynote I started by creating wireframes in Keynote, as this would ensure I d have a more accurate representation of the size of elements on a small screen. I eventually created a click-through prototype within Keynote and tested it with potential users. Using the think-aloud method, I was able to hear what my testers were thinking as I asked them to try and perform tasks in Runways. Left: the first version of the Runways Home Screen. The Home Screen was well understood by most testers. They understood the different sections of the list, could find the Settings section, and could add a new friend to their favourites. Testers understood that the number in the circle was the amount of runways a person had gained, but this was still found to be confusing. A common design pattern for when a number is in a circle is for the circle to fill up as you reach a goal. Runways doesn t allow a user to set a goal, thus the confusion. Testers were also confused by the fact that your personal runway appeared twice in the same list. This was done with the intention of indicating your ranking, but it is understandably confusing. General feedback was that the screen lacked pizzazz Mark Ollis - moll0275

5 Other main screens of the app include (from left to right) the Runways View, Image View and Settings View. Across the board these screens were understood. Buttons and symbols looked tappable and the expected actions were performed. Testers understood the symbol in the upper right corner of the Runways view would allow them to overlay another runway on top of the current runway, but the idea of this feature was confusing. Sitemap Home Screen Settings View Runways View Add About Image View Overlay Mark Ollis - moll0275

Branding Runways is designed to feel refined and classy, but also playful.

Runways Walk this way. The same gradient background is used in all Runways materials, creating an element of consistency.

The curvaceous R becomes the star of the app icon. The typeface for the tagline, Walk this way, provides a modern grounding.

It also provides a link to the offical Runways song Walk This Way by Aerosmith and Run-DMC.

The final prototype of Runways was created as an HTML5 web app for ios.

This means it can run in full screen on an ios device, and provide a more realistic indication of what Runways might be like.

6 Branding Runways is designed to feel refined and classy, but also playful. It s design does lean towards a more female audience, as this is a key demographic for MSFW, but it should be appealing to both the sexes. Runways Walk this way. The same gradient background is used in all Runways materials, creating an element of consistency. It is a calm, foggy mix of colours, which has the added benefit of being stretchable to any size. The Runways typeface adds a playful, human element. The curvaceous R becomes the star of the app icon. The typeface for the tagline, Walk this way, provides a modern grounding. The tagline itself insinuates movement and direction, two big elements of the Runways app. It also provides a link to the offical Runways song Walk This Way by Aerosmith and Run-DMC. The song will be used in Runways advertisements, and was chosen for it s fun and catchy sound. Prototype Interface elements of Runways. The final prototype of Runways was created as an HTML5 web app for ios. It is in essence a website, but it has the ability to be saved to the home screen of an ios device like a real app. This means it can run in full screen on an ios device, and provide a more realistic indication of what Runways might be like. The Code As above, the Runways prototype was built in HTML5. It is combined with CSS and javascript in order to make the magic happen. Runways also incorporates jquery to assist with some animations and shorthand code. The maps are provided by the Google Maps API. Incorporating the data set provided by IBM was challenging. The data used in the Runways prototype is 2014 Instagram data. A large portion of the data from 2014 was converted into a JSON array, and thus made accessible to Runways. I did not attempt to incorporate all the data as Mark Ollis - moll0275

7 the conversion into JSON was not perfect and required manual tuning, but Runways still has access to over 1,500 entries. Runways feeds location data to the Google Maps API, which builds customised maps with interconnecting, animated polylines to create a visualisation of the user s Runways. The 2014 Instagram data did not provide the usernames of the people who created the posts in the data. It did however, provide their User ID number. Early versions of the Runways Prototype would integrate with the Instagram API and load the actual username and profile picture of the corresponding posts to be displayed on the Runways Home Screen. On June however, Instagram changed their API rules. Unregistered applications no longer had the ability to do what the Runways code was doing, so for the sake of the prototype I was forced to fake it. Runways still shows the real data provided by IBM from 2014, but the usernames and profile pictures paired with the data are fake. They are loaded from an array, and randomly selected. High Fidelity Left: Final version of the Runways Home Screen. Improvements: More pizzazz added by including a preview map view for your personal runways. Your personal Runway is differentiated more by having a larger section with more detail. A dashed line Runway was introduced to link the location of your last post, to your current location. It incentivises you to post again by calculating how many runways you could gain. Crucially, a runway is referred to as a distance on the Home Screen. This was to address a point raised by multiple test subjects. Testers assumed that the number of runways you have was equal to the amount of white lines on the map (ie. the map pictured left shows 2 runways, when in fact it shows 126). It became important to circumvent this and remind testers that it was the length of the white lines that was important Mark Ollis - moll0275

It even provides a camera button, which instantly launches the Instagram camera.

8 My Runway View If you tap on your current location in this view, Runways calculates how many potential runways you could gain if you were to post another image. It even provides a camera button, which instantly launches the Instagram camera. Bottom of Runways Home Screen Scrolling to the bottom of the Home Screen reveals a Load More button. Tap it to your heart s content to browse even more people s runways and images Mark Ollis - moll0275

Runways View Tapping on anyone s name will show their Runways. At the top centre of the screen under the username is the total distance of runways this user has travelled.

Image View Tapping again on the small preview opens the image in fullscreen. It even shows the caption for the image from Instagram.

9 Runways View Tapping on anyone s name will show their Runways. At the top centre of the screen under the username is the total distance of runways this user has travelled. The line between the two large purple dots animates on the direction the user moved. Tapping on a purple dot shows a preview of the image taken at that location. Image View Tapping again on the small preview opens the image in fullscreen. It even shows the caption for the image from Instagram. From here, a user can like, comment or share the image. If they tap the User button, they can open the corresponding user s Instagram account, or save the user to their Runways Favourites Mark Ollis - moll0275

The data is of course technically available directly from Instagram, so disabling public Runways is merely disabling the public runway formatting of your data.

10 Settings View The Settings View underwent multiple changes, with the constant goal of making it as simple as possible. Users can decide if they want to see all user s runways in their Home Screen or not. Users can also decide if other people can see their personal runways. The data is of course technically available directly from Instagram, so disabling public Runways is merely disabling the public runway formatting of your data. About Also included in the Settings View is About. While Runways is designed to be as simple to understand as possible, there is no escaping the fact that it is an entirely new concept for people to understand. Not to mention the fact that it invents it s own unique unit of measurement. This is why an explanation/ documentation of the app is included Mark Ollis - moll0275

11 Reflection I m overall happy with with Runways. It s a genuinely fun and interesting way to visualise the 2014 Instagram data provided to us by IBM. Browsing through the endless list of users, discovering new photos and captions, and being able to see where a user actually traveled while at MSFW is quite enjoyable. The prototype is by no means perfect or complete, many buttons are still merely present for show, and to keep the design balanced. The design of Runways also could have benefitted from semi-translucent frosted glass elements, which are a hallmark of ios. Ultimately they were omitted due to performance issues. In terms of real world use, Runways is supposed to show a summary of your day, day-by-day. There s no way in the prototype to see your runways from yesterday or the day before, and ultimately this ability would have to be introduced Mark Ollis - moll0275

AAG Mobile App User Manual

AAG Mobile App User Manual Tired of carrying a large printed program around the AAG Annual Meeting? Want to easily organize your AAG session schedule in a digital calendar format? Looking to save some