GR2 - Designs

Scenario

Mr.Traveller finds out about the World Insider, so he visits www.insider-world.com. There he finds the intro page, where he can create his user profile or log in to his existing profile. (Task 1)

Now, Mr.Traveller either continues to his home page after Task 1 or he leaves and comes back at a later time and logs in. Then, he creates a “trip” page. This includes answering a few basic

questions posed by our website, uploading pictures and ranking “top things” to do for that trip. (Task 2)

The user searches for friends, through several mechanisms, like importing from Facebook or using a database of users. After he finds the ones he wants, he adds them and they have to accept

his friend request. (Task 3)                                                          

After the user has added friends (Task 3), he can search for “trips,” browse through his friends’ “trip” pages or mouse over a world to get information about destinations he is interested in. (Task 4)

Designs

Storyboard 1

 

Task 1: If the visitor already has a profile, he simply types his "username" and "password" and clicks on the "Log In" button. Otherwise, if he wants to create a profile he clicks on the
"Register" button and the following form appears:

The user fills out this form and clicks on the "Submit" button. His profile is, then, automatically created and he is redirected to his Home Page.

The home page includes info about the user and a picture. (Not necessarily, but assume it does for simplicity and consistency) 

On the top of the page, there is a link to your friends' trips, which is the most important part of the website. When you click on the link, the most recently

updated trips (of your friends) will appear, but you can organize the trips differently later on (for example, by alphabetical order). (This is for Task 4)

On the lower left part of the page, you can see the user's most recently updated trips and (if it is your profile) you can also click on the "Create trip"

and add you new adventures.

On the lower right part of the page, you can see the user's friends and (if it is your profile) you can click on the "Find friends" link and be redirected to the appropriate page.

Except the user's info and picture, everything else is click-able. For instance, if I am on someone's profile and I see a friend that I know as well, I can click on him and go to his profile.

If he is not already on my friend's list I can send him a friend request.

Task 2: If you want to add a trip you click on the "Create trip." If you want to update an already existing trip you simply click on the trip's thumbnail. These actions will lead you to this page:
Here you have to fill in the Destination's name and the Top 10 list (or less if you don't have 10 things to suggest) and you can optionally fill in the rest,

which includes more info about your trip and photos.

Task 3: As we mentioned earlier, if we want to add friends we click on the "Find Friends" link and we are redirected here:
The first section, called "Friend Search," is for searching the database for already existing users that match the typed input.

The second section is used for sending invitations to people who do not have an account with the "World Insider" already. We do this via email.

Finally, we can import people who have account on Facebook and on World Insider. This takes advantage of the fact that a lot of people are already

connected through Facebook.

Storyboard 2

Follow the link: World Insider - Designs II

Storyboard 3

This version of the storyboard is more self contained. There are not meant to be a lot of different interfaces with the idea that related information can be represented on one page.

Upon entering the website, our user, Mr. Traveler, is welcomed with the website's home page (Figure 1). If he had had an account on the website before he could have simply logged in at the top right corner of the page. Since Mr. Traveler is a new traveler and has never been on the website before, he can sign up one the same page but entering basic information (Task 1).

Figure 1

Mr. Traveler will then be able to edit his profile on his personal page. This page is segmented into three parts. The top most section of the page contains a traveler's personal information. This includes a profile picture, name, age, nationality, area of residence. Also included are some fun facts, such as 'Best Trip', 'Traveled With', and 'Has Visited xx% of the World'. All this information can be constantly edited and updated just by mousing over and clicking parts of which need to be edited. Below, a user's trips are included. In this case, Mr. Traveler has updated his profile with his recent trip by pressing '+Trip' and filling in the boxes of information (Task 2) . Figure 2 shows Mr. Traveler filling in his personal information and adding three trips to Beirut, Boston and Paris. On the bottom right portion of the page, there is a map that updates when a user enters a new trip location, and shows how much of the world the user has traveled to. Below this, the user has the capacity to connect to his friends that also have accounts on WorldInsider. A user can do this manually (adding one friend at a time) or automatically (connecting to Facebook and importing all friends with an account). After a user has completed his profile he will be able to view friends and their recent trips (Task 3).

Figure 2

Once our user has connected to friends and updated his profile he will then be able to view the Insider Map of the world. The main idea of this page is that it hosts a large map of the world. Whenever a user is interested in traveling to a country or would like to find out more about what can be done in a specific city, they can mouse over a country and a small box will pop giving a short summary of information. This summary includes the name of the country, an average rating for travel satisfaction, a subset of people that have visited or have lived in that country, and a selection of photos. To the right of the map is a side bar the contains information about the most recent trips that friends have embarked upon. All this information is clickable and will take you to the profile page of the traveler, much like the profile page shown in Figure 2. In Mr. Traveler's case, he is now able to search for advice my location (mousing over places he wants to go to, i.e. Russia) and can browse through his friends' most recent trips (Task 4).

Figure 3

  • No labels

1 Comment

  1. Unknown User (glittle@mit.edu)

    nice! well drawn map :) (where is the "analysis that considers the design's good and bad points for learnability, visibility, efficiency, and error prevention" for each design?)

    thoughts:

    - I would continue thinking about the goal of the interface. is it the "top 10 things to do at place X?", is it finding people who have gone to the same place and talking to them?, is it seeing pictures people have taken? Is the whole point to be open ended, so it's really just a collection of journal/blog/twitter entries organized around place? One way to help thinking about this is to think to yourself, what would be the simplest possible website that would satisfy the problem I see in my head? In this mental exercise, be very very willing to consider dropping seemingly large parts of the interface. The goal is to find the core. You'll end up building stuff around the core, but it is good to know what the core is. (For instance, your original project description says you are interested in a site where people know the other people on the site, so they can trust the information.. if this is the case, it sounds like you might want to build the site around Facebook, and just provide a way to see what your friends say about different places they've been).