Let’s Shop! – Prototype

Group 4: Sara, Bo and Qi

Now it’s time to show the prototype of our app! This blogpost will present the navigation design, information and interaction design, as well as the database of our app.

Navigation design

As Charlotte said, “if content is the heart of every website publication, then navigation is its brain and a fundamental pillar of information architecture design.” [1] Navigation of a website is like a road sign guiding users to different destinations. Therefore navigation design is very important and it should be simple, clear, direct and precise. We tried to follow this principle when designing the navigation of our app.

From the Start Page, users can choose to sign up or sign in (including  connect with Facebook). Once signed-in, functional navigation will always show up at the bottom in both graphic and text form with the three major functions: Profile, Shopping list and Newsfeed. This will make it easier for users to switch from one major function to another. When one major function is chosen, the button will be in blue, which tells users immediately which main section they are on. On each page of sub-functions, the prominent titles will appear on the top, letting users know where they are. And the back button on the left of the tittle allows users to go back to the former page easily. The graph below shows how users will navigate the site:


Navigation Design of Let’s Shop! (click to see a bigger picture)

Information and interaction design 

Here are the basic screen layouts for the most important screens in our app with some description on their functions and purpose within the app itself.

Group 4 sign-up


Sign-up & Sign-in

The first frame the user accesses is the starting page that gives the user two options: to sing-in or to sign-up. To sign-up the user need to add his/hers email and create a password. No creations of a unique nickname is needed to be approved in the sign-up and the user sign-in by using the same email address and password as when the user signed-up. The choice of excluding the creation of a unique nickname is to avoid scaring users away by making the sign-in process too hard and complicated and also too time consuming.

Group 4- Profile

User Profile

After signing up the user can create a profile and a nickname can be chosen, as previously mentioned this is not a requirement to get approved in the sign-up process. The profile contains the users shopping buddies and gives the user the option to search for new ones that are using the app, by the use of their friends email addresses or facebook accounts. We also added a function that offers the user to invite a new and not previously signed-up shopping buddy into the service. We hope that this will allow us to use WOM (word-of.mouth) as part of the marketing strategy for the app. This will also benefit the individual user who can pick the firends they want to go shopping with, without limiting themselves only to the ones already using the app.


Group 4 Newsfeed



The function of the newsfeed is very fun and simple, it contains the updates of the users friends when they for example, share their shopping lists. The user can like or even dislike the shopping lists. Besides this, the newsfeed will also contain the users own updated statuses. While writing the status update the user has the option to chose the check-in function to show friends what store they are shopping in at the moment, and hopefully even get some company by fellow buddies in or around that store. The newsfeed also exists as a main function in the apps dashboard that appears on every screen in the app.



MyLists and CreateList

My Shopping List

Shopping List and Create a New List                                       When it comes to the use of the shopping list itself the user has many options. The user can chose to use a list from the already saved ones in the users library. The user can also chose to create a new shopping list, a function that allows for the user to both add items to the shopping list as well as sharing the list with a shopping buddy.

The purpose of this is to allow the user to easily access the shoopinglists and the buddies they have been shared with. The user will also easily be able to change exisiting list by adding the items on the list or the buddies it is shared with. In this part the user can also access the list that has been shared to them from their shopping buddies.


Edit and Share List

                      View a List, Edit it and Share to Your Buddies User can choose to view a specific shopping list and see its’ content and whom the list is shared with. The user is also offered the option to add more people to share the list with and to select “go shopping” to continue to the shopping mode function of the app. In the section edit list the user can edit who the list is shared with and add on more items to an already existing list. The option to delete the list completely from the app and thus leaving more room for new lists can also be found under the edit function of the app.

Shopping Together

Under the “Shop Together” mode the user will see the entire shopping list that is selected. The user will be able to check of every item on the list manually while shopping and even see which items are being checked off by friends by the real-time update function in the app.This will allow for an easier shopping experience where the user can keep track of the items on the list and also allows user to experience being separated physically from the shopping buddies but still shopping together with them on the same list.

Group4- Shoppinglist 1

Shopping Together

This allows for a social experience for the individual user even when the user might be doing the shopping alone in a store. This function also saves time because friends and families can spread out in a store and help each other out to check off items quicker from their common shopping list.      When the user is done with the shopping the “check list” function can be used to double check that all items are checked off the shopping list. The items that haven’t been checked off the list will appear on the top of the list and remind the user to pick them up  store before finishing the shopping experience by pressing the “done function”.


Since we all have no experience on building database, this part is our assumption and it can be uncompleted and inaccurate.





1. For User identity management: users are distinguished in the database by a unique 8-digit number (UserID) which are randomly assigned when they are registered. Users are able to create a nickname only for better recognizing by buddies, so nicknames can be reduplicative.
2. For every post on Newsfeed, database records the user, the content, the location (if users check in).
3. Every list has a title. Then, users can add items into the list and share it with other users.
4. This table is for the friend relations between two users.
5. This table records which list is shared by whom to whom.



[1] Charlotte. 2009. “10 Principles Of Navigation Design And Why Quality Navigation Is So Critical”. http://www.onextrapixel.com/2009/07/03/10-principles-of-navigation-design-and-why-quality-navigation-is-so-critical/ Accessed October 2nd, 2013.

One thought on “Let’s Shop! – Prototype

  1. Pingback: Field Test Report – “Let’s Shop!” | Understanding Social Media

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s