Page 1

process book

Wooplaa


table of contents 1. Project Overview

4

2. Requirements Analysis 6 target audience target platform comparative analysis competitive analysis competitive matrix user interview unique positioning statement 3. Information Architecture 34 user personas user goals wireframes main tasks sitemap 4. User Testing 70 5. Design 110 inspirations naming the app moodboard logo design mockup 6. Future Expansion 128 app web roadmap


01/ project overview 4


W

ooplaa is an iPhone app targeted to travelers who want to document their travel history using smart phone technology.

Social networking site, such as Facebook, allow users to share travel photos or videos with friends, but it is a Website for sharing general information with friends, and doesn’t encompass a person’s travel history into one spot. Foursquare is a location-based social networking site, allowing users to share current locations, find places and tips nearby, but again, it’s missing a travel log and history. Wooplaa will utilize mobile technology to allow users to document travel history, by taking advantage of the phone’s GPS, to keep track of places traveled, and use the phone’s camera to take photos, as a new way of conveniently documenting a user’s travel history and be able to share it.

Traveling is a very personal experience and people travel for different reasons, I would like to develop an iPhone app that would allow current travelers to share his or her travel experience and those who love to travel to see other people’s travel experience as a source of inspiration for others.

P ROJ EC T OVE RVI EW

5


02/ requirements analysis

6


Target Audience The target audience will be:

• iPhone owners • Current traveler - Who wants to store his or her experience - Who wants to share the travel experience with friends and other travel enthusiasts who uses this app • Travel enthusiasts - Enjoys looking at other people trips

iPhone user demographics This is the age group demographic or iPhone users.

Source: admob

R EQ U I R E M E NTS ANALYS I S

7


This is the gender demographics of iPhone users:

Source: admob

57% of iPhone users are male and 43% are female.

According to the demographic statistics, the iPhone appeals to a wide range of users of all age groups and genders. Therefore, this app will target adults who like to travel and document their travel history and be able to share it with friends.

So, for this app, the targeted audience will be any iPhone user who likes to travel and utilize smart phone technology for documenting one’s travels, both adult male and female, ranging from ages 18 and older.

8


Target Platform These are the minimal system requirements:

iPhone Specifications

Hardware: iPhone 4 or higher

Operating System: iOS 4.x or higher

Justification of Target Platform According to the Dayton Business Journal (Android tops Apple iPhone in market share), as of Sept 2011, over 40% of the mobile users own Android is the most popular operating system for smartphones and that 40% of smart phone users have Android, while Apple takes second place with 28% of the market share.

Source: Nielsen

In spite of the smaller percentage of market share, according to CNN Money (Why it’s harder to make money on Android than on Apple’s iOS), iPhone users still lead the pack in paying for apps, more so than Android users, with about three times as many paid iPhone apps than Android’s.

R EQ U I R E M E NTS ANALYS I S

9


Source: Distimo

Due to time and resource constraint, only one mobile platform can be this developed at this time. Blackberry, Android, and WebOS will be excluded.

10


R EQ U I R E M E NTS ANALYS I S

11


Mindmap Learn from each other Peace

World

Visual travel guide

Human Learn from each other

Activities

Culture

Experience Fun

Sharing a collective experience

Journey Browse Trips (Anybody) Activities Food Outdoor Activities

Nearby Location Specific Location Actvities Trip Album

Nightlife

Photos

Random

Location

Shopping

Title

Sightseeing

Description Story

Camera (phone)

Ratings

Pictures from Camera Pictures from Library Filters

Exploration New Places Caves Beaches Cities

Have Fun! Sightseeing Scuba Diving Snowboarding Fishing Bars

Do nothing Sleep Sunbath Watch TV/Movies Masage

New Food

Spa

Resturants

Cruise

Local Crusine

Adventures Safari

Culture

Exploring

Local History

Camping

Sights and Sounds

Biking

Food Language

Experience

Architecture

Cultures

Local People

12

Relaxation

Backpacking

New Foods

Visiting People

Sights and Sounds

Friends

See how other people lives

Family

Trending


Twittervision Photobucket Facebook

H&M App LinkedIn

All Recipes

Foursquare Gowalla

Foodspotting Instagram

EveryTrail

Flickr Gap App

Yelp

Trip It

Bacardi App TripDeck

Get Glue Yelp

Tours Local History Food Sightseeing Shopping

Visiting People Friends Family

Relaxtion Outdoors

Food

Camping

Local Foods

Biking

Bars

Hiking

Resturants

Ski/Snowboard Sk Diving Prasailing Scuba Diving

R EQ U I R E M E NTS ANALYS I S

13


Comparative Analysis These are just some of the apps that were examined as inspiration. These apps are currently the most popular apps representing the latest design trends that have a similar target audience profile as Wooplaa.

Instagram Instagram is a community-based phone-sharing app that will allow users to take photos from his or her phone, apply a special filter effect to it and share it instantly with a community of photo enthusiasts. For a ratings system, it allows for a simple ‘like’, the more likes a photo has, the chances of the picture showing up in its popular view, where the best photos get displayed.

Piictu Piictu is another community-based photo-sharing app, using the idea of a “social picture stream”. In this model, pictures are linked together using a common theme. For example, in a category called ‘Tree’ - users would upload pictures based on this common theme.

Pinterest Pinterest touts itself as a “virtual pinboard”, allowing users to pin items from the web to create a moodboard. Users can create his/her own board and put it in one of many pre-determined categories, ranging from art, designs, science & nature to women’s apparel. The web and accompanying app is for anyone looking to create its own pinboard and looking to search and be inspired by what others have pinned.

14


Path Path is a personal journal that record one’s life moments through a single feed. It’s interface is very simple, with a stylish menu button, with some preset menu items, for recording moments, such as waking up, the music one is listening to, location, pictures.

Foodspotting Foodspotting is a visual food guide that relies on location and guides. Using food pictures in its feed, it will show users food that are in nearby restuarants. Iin turn, it allow users to share his/her favorite food items at a resturant.

Tumblr Tumblr allow anyone to create blogs easily and allow users to follow other blogger. There are many categories of blogs, ranging diverse topics from art, photography, and personal blogs about life in general. Tumblr has both web and app presense, with the app allowing users to create and view blogs quickly on the phone.

R EQ U I R E M E NTS ANALYS I S

15


Explore tab

Piictu

Pinterest

Foodspotting

The explore tab in all these apps is a public feed for everyone to view. There’s no standard icon for this and no standard placement and it’s not always called ‘Explore’. Piictu calls it ‘Piics’. In these apps, the explore tab is generally placed to the left of the center tab. In Piitu, it displays a list of recent streams. In Pinterest, it list all the categories first. And in foodspotting, it’s filtered by categories and location.

16


Activity Tab

Instagram

Pinterest

Piictu

The activity tab is a notificaiton tab letting users know related activities to the account. Information such as new followers added are shown in all the examples here. Instagram offers additional information regarding their followers, such as showing new photos their followers like. There’s no standard icon. In the case for Instagram, there’s no label to associated with it. The activity tab in all these examples are placed at the 4th tab in the tab bar.

R EQ U I R E M E NTS ANALYS I S

17


No title in navigation bar to increase space

Tumblr

Instagram

Foodspotting

To increase space for feeds, some apps have put the segmented control in the navigation bar (as suggested by Apple’s Human Interface Guidelines). In Tumblr’s ‘Dashboard’ feed, the navigation bar is removed all together. The tab bar will orient users to its location within the app.

18


Tab bar menu vs. single feed menu system

Facebook

Path

Examples of a menu system reveal on left for a single feed system Path and Facebook have one central feed as its main interface to emphasize the importance of the feed as its main content. Both these apps have a menu icon on top left. When tapped, it reveals a menu to the left. Path was the first one to come up with this menu system, with Facebook following soon after.

R EQ U I R E M E NTS ANALYS I S

19


Pinterest

Foodspotting

Instagram

Foursquare

Examples of tab bar menu system Other apps, such Pinterest, foodspotting, instagram, and Foursquare uses the tab bar, in part, because it’s not focused on one central feed for its content. Pinterest have ‘Following’ and ‘Explore’ as two streams of feed to view from. Instagram has ‘Home’ and ‘Popular’ as its two feeds.

In the tab bar system, the center tab bar is generally the main actionable item for the app. For example, Foursquare has the “Check-in” as the main action item. Pinterest, Foodspotting, and Instagram have the camera in its center tab bar as its main action item.

For Wooplaa, a tab bar menu will be implemented because there are 2 main feeds. ‘Journals’ (containing ‘My Journals’ and ‘Friend’s Journals’) and ‘Explore’, a public journal entry feeds that can be used as inspirations for others.

20


Competitive Analysis Facebook Facebook is the major social networking application. Users can connect virtually with anyone through this website, from with friends, family, companies, communities, musicians, products, special interests, all through a single place. Users can update statuses, share photos, videos, notes, location, and links with anyone within the network.

Pros It has a large network, with more than 800 million active users. Most friends and family are on facebook. It can share location, statuses, photos, videos, and links with anyone. The app will allow anyone to share with friends and family on the go.

Cons Both website and app can be buggy at times. The design is not very exciting.

Statistics • Number one social networking in the world with more than 800 million active users • More than 75% of users are outside of the United States, with more than 70 languages available on the site • 48% of 18 to 34 year old check Facebook when they wake up • About 71.2% of the U.S. internet users is on Facebook • More than 30% of the users are 35 years and older

R EQ U I R E M E NTS ANALYS I S

21


Foursquare Foursquare is a location-based social networking site that works predominately on mobile devices. It allow users to check-into places and announce his or her presence at a particular location. These check-ins can be shared with friends on facebook or twitter. There are currently 10 million users.

Pros It has a large list of available check-in locations available. It will publish check-ins to facebook or twitter. There’s a game element, allowing users to earn badges and be mayors of a specific location. Users can leave tips at locations. The check-in list is handy reference to see interesting locations nearby. Cons There’s not much interactively amongst users. Facebook also allow check-in capabilities.

Statistics • Over 10 million users • 358 million check-ins were outside the U.S • About 50% usage in U.S., 50% international • Over 3 million check-ins a day

22


Yelp Yelp is a user review guide for almost any business or place. Users write reviews and rate these businesses and locations and is used a guide amongst other users to seek new restaurants to try or places to visit. Each listing will have basic information about the place, such as address, phone number, hours, and link to website, so users can use it as a directory of information as well.

Pros It has a large listing of businesses and places based on location. The app is a handy guide for users to view nearby places and be able to read reviews about the place. There’s a bookmark, allowing users to bookmark interesting places to visit or eat and check-in capabilities. Cons The design is outdated. There are complaints about the accuracy of the reviews. Statistics • Over 15 million reviews • Over 41 million monthly visitors • 46% of users are age ranged from 18-34 years old • The two most reviewed categories are restaurants (26%) and shopping (24%)

R EQ U I R E M E NTS ANALYS I S

23


EveryTrail EveryTrail is a community-based hiking guide that offer users hiking trip recommendations. The app allow users save and record routes on trips to record accurate trip routes by recording GPS locations automatically to reproduce the trail. Users can add notes and photos along the trip route and upload and save these trips to share and publish to personal blogs and website.

Pros Community-based travel guide with ratings. Offers very accurate recount of the trail user has taken on the trip. It allow pictures and notes to be uploaded at specific points on the route while it’s being recorded. Cons The design is very outdated. Recording the trail using GPS is a battery drain on the phone. Statistics • 27.9% of the site visitors are from U.S. • Over 1000 trips created per day • Most users are 25-54 year old

24


Instagram Instagram is a community-based phone-sharing app that will allow users to take photos from his or her phone, apply a special filter effect to it and share it instantly with a community of photo enthusiasts. For a ratings system, it allows for a simple ‘like’, the more likes a photo has, the chances of the picture showing up in its popular view, where the best photos get displayed.

Pros The filters on the camera make photos stylistic. There’s a large community of photo-enthusiasts. The instant ‘like’ button makes it easy to rate photos. The feed makes it easier to view photos. The popular feature encourages competition amongst the community. Cons Copyright of photos is an issue. The Twitter-like follower and followees is cumbersome for this model because users has to manually follow users to build a large follower-base in order to increase odds of getting more ‘likes’ on the photo so that it can become popular.

Statistics • Over 7 million users worldwide • 1.3 million photos are uploaded daily • 8/10 photos uploaded has a filter applied • 25% of users upload an average of 1-3 photos

R EQ U I R E M E NTS ANALYS I S

25


26


User Interview Emily Fede Age: 23 Status: Single Occupation: Interior Designer Location: San Francisco, CA Favorite Activities sleeping, eating, reading, cooking, working out, traveling

I. Computer/Internet Usage and Knowledge

1: What typically do you use the internet for? (Examples of internet usage: Do you email, social networking? Check the latest sports results? Online banking? Research products?) Email, social networking (Facebook), YouTube, Pandora

2. What do you typically use social networking or online communities for? (Examples of social networking/online communities include: Myspace, Facebook, Twitter, Flickr, YouTube, Personal Blog sites, Vimeo) Keeping in touch with people, networking, creating music libraries

3. How often are you on the internet? How many days a week are you using the internet? 5 hours a day .... 7 days a week

4. How often are you on social networking or online communities website? How many days a week are you using social networking or online communities websites? 2 hour a day ... 6 days a week

5. What do you use your iPhone for? Make phone calls, text message, Facebook, sometimes games, Maps, and Yelp for information.

R EQ U I R E M E NTS ANALYS I S

27


6. What are your favorite iPhone apps? Yelp. It’s convenient to look up bars, coffee shops, and restaurants nearby with the app. Second favorite would be Facebook. I like to take photos and share things I’m doing with friends on there instantly. And I like using Gowalla to check into places I’ve been and share my location with friends.

7. How often do you use your iPhone for social networking or Location-based social networking such as Facebook, Foursquare, and Gowalla? Almost everyday for Facebook and/or Gowalla; it lets me share my status, upload photos of places I’ve been and share my current location with my friends.

II. General Questions pertaining to this application

With mobile devices becoming so prevalent, it’s technology that is easy to carry everywhere. Wooplaa is an iPhone travel application that allow anyone to document one’s travel history by utilizing the phone’s GPS and camera capabilities to take photos, videos and blog and upload it to a Website, where it becomes a personal travel album after.

1. What aspect of your own travels do you want to remember? Places I stayed at, restaurants, special sights, people I meet

2. What do you want your friends and family to know or remember about your travels? Same as above

3. Why do you like to travel? Does it have a particular meaning for you? Experience different cultures. Visit family. Reconnecting with culture

4. What are your activities when you travel? Sightseeing, restaurants, relaxation, pool time, beach, spa, tours

5. When you travel, do you take photos and videos? If so, do you like to share this with friends and family after? How do you go about doing so? Yes, I like to compile them into videos and photo slide shows as well as photo albums

6. What are some of the challenges and problems you encounter when you try to organize your photos and videos after you come back from your vacation? It takes too much time to organize photos by place and location. I use Flickr to share some travel photos and videos; with geotagging, it makes things simpler. But it takes time to sort through my photos and add comments to places I’ve been and write about it at times.

28


Prooshat Saberi Age: 30 Status: Single Occupation: Manager, Design Center at Home Depot Location: San Francisco, CA

Favorite Activities I love any outdoor activity. Sunny days, skiing, snowboarding, swimming or just simply people watching. I love eating and most important traveling.

I. Computer/Internet Usage and Knowledge

1. What typically do you use the internet for? (Examples of internet usage: Do you email, social networking? Check the latest sports results? Online banking? Research products?) Email, social networking everyday few times a day. Always browsing through different sites and finding inspiration.

2. What do you typically use social networking or online communities for? (Examples of social networking/online communities include: Myspace, Facebook, Twitter, Flickr, YouTube, Personal Blog sites, Vimeo) I like it simply for staying connected. I like reading about interesting sites and information people post. Also have found some favorite photographers on Flickr which I check out their work frequently.

3. How often are you on the internet? How many days a week are you using the internet? Definitely 7 days a week. Almost 90 % of the time spent at home, school, etc.. basically whenever I can.

4. How often are you on social networking or online communities website? How many days a week are you using social networking or online communities websites? Ehhh...Unfortunately, quite often. I basically check in to facebook too many times. Other social networking not so much. (everyday, twice a day for about 1 hour total)

5. What do you use your iPhone for? I make lots of phone calls and do a lot of text messaging. I use it for Maps and Yelp mostly. I like the apps on shopping for clothes, such as Forever 21, H&M, Gap, Lucky Magazine. I don’t play too many games on there. I sometimes use

R EQ U I R E M E NTS ANALYS I S

29


it for Facebook, but I’m not the type who likes to take photos of food I eat and share it with everyone. I prefer to use Facebook at a computer and respond to status updates and photos I see, instead of sharing my status with everyone.

6. What are your favorite iPhone apps? I use Yelp, Maps, and clothing style apps. I really like using Yelp to find nearby businesses.

7. How often do you use your iPhone for social networking or Location-based social networking such as Facebook, Foursquare, and Gowalla? I use Facebook occasionally on the iPhone. I tried using Gowalla and Foursquare, but don’t like to use it.

II. General Questions pertaining to this application

With mobile devices becoming so prevalent, it’s technology that is easy to carry everywhere. Wooplaa is an iPhone travel application that allow anyone to document one’s travel history by utilizing the phone’s GPS and camera capabilities to take photos, videos and blog and upload it to a Website, where it becomes a personal travel album after.

1. What aspect of your own travels do you want to remember? Best moments always. Most exciting. Sometimes you just want to stop and hack something in your mind forever !

2. What do you want your friends and family to know or remember about your travels? Sharing with them how much I enjoyed something. Sometimes, putting it in words is not nearly enough. Like, You should’ve just been there!

3. Why do you like to travel? Does it have a particular meaning for you? I think traveling makes you more humble & completes you by learning about different cultures and trying to understand completely opposite viewpoints, and lifestyles.

4. What are your activities when you travel? Definitely exploring the best food. Then history and culture. Most jaw dropping places. Learning I would say.

5. When you travel, do you take photos and videos? If so, do you like to share this with friends and family after? How do you go about doing so? I always take photos. I almost never share because I don’t like sharing on facebook and everything else takes so long to download or you have to pay for putting up good quality photos. I don’t like to upload tiny, invisible photos anywhere.

6. What are some of the challenges and problems you encounter when you try to organize your photos and videos after you come back from your vacation? I’m usually tired after I get back from my vacation. Sometimes, I need a vacation from a vacation after I get back and don’t want to organize a photos and videos.

30


Rodney Smith Age: 38 Status: Married, with 1 child Occupation: Independent Film Maker Location: Toronto, ON, Canada Favorite Activities Watching TV, movies, listening to music, making movies, playing video games, traveling

I. Computer/Internet Usage and Knowledge

1. What typically do you use the internet for? (Examples of internet usage: Do you email, social networking? Check the latest sports results? Online banking? Research products?) I use the internet to search for information on anything, shopping on Amazon, Facebook, check my email, read the news, manage my Website and business.

2. What do you typically use social networking or online communities for? (Examples of social networking/online communities include: Myspace, Facebook, Twitter, Flickr, YouTube, Personal Blog sites, Vimeo) I like to use Facebook to keep in touch with my friends, connect with new people for filming purposes, and create fanpages for films/music videos I made. I use Vimeo to upload videos I shoot for film, music videos and commercials.

3. How often are you on the internet? How many days a week are you using the internet? I’m on the internet a lot – 8 or more hours a day, 7 days a week.

4. How often are you on social networking or online communities website? How many days a week are you using social networking or online communities websites? I check into Facebook 7 days a week.

5. What do you use your iPhone for? Phone calls, text message, facebook, maps. Mostly for keeping in touch with people, looking for locations, and keeping track of my schedule.

R EQ U I R E M E NTS ANALYS I S

31


6. What are your favorite iPhone apps? Maps and calendar. I use it to keep track of my shooting schedule and find location. I don’t too many games on my iPhone; I prefer to play games on my Xbox.

7. How often do you use your iPhone for social networking or Location-based social networking such as Facebook, Foursquare, and Gowalla? I use Facebook on iPhone several times a week, not always. I almost use Foursquare everyday to let everyone know my current location.

II. General Questions pertaining to this application

With mobile devices becoming so prevalent, it’s technology that is easy to carry everywhere. Wooplaa is an iPhone travel application that allow anyone to document one’s travel history by utilizing the phone’s GPS and camera capabilities to take photos, videos and blog and upload it to a Website, where it becomes a personal travel album after.

1. What aspect of your own travels do you want to remember? I want to remember what I’ve done and my favorite moments during the vacations! I want to remember how I spent my time with my wife and kid.

2. What do you want your friends and family to know or remember about your travels? How much fun it was during my vacation. I want to show them pictures and video of what I’ve done and what happened.

3. Why do you like to travel? Does it have a particular meaning for you? It’s a great way to relax and see how other people live. I enjoy hanging out at local bars, eating and just absorbing the energy of the place. When I travel, I like to share this experience with my wife and kid.

4. What are your activities when you travel? I sometimes like to learn the history of the place I travel to. I go there for inspirations for films I want to make. I mostly eat and relax when I’m traveling.

5. When you travel, do you take photos and videos? If so, do you like to share this with friends and family after? How do you go about doing so? Yes, I like to take photos and videos when I travel and share that with friends and family after. After, I get back from my vacation, I sort through the photos, keep the ones I want and delete what I don’t want. I then upload some of those photos and videos to Facebook.

32


Unique Positioning Statement

W

ooplaa seeks to differentiate itself from its main competitors, Facebook, by offering an application that enables travel enthusiasts to share his or her travel experience through a

fun user interface and by offering real-time location-based traveling information for the traveler.

R EQ U I R E M E NTS ANALYS I S

33


03/ information architecture

34


User Personas Chelsea McNeel The Relaxed Vacationer Age: 30 Location: Richmond, VA Profession: Bank Teller

Internet Usage Random Google searches, images, email, games, Facebook

iPhone Model iPhone 4s, with iOS 5.x

iPhone App Usage Games, Facebook, Gowalla, Yelp, Google, email

Activities when Traveling Relaxing on the beach, eating, sleeping, sightseeing, catch a show When she travels, she likes to discover what’s out there and enjoy going back and revisiting some her favorite places, like Yosemite. There’s lots of travel stories she likes to tell after she gets back from her trip. Her fondest travel moment was when she was on Valentina, a beach in Italy, when it poured buckets of water on the sunbather.

If this application were made available to you today, what do you want out of it? • Wants to show friends and family her travel photos • Wants to tell her funny travel stories • Wants to remember the people and events of her travels

Why do you like to travel? Does it have a particular meaning for you? I like to discover what’s out there and just enjoy being in places I like to go to, like Yosemite.

i n fo r m ati o n a rch itectu r e

35


Jessica Phan Cultured Sightseeing Traveler Age: 23 Location: Seattle, Washington Profession: Interactions Designer

Internet Usage Uses Facebook for connecting with people. YouTube and Vimeo for entertainment purposes

iPhone Model iPhone 4, with iOS 5.x

iPhone App Usage Facebook, Gowalla, Games, Yelp, Email, Maps, Photo apps, Video

Activities when Traveling Exploring new foods, sightseeing, hanging out in bars

To Jessica, traveling is about sightseeing, relaxation, learning from about the world around us. Her favorite trip was a recent trip to France, where she visited her relatives and hung out with the locals. She enjoys being absorbed in another culture.

If this application were made available to you today, what do you want out of it? • An easy way to organize travel photos and videos without a lot of work. • Wants the application to connect with Facebook. • To remember the little details from her trip, her favorite moment to the food she had.

Why do you like to travel? Does it have a particular meaning for you? Traveling is about exploration, sightseeing, and experiencing people, cultures, locations, and food from another perspective.

36


Duran Rose Adventure Seeking Traveler

Age: 29 Location: Richmond, VA Profession: Flash Developer

Internet Usage Email, social networking, research, inspiration, learning new skills, pay bills

iPhone Model iPhone 4, with iOS 5.x

iPhone App Usage Facebook, Foursquare, Yelp, Email, Photo apps, news (NY Times or SFGate)

Activities when Traveling Sightseeing, trying new foods, outdoors activities, going to where the locals hangout

Duran definitely enjoys traveling and wants to learn about different cultures and how other people live their lives. His fondest travel memory was when he learned Dutch while visiting his friend in Holland and going to London and Paris with his mom.

If this application were made available to you today, what do you want out of it? • Remember places and experiences • To share his travel photos and videos with his friends and family • To remember the experiences he had with the people he met and the things he’s learned

Why do you like to travel? Does it have a particular meaning for you? I enjoy learning about different parts of the world and how different people live.

i n fo r m ati o n a rch itectu r e

37


User Goals Based on interviews and personas, for iPhone users who want to document their travels, this application will allow them to utilize the phone as a travel companion to record travel history, upload to a personal Website as a virtual travel album, and share it with friends.

By using the iPhone app, users will be able to:

• Utilize location-based capabilities to check into places on the phone • Use the phone’s built-in camera to take photos and videos to document travel history • Allow users to share travel experience with others on the Web as a collective human experience. • Integrate with Facebook, allowing users to log in with Facebook account and share with friends on news feeds • On the Website, users will be able to use it as a travel album, being able to keep a user’s travel history at one place with photos and videos of the trip, a record of places traveled, and be able to share with others.

38


Wireframes Initial Sketches These are initial wireframe sketches drawn up to beter understand the basic flows. The initial app had three main functionalities.

These are:

• Trip Journal (stores all journal entries) • Add New Journal Entry (allows user to take photos and input descriptions into the journal) • Settings (Basic user profile and misc app settings)

Because of the limited functionality of the app, there are two potential directions for the user interface. One direction was not use to use any tab bar in the app and use Journals as the central navigation point around the whole app. The second direction was to use the tab bar.

i n fo r m ati o n a rch itectu r e

39


Initial Sketches: Explored the idea of working with no tab bar in the interface.

40


Wireframes: Initial Draft Continued exploration of the initial wireframes from the initial sketches. Version 1 uses no tab bar. Version 2 uses a tab bar.

Version 1: No Tabe Bar. This shows the basic flow for how the app with no tab bars will work.

i n fo r m ati o n a rch itectu r e

41


Version 2, with Tab Bar. This shows the basic flow for how the app with tab bars will work.

42


Wireframes: Continued Exploration

Additional functionality was later added on to the initial wireframes. To accommodate the additional functionality, a tab bar must be used as main navigation. The final functionality of the app are:

• Activities (Shows feeds from other users) • To Do (A list of things to do, added from activities feed) • New Journal Entry (Which allows users quick access to the camera) • Journals (A list of user’s and friend’s journals, which includes all information from the trip) • Settings (Basic user profile and misc app settings)

Each of these functionality is The following pages show final wireframes based basd using the tab bar with the new functionalities.

i n fo r m ati o n a rch itectu r e

43


Final Wireframes

‘Actvities’ Tab Activities tab show real-time stream of journal entries

44


Final Wireframes

‘Actvities’ Tab Activities tab show real-time stream of journal entries

i n fo r m ati o n a rch itectu r e

45


Final Wireframes

‘Actvities’ Tab Activities tab show real-time stream of journal entries

46


Final Wireframes

‘To Do ‘Tab The ‘To Do’ tab shows a list of activities that the user wants to do from looking through the activities feed.

i n fo r m ati o n a rch itectu r e

47


Final Wireframes

‘New Journal Entry’ Tab (Center Button) Allow users to add new journal entries to his or her journal. From here, users can take photos, add messages, share on facebook or twitter and tag an activity with it.

48


Final Wireframes

‘New Journal Entry’ Tab (Center Button)

i n fo r m ati o n a rch itectu r e

49


Final Wireframes

‘Journal’ Tab The Journal tab stores the user’s and friend of user’s journals

50


Final Wireframes

‘Journal’ Tab

i n fo r m ati o n a rch itectu r e

51


Final Wireframes

‘Journal’ Tab

52


Final Wireframes

Settings Tab This tab set basic information such as profile information, sharing options, adding friends

i n fo r m ati o n a rch itectu r e

53


Main Tasks Main Tasks for Final Mockup

Task #1 Using group journal Scenario Stephanie is on a trip with her friend Rose in San Francisco. Rose also uses this app and wants to be able to add her journal entries, along with Stephanie’s, in the same journal.

Task Flow

2

3 1

54


1

4

Taps on Journals in the tab bar

Since Rose uses Wooplaa, it will come up in the list of suggested friends. Tap on the button to add friend to the journal.

2

User selects ‘San Francisco’ journal 5

3

Rose is now added in the friend list. She will now be able to add journal entries along with Stephanie to the same journal.

Tap on ‘Friends’ icon

5

4

i n fo r m ati o n a rch itectu r e

55


Task #2 Adding a new journal entry

Scenario Stephanie and her friend Rose are at pier 39 right now. They want to take a picture of the sea lions and save it to her ‘San Francisco’ journal.

Task Flow

1

2

56


1

User selects ‘San Francisco’ journal from the ‘Journals’ Tab

4

Save it to the journal.

2

Tap on the Compose icon to create a

5

After it has been been saved to the journal, it

new Journal entry. 3

will take the user back to the ‘San Francisco’

From here the user can enter a number of items

journal with a confirmation alert box.

pertinent to a journal, such as:

• Title

• Note

• Sharing it on facebook or twitter

• Privacy Level

• Setting an activity tag

• Taking a picture

4

3 5

i n fo r m ati o n a rch itectu r e

57


Task #3 View Journals a. My Journals b. Friend’s Journal Scenario Stephanie and Rose have a friend, Bert, who lives in San Francisco. While over at a coffee shop, Bert asked them what they’ve been doing in San Francisco.

a. Stephanie shows Bert her San Francisco journal. b. During their conversation, Bert mentioned to them that he was over at Grand Canyon and showed them his journal.

a. Task Flow (Viewing My Journals) Stephanie shows Bert her San Francisco journal.

2 1

58

3


1

User selects ‘San Francisco’ journal from

3

Tap on Map icon to see a map view of the journal

4

Displays map view of all the journal entries

the ‘Journals’ tab bar

2

Displays the journal in a List view, by reverse chronological order

4

i n fo r m ati o n a rch itectu r e

59


b. Task Flow (Viewing Friend’s Journals) During their conversation, Bert mentioned to them that he was over at Grand Canyon and showed them his journal.

1

2

60


1

User selects ‘Friends’ from ‘Journals’ tab bar

3

Select ‘Grand Canyon’ from Bert’s journal list

2

Tap on Bert to view his journals

4

User views Bert’s ‘Grand Canyon’ journal

4

3

i n fo r m ati o n a rch itectu r e

61


Task #4 Search public feeds for trip inspirations

Scenario Stephanie and Rose are looking for a bar to visit nearby their location.

Task Flow

4 2

3

1

62


1

Select ‘Explore’ from thev tab bar

4

Hit Done to return results

2

Select ‘Tag’ button

5

A list of filtered results is returned to user on the ‘Explore’ view

3

User select ‘Nightlife’ fromt he Tags view.

5

i n fo r m ati o n a rch itectu r e

63


Task #5 Adding a journal entry feed to the ‘To Do’ list Scenario Stepanie will add the bar to her ‘To Do’ list for reference

Task Flow

1

Explore: Public journal entries are used as inspirations and references for trips.

64

2

Explore: Public journal entries with the checkbox checked


1

Tap on checkbox on upper right of feed

2

It will add the feed to the user’s ‘To Do’ list

3

Tapping on the ‘To Do’ button on the tab bar will show all the checked items

4

Tap on the to do feed to bring up a detailed view

4

3

To Do: All checked items will be placed under the ‘To Do’ tab

To Do Details: Detailed view of the to do feed that was added

i n fo r m ati o n a rch itectu r e

65


Task #6 View Activity notification updates Scenario Stepanie wants to view notification of new activities.

Task Flow

2

1

66

3


1

Tap on ‘Activity’ button on the tab bar

4

Add a comment in the box

2

User selects an activity notification to view. In this case,

5

Tap on Done to close comments view

6

Tap button to go back to the activity view

Stephanie wants to view a recent comment posted to her San Franciso journal 3

The journal entry is displayed.

5

7

4

i n fo r m ati o n a rch itectu r e

67


Sitemap Tab Bar

Explore

To Do

(OPTIONAL FILTERS) SORT BY

Recent

Popular

Tags

Location

To Do Items

Search

Jo

(OPTIONAL)

Journal Feeds

S (Jo

Journal Feeds Map of Location Map of Location

Large Picture

Large Picture

Comments

Comments New Journal Entry

Group Journal

Title

Add Friends

Message Sharing Date Picture or Video Tags

LEGEND

Privacy

Filter (Optional) Selection Options Multiple Items

68

Map Locat


Journals

My ournals

of tion

Friend’s New Journal Entry

Friends

Friend Added

Profile Settings

Friend’s Journals

Social Media Settings

- Facebook - Twitter

Activity Detail

Search (Friends)

Journal Settings

New Comments

- User Name - Email - Password

(OPTIONAL)

Search ournal)

Settings

Activity

Add Friend

Filter by Tags (Optional)

Journal JournalFeeds Feeds (List (ListView) View)

Large Picture

Journal Feeds (Map View)

(POTENTIAL VIEWS)

Comments

i n fo r m ati o n a rch itectu r e

69


04/ user testing 70


Test 1 These are the tasks along with its respective screenshots for this user test. The Scenario This is the scenario for the following set of tasks you will be asked to perform. Pretend you and your sister are currently on a trip to San Francisco and the both of you are currently at Pier 39. Task #1 [Goal: Test if the user knows how to take use Journal Entry to take a picture and save it to the journal.] You have just seen sea lions at Pier 39 and you would like to take a picture and add any other pertinent information and save it to your journal.

This access the Journal Entry Screen

u s e r te sti n g

71


Once finished filling out this screen, tapping select jornal will allow user to choose journal to save to.

Users can fill in information for the journal entry here, such as title, message, privacy settings, location, sharing options, and tags. The camera is assessible from here.

72

This is a list of journals to choose from.


Task #2 [Goal: Determine if user knows how to find popular activities nearby] While still at Pier 39, you would like to see popular activities nearby.

Tapping on the Popular buton will bring up popular feeds nearby.

u s e r te sti n g

73


Task #3 [Goal: Determine if user knows how to add an item to a ‘To Do’ list] While looking through the popular activities nearby, you saw a feed of In and Out Burgers. It looks like a really good place to eat. You want to add the feed to your to do list.

The check-mark will add the feed to the ‘To Do list.

This is the ‘To Do’ list.

74


Task #4 [Goal: See if user knows how to find the location of the place the user is interested in going to.] You want the directions to In and Out.

Tapping on the link will bring up a map of the location.

u s e r te sti n g

75


Clicking of this will take user out of the app and into Google Map, where user can get further directions to the location, if necessary.

Going to Google Map will take user out of the app completelly, but allow users to get specific directions to the location.

76


Task #5 [Goal: Test if user knows how to comment on a journal feed] Right now, you have finished your burger at In and Out. You would like to add a comment to the In and Out feed, saying how great the burgers are.

This will access the comments for this feed.

Comment screenshot, allowing users to view and add new comments.

u s e r te sti n g

77


Task #6 [Goal: Determine if user knows how to check off item from the to do list] Now that your’re finished at In and Out, you would like to delete the In and Out feed from your to do list.

Swiping on the feed will reveal a delete button to remove it from the ‘To Do’ list.

78


Results

Based on the results of the user testing and the comments made by users, these are the top recommendations for immediate attention, classified by priority level.

Priority: High

• User found it difficult to delete an item from the ‘To Do’ list. Users found it difficult to delete an item from the ‘To Do’ list. Two of out three users failed to get this task. The third user figured it out, but took longer than necessary to do so. One fix is to add an ‘Edit’ button on top of the list to make it obvious that it’s deletable. The other is to put an ‘x’ on top of the feed.

• The ‘To Do’ checkbox needs a confirmation, reaffirming the user that he or she has clicked on the ‘To Do’ button. To Do checkbox needs a confirmation. When the checkbox is checked, it needs a confirmation that the feed is added to the user’s ‘To Do’ list. • Rework the screenflow for selecting a journal when adding a new journal entry Currently, journal entry has 2 screen flows. The first screen allow user to add pertinent journal entry to an existing journal. There’s a button on the upper right which then allow users to select the appropriate journal before User was looking for a submit button. Screenflows should be explored for simplification.

Priority: Medium

• On the Activities screen, for the Recent and Popular options in the segmented control, user cannot tell the location from which those feeds are coming from For the activities screen, it is not clear where those feeds are coming from the recent, popular feeds. A possible solution is to add a location label to tell users they’re looking at nearby feeds.

• To Do checkbox is small. A couple of users suggested that the checkbox wasn’t as legible and would like to see it bigger. The ‘To Do’ checkbox needs to be slightly enlarged and make it a bit more prominant at the top right corner.

• Scripted font as a label for the navigation bar is not clear to some users. I got two opposing comments. One user said it’s nice and different with the scripted font as label and would like me to continue using it. The other said it was unclear and was bothered by it. I will explore the use of another font for the navigation bar or try increasing the size of the navigation bar. The scritpted font for segmented control buttons will be changed.

• When the location of the place is clicked on, it doesn’t take an user to Google map directly, but rather, take the user to an intermedidate map that is contained within the app.

u s e r te sti n g

79


The extra map is perhaps unnessary and the extra screen could be eliminated. The reason why it was included in the original design is that the map contained within the app will allow the user to have a peek look at the location of the place, without needing to leave the app. And if the user wants direction, then clicking on the Google map at the top right will allow them to get directions if necessary. The con with going directly to the map is that it will allow take the user of the app completely and he/she would need to find a way to re-enter the app.

• Need confirmation when journal entry is saved to the the journal There’s no feedback to the user letting he/she know that a journal entry has been saved. A simple alert box will let user know the action is properly executed.

Priority: Low

Summary of Statistics

The primary statistics for the user testing on the iPhone are below.

Average global site rating (1=good, 7=bad):

1.8

Based on these results, It seems like the usability of the iPhone design for this test is rated above average on the scale for this user test. One particpant did not finish task 6, but the other two participants did finish the task, taking awihle to do so.

Global Ratings

At the end of each user test session, participants filled out a “Global Evaluation” survey, in which they rated the site on a scale from 1 to 7 (1 = good, 7 = bad) on 15 different scales. We grouped the responses into 5 main categories: Overall, Navigation, Layout, Content, and Other. These are the elements of each category.

Overall: easy to use, efficient, and clear Navigation: intuitive, straightforward, clear labels Layout: pleasing presentation, easy to read, good use of space Content: informative, want to read, would find what I need

Results from the Survey

80

Average global site rating (1=good, 7=bad):

1.8

Rated (relatively) good:

Overall, Ease of Use is the strongest

Rated (relatively) poor:

Navigation, with the labeling is the weakest.


Global Evaluation Scores Overall Easy to use 1 = easy to use, 7 = difficult to use

1.3

Efficient 1=efficient, 7=tedious

2

Clear 1=clear, 7=confusing

2

Navigation Intuitive 1=intuitive, 7=obtuse

2

Straightforward 1=straightforward, 7=roundabout

1.7

Clear labels 1=clear labels, 7=confusing labels

2.3

Layout Pleasing presentation 1=pleasing presentation, 7=unattractive presentation

1.7

Easy to read 1=easy to read, 7=difficult to read

2

Good use of space 1=good use of space, 7=poor use of space

1.7

Content Informative 1=informative, 7=useless

1.3

Want to read

1.7

Would find what I need

1.7

Average Score

1.8

From the test results documented in the chart above, we see that the overall score is 1.8 (1=good, 7=bad), which is above average for this test. The lowest scoring is the labeling, with one user liking the font choice for the navigation bar and another user not as much.

u s e r te sti n g

81


Demographics

Demographics

82

Age

26-28

Gender

Both Male & Female

Use of iphone (frequency)

5+ hours per day

# of times travel per year

1-2 times per year


Proposed Fixes to Screen Flows

FROM TASK #6 Problem Users couldn’t figure out how to delete an item from the ‘To Do’ list Solution Add a standard iPhone Edit button on top right to reveal delete button

This is considered the worst problem from the test. 1 User couldn’t complete the task. The other 2 completed it, but still took longer than expect. 1 User who figured it out took 5 minutes, the other still took under 10 secs (which still took this user awhile to figure it out).

FROM TASK #1 Problem User is expecting a submit button at the top instead selecting a journal next. Solution Add a submit button on the top right. Add a Select Album field within Journal Entry, which goes to another screen to allow users to select the journal. There’s a section for ‘Title’. I think instead of title, it’ll be replaced with a ‘Select Album’ . I don’t feel adding a ‘Title’ to the journal entry adds anything to this app and goes against the current trend to keep it simple and there‘s already a message area, which allow users to say what is needed to be said over there.

The downside to this solution is there’s a lot going on with this screen. One tester didn‘t like going back and forth between the screens to poplar this page. But when I asked other users it it bothered them, no body complained and didn’t mind the going back and forth between the screens.

u s e r te sti n g

83


FROM TASK #2 Problem Users cannnot tell where the feeds are coming from Nearby or Specific Location

Solution Indicate location with a bar at the top, indicating whether it’s nearby or at a specific location

FROM TASK #1 Problem Users cannnot tell if the locations are nearby Solution Indicate nearby with a bar at the top of the list

This screen is from Journal Entry, when users click on ‘Location’ to add a location to the journal entry.

84


Test 2 These are the tasks along with its respective screenshots for this user test. The Scenario: This is the scenario for the following set of tasks you will be asked to perform. Pretend you and your sister are currently on a trip to San Francisco. Task #1 [Goal: Test create new journal] You’re in San Francisco right now on your vacation. You want to create a new journal called ‘San Francisco’.

Tapping on this button will create a new journal

u s e r te sti n g

85


Task #2 [Goal: Test create new journal entry for journal] You have a friend, Bert, in San Francisco. The 3 of you are having a great time over dinner. You want to add to your journal how much fun you’re having with your friend Bert over dinner in San Francisco.

Tap on ‘Select Journal’ to continue to the next screen.

Enter pertinent journal information on this screen.

86

Select journal to save journal entry to.


Task #3 [Goal: View journal] While still at dinner, Bert asked you what you have done in San Francisco so far. Show Bert your journal.

Tap on this to bring up the San Francisco journal

Journal view

u s e r te sti n g

87


Task #4 [Goal: View map of journal] You want to show Bert a map view of places you’ve been.

Tapping on the link will bring up a map view of the journal.

This is a map view of the journal.

88


Task #5 [Goal: Test if user knows how to view friend’s journal] While still at dinner, Bert said he went to Grand Canyon back in April 2011 and you would like to view pictures from his trip.

This will access friend’s journals

Tap on friend’s name to view journals

This is a list of the friend’s journal

u s e r te sti n g

89


Task #6 [Goal: Determine the path a user would take to find information] Now that you are finished with dinner, the 3 of you are looking for a bar.

Note to Facilitator There is more than 1 way to complete this task. Please take note of the path in which the tester solves this task.

Method 2 Search ‘Popular’ activities. There’s a bar listed under Popular, if user finds this bar under here, the task is completed.

Method 3 Search ‘Trending Nearby’ activities. There’s Method 1 Search ‘Recent’ activities. There’s no bar listed under Recent, but take note if user does go this path.

90

are multiple activites listed. Bars are listed the ‘Nightlife’ Tag. See next screenshot for more details.


Method 3 (Continued) If user chooses method 3, these ar ethe potential screenshots the users will see.

Tappping on this will flip to the backside, which will show feeds based on categoires.

This will close the trending nearby view and take users back to main view.

This shows activities that are trending nearby.

Tapping on the ‘Nightlife’ button will show bar listed. At this point, the task can be considered complete.

This is the flip view of trending activites nearby.

u s e r te sti n g

91


Results For this test, all users had problems with task 1 and 2. Users were confused about how to create new empty journal and adding new journal entries to an existing journal. This is the major finding for this test. There weren’t as many problems as there were in test #1.

Priority: High

• User doesn’t know how to create new empty journal from the ‘Journal’ view All users clicked on the ‘+’ button on the tab bar to try and create a new empty journal. Most testers thought the ‘+’ sign was very prominent and felt compelled to tap on there first.

• When creating a new journal entry, users tap on ‘Journal’ view instead of tapping on the ‘+’ button from the tab bar Instead of tapping the ‘+’ tab bar button to create a new journal entry, users tap on the exsiting journal, in an attempt to add additional

journal entries to it. One solution is to move the ‘Journal’ tab bar button to the center and allow users to create new journal entries after selecting a journal. And if there’s no existing journal, a new one can be created from this.

• Seach feature should include a way to search for everything When asked to look for a bar for task #6, all users wanted to search first. Currently, the search functionality is only good for location and tag based serach. There should be a way for users to search for anything.

Priority: Medium

• The script fonts for the navigation bar was confusing to some, but not to others In this second set of test, again, like the first test, there were mixed reviews about scripted labels as confusing or not. Some testers were confused by it, but some were not.

Priority: Low

• ‘Trending Nearby’ word is ambigious One user thought the term ‘Trending Nearby’ is unclear. The other two users thought it was ok.

92


Summary of Statistics The primary statistics for the user testing on the iPhone are below.

Average global site rating (1=good, 7=bad):

2.6

Based on these results, It seems like the usability of the iPhone design for this test is rated above average on the scale for this user test. All users had issues with the task 1 and some had issues with task 2.

Global Ratings At the end of each user test session, participants filled out a “Global Evaluation� survey, in which they rated the site on a scale from 1 to 7 (1 = good, 7 = bad) on 15 different scales. We grouped the responses into 5 main categories: Overall, Navigation, Layout, Content, and Other. These are the elements of each category.

Overall: easy to use, efficient, and clear Navigation: intuitive, straightforward, clear labels Layout: pleasing presentation, easy to read, good use of space Content: informative, want to read, would find what I need

Results from the Survey

Average global site rating (1=good, 7=bad):

2.6

Rated (relatively) good:

Layout and Content

Rated (relatively) poor:

Navigation, with the labeling is the weakest.

u s e r te sti n g

93


Global Evaluation Scores Overall Easy to use 1 = easy to use, 7 = difficult to use

3

Efficient 1=efficient, 7=tedious

3

Clear 1=clear, 7=confusing

3.3

Navigation Intuitive 1=intuitive, 7=obtuse

2.7

Straightforward 1=straightforward, 7=roundabout

3.3

Clear labels 1=clear labels, 7=confusing labels

4.7

Layout Pleasing presentation 1=pleasing presentation, 7=unattractive presentation

2.7

Easy to read 1=easy to read, 7=difficult to read

1.7

Good use of space 1=good use of space, 7=poor use of space

1.7

Content Informative 1=informative, 7=useless

1.7

Want to read

2

Would find what I need

1.7

Average Score

2.6

From the test results documented in the chart above, we see that the overall score is 2.6 (1=good, 7=bad), which is above average for this test. The lowest scoring is unclear labeling, with users confused between the function between the ‘+’ and ‘Journal’ tab bar buttons as the primary reason for the unclear label.

94


Demographics This is a summary of the demographics of user for this test. All participants use his/her iPhone at least once a day, and travel at least 1-2 times a year.

Demographics Age

24-30

Gender

Both Male & Female

Use of iphone (frequency)

Once a day

# of times travel per year

2-7 times per year and every 2 years

u s e r te sti n g

95


Proposed Fixes to Screen Flows

2

FROM TASK #1 and #2 1. Problem Users couldn’t figure out add new empty journal. All users tested wanted to create a new journal entry from within the journal

Solution Move the ‘Journal’ tab to the center and allow users to enter new journal entry from the journal 2. From this screenv, users can tap on the ‘+’ at the top to create new empty journal, if one doesn’t exist. To enter a new journal entry, users select the journal, with existing journal feeds and add from there.

1

Screen 1

3. When a user select a journal, a new journal entry can be created from within the journal.

3

96

Screen 2


4

4. The ‘Select Journal’ button has been replaced with a ‘Save’ button when creating a new journal entry. The user no longer has to select journal after entering new journal entry. Screen 3

u s e r te sti n g

97


Test 3 These are the tasks along with its respective screenshots for this user test.

The Scenario This is the scenario for the following set of tasks you will be asked to perform. Pretend you are currently on a trip to San Francisco with your sister. Task #1 [Goal: Test create new journal] You want to create a new journal called ‘San Francisco’ for your trip.

Tapping on this button will create a new journal

98


Task #2 [Goal: Test create new journal entry for journal] You’re at Coit Towers right now and want to take a picture of it, add any other pertinent information it and save it to your journal.

Select San Francisco Journal

Create New Journal

u s e r te sti n g

99


Take picture and add information and Save

100


Task #3 [Goal: View journal] You want to look view a mapview of your ‘San Francisco’ journal.

Click on this to bring up the map view.

Journal Map View

u s e r te sti n g

101


Task #4 [Goal: Test if user knows how how to view recent feeds and if user wants how to backtrack to the Explore screen from here]

You’re still at Coit Towers and you’re getting hungry. You want want to view what other users of this app have posted about food.

Click here to change the tag to search for ‘Food’

102


Task #5 [Goal: Determine if user can find other popular feeds] You want to see to the ‘Popular’ listing of the food feed you just saw.

Tap on Sort

Brings up Segment Bar, to change how to sort the feeds This is the correct answer.

u s e r te sti n g

103


Task #6 [Goal: Determine the path user takes to find any information]

After looking thorugh these food feeds, you decided you want really want to have pizza for lunch. You want to look for pizza realated feeds.

Tap on Search

104


Results For this test, users had some issues with the explore screen. It is the potential result of wording the task too vague, as users were able to complete the task.

But based on feedback and general observations of how users interacted with tasks 5 and 6, the explore screen would be restructured.It will all consolidate under a button called ‘Filter’ where the user can choose a location, filter by tag and sort by

Summary of Statistics The primary statistics for the user testing on the iPhone are below.

Average global site rating (1=good, 7=bad):

2.4

Based on these results, It seems like the usability of the iPhone design for this test is rated above average on the scale for this user test.

Global Ratings At the end of each user test session, participants filled out a “Global Evaluation” survey, in which they rated the site on a scale from 1 to 7 (1 = good, 7 = bad) on 15 different scales. We grouped the responses into 5 main categories: Overall, Navigation, Layout, Content, and Other. These are the elements of each category.

Overall: easy to use, efficient, and clear Navigation: intuitive, straightforward, clear labels Layout: pleasing presentation, easy to read, good use of space Content: informative, want to read, would find what I need

Results from the Survey

Average global site rating (1=good, 7=bad):

2.4

Rated (relatively) good: Layout Rated (relatively) poor:

Ease of use, in particular, the Explore page.

u s e r te sti n g

105


Global Evaluation Scores Overall Easy to use 1 = easy to use, 7 = difficult to use

4

Efficient 1=efficient, 7=tedious

3.3

Clear 1=clear, 7=confusing

3

Navigation Intuitive 1=intuitive, 7=obtuse

3.3

Straightforward 1=straightforward, 7=roundabout

3.3

Clear labels 1=clear labels, 7=confusing labels

2.7

Layout Pleasing presentation 1=pleasing presentation, 7=unattractive presentation

1.3

Easy to read 1=easy to read, 7=difficult to read

1

Good use of space 1=good use of space, 7=poor use of space

1.3

Content Informative 1=informative, 7=useless

1.3

Want to read

2

Would find what I need

2

Average Score

2.4

From the test results documented in the chart above, we see that the overall score is 2.4 (1=good, 7=bad), which is above average for this test. The lowest scoring is the overall ease of use - specifically with users finding the ‘Explore’ a bit difficult to navigate, even though users were able to complete the task. The word of the task may have contributed the the confusion, but based on general observations and feedback, it will be restructured.

106


Demographics This is a summary of the demographics of user for this test. All participants use his/her iPhone at least once a day, and travel at least 1-2 times a year.

Demographics Age

25-30

Gender

Both Male & Female

Use of iphone (frequency)

Once a day

# of times travel per year

Infrequent to 2 mos out of the year average

u s e r te sti n g

107


Proposed Fixes to Screen Flows

1

Screen 1

New ‘Explore’ view

1. Filter Button

Users were complete to complete the task to find ‘Popular’ feeds. But based on general feedback and observations with the explore screen, it will be re-structured.

The filter button on this screen will bring up a ‘Filter’ view, which allow users to filter feed result by location, tags, and sort by ‘Recent’ and ‘Popular’ feeds.

108


4 1

2

3

‘Filter’ view

1. Location

2. Sort By

3. Tags

4. Search

Takes users to the location view,

The allow users to sort feeds by

Allow users to filter by tag.

Bring up serach results for

where user can filter feeds by

chronologically by recent or by

location.

popular feeds.

the ‘Explore’ view

u s e r te sti n g

109


05/ design

110


Naming the App App Name Word cloud This is the word cloud generated from the app naming exercise.

Whoopala

Wooplaa

The name that best fit the name of the app: Whoopala. The name evokes a sense happiness and joy, as one would after a travel adventure. After some research into the name, it was determined that the name was taken. This is how Whoopala was re-worded to Wooplaa.

design

111


Moodboard

Fun and silly with characters This direction shows a character-based app, with darker tones and a more subtle color palette to subdue the silliness of the characters to give it an more sophisticated look.

Fun, in a whimsical way In this direction, a sense of fun adventure is conveyed by being whimsical and quirky.

Web 2.0 social media This has a trendy Web 2.0 social media look, with a touch of sophistication added in.

Final Design: Aviation Adventure This is an aviation theme, about exploration and adventure. It draws inspiration from vintage wood propeller plane.

112


Initial Sketches

design

113


Logo Exploration Exploration different directions based on initial sketches.

Logo Exploration 1

1

2

3

4

Logo Exploration 2: From Logo Exploration 1, logo #1 seems to be the best fit for the look and feel for this app. The helicopter top along with the right ‘W’ conveys a sense of fun, evokes the idea of travel.

114


Logo Roughs For the roughs,two color choices were explored, orange for warmth; reminiscent of sunshine. The blue is the cooler tone, which represents the sky.

Final Logo A warmer tone is chosen for the branding of this app. The look and feel is reminiscent of the 1920s and 1930s vintage airplane look.

Wooplaa

my big travel adventure

design

115


Mockups Design Exploration #1 These are the first design directions of final designs of the key screens from the app.

‘Activities’ Tab The activities tab show journal feeds from all users. Users can view feeds based-on recent, popular, or friend’s activites.

116


‘To Do’ Tab This is a list of activiites that a user might want to visit while a vaction. This can added from the a corner check button from the actvities feed.

design

117


‘New Journal Entry’ Tab Tapping on the center button on the tab bar will bring up this page. From here, users can add a new journal entry to an album.

118


‘Journals’ Tab The Journal tab will display all the uesrs’s journals from past trips and friend’s journals as well.

design

119


Final Designs These are final designs for the app.

‘Explore’ Tab Public journal entries feeds are posted here as inspirations for others on trips. Users can filter feeds by location, sort by recent or popular, and tag.

Public journal Entry Feed posted to other users as source of inspiration

120

Selecting Tags

Selecting Location


‘To Do’ Tab This is a list of activiites that a users added from ‘Explore’ feed by tapping on the upper right corner of the feed. This can added from the a corner check button from the actvities feed.

To do list, which can be added by tapping on the

To Do Detailed View, which shows

checkbox on upper right of a journal entry feed

the detailed journal entry feed

design

121


‘Journals’ Tab (My Journal) The Journal tab will display all the uesrs’s journals from past trips and friend’s journals as well. There’s a group journal feature, where friends are able to share journals. Shown here is the ‘My Journals’ view, where it list all user’s journals.

A vew of ‘My Journals’, which contain all user’s trips

122

Detailed journals list view, which contain

Detailed journals map view, showing a

all journal entries from a trip details page

map region of where the journal entries


Adding friends to group journal for the first time.

Friends added for the group journal. More friends can be added on the button on the upper right.

design

123


‘Journals’ Tab (Friend’s Journal) The Journal tab will also display friend’s journals from past trips, as shown here.

A list friends to choose from A friend’s journals list

124


List view of the journal

Map view of the journal

design

125


‘Activity’ Tab Alert users to activities related to the account. (i.e. When a comment is added to a journal entry, a friend has been added, or when a friend adds a new ournal entry to a journal)

A list of activity notifications

126

Activity details related to the notification


design

127


06/ future expansion 128


Roadmap 1

2

v1.0 iPhone release

Web v1.0 Features are similar to the phone, with 3 main features: explore, journals, and settings.

v2.0

3

Both Web and mobile platform 1. Additional Tags to include Transportation and Lodging 2. Add statistical graph view on the phone regarding tagged activities 3. Expand on additional graph/statisical view on travel history

Future Release

4

1. Expand on web to create a travel community. Phone platform will serve a a way for users to update travel information. 2. Create historical snapshots of one’s travel history through infographics

f utu r e e xpa n s i o n

129


App Tab Bar

Explore

To Do

(OPTIONAL FILTERS) SORT BY

Recent

Popular

1

Tags

Location

To Do Items

Search

Jo

(OPTIONAL)

Journal Feeds

S (Jo

Journal Feeds Map of Location Map of Location

Large Picture

Large Picture

Comments

Comments New Journal Entry

Group Journal

Title

Add Friends

Message Sharing Date Picture or Video

1

LEGEND

Tags

Privacy

Filter (Optional) Selection Options Multiple Items Future Expansion

130

Map of Location


Journals

My ournals

Settings

Activity

Friend’s New Journal Entry

Friends

Friend Added

New Comments

- User Name - Email - Password

(OPTIONAL)

Search ournal)

Journal Settings

Friend’s Journals

Large Picture

Journal Feeds (Map View)

Social Media Settings

- Facebook - Twitter

Activity Detail

Search (Friends)

Add Friend

Filter by Tags (Optional)

Journal JournalFeeds Feeds (List (ListView) View)

Profile Settings

Future Expansion 1. Additional tags will be added to include transportation and lodging.

2

Graph View (Statistical)

(POTENTIAL VIEWS)

2. Graph view will include a simple statistical chart for each journal to show the different type of activities the user is involved in on the trip.

Comments

i n fo r m ati o n a rch itectu r e

131


Web

Explore (OPTIONAL)

(OPTIO

Filter

Search

Search

(3 OPTIONS TO FILTER BY) SORT BY

Recent

Popular

Tags

Location

To Do

My Journa

Journal Feeds

Graph V Map of Location

Large Picture

(All Jour Statisti

Comments

LEGEND (POTENTIAL VIEWS)

Filter (Optional)

Journal Fe (List View

Selection Options Multiple Items

132

Map of Location

Large Picture


Home

Journals

Settings

ONAL) SORT BY

Recent

Alphabetical

User Name

als

Friend’s Names

Social Media Settings

Account

Email

Password Reset

Facebook

Twitter

Map & Graph Compare to Friends

Friend’s Journals

View nals: cal)

eeds w)

e

Journal Details

(Selected Journal to View)

Filter by Tags (Optional)

Future Expansion Future expansion will focus mainly mostly on the web and not the app. It will be kept simple with 3 main menus: Explore, Journals, and Settings.

Journal Feeds (Map View)

Graph View (Statistical)

Explore: Both app and web versions are similar. The idea is to allow everyone to look through other user’s feeds as a source of inspiration. Journals: Like the web, it will show the user’s journals and friend’s journals. Unlike the app, it will show more statistic information about the user’s app about the trip, using tags and location to show the user past travel history.

Comments

In addition, there will be a map and graph view to compare Settings: It’s mostly profile settings, such as user name, email address, password reset, connection settings with Facebook and Twitter.

f utu r e e xpa n s i o n

133


Wooplaa  

Process Book

Read more
Read more
Similar to
Popular now
Just for you