Like Labs

Differences between the already implemented and the new UI, questions about the new design, and compromise solutions

 

1)  Venue Flow (venue account)

The design menu sent by the client contains the following tabs: Dashboard, Feed, Profile. The menu developed by us contains: Dashboard, Feed, Moderation, Profile.

Thus, we’ve added one additional tab (Moderation).  This was done in accordance with the specification determining that the venue account includes: “… 2) The company’s activity feed (everything that has gone through moderation and has become accessible to the site users and been published to Facebook; 3) Moderation (content subject to moderation)”.

In addition, we’ve added the option for filtering by the type of comment, the precise point and the date range (once again, based on the specification “content feed with place tags and date tags, with an option to sort and filter by type (text, photo, video), location or date range”). In order to match the current version to the UI we received, we can take out the filtering and combine the Feed and Moderation tabs.

The list of filters differs by the comment’s status as well. We’ve added Archived (the specification contains such a status), Published, and Favourites (for user convenience), and took out Comments (because the first app version didn’t allow comments).

There is also a difference in the comment’s appearance; more specifically, in the elements managing its change of status. The client’s design features only 2 buttons: Approve and Flag. Our version offers a drop-down menu for setting up any type of status (Pending, Approved, Archived, and Flag), a button for publishing the comment on the company’s page in the social networks and a control for adding messages to the list of comment examples shown on the tablet – according to the specification, all of these options are necessary.

The company’s profile page differs considerably. In the design, it has only the company’s name, phone number, email, site, address, logo, and buttons for connecting to the social networks.  From the specification’s standpoint, this is clearly insufficient. The company should have points (to which the tablets are connected) and administrators. In the past, we coordinated the exact list of company attributes and points with the client: “11) The company can and should have: a name, phone number, email, at least one page in the social networks, at least one administrator, at least one point; 12) The point can and should have: an address, phone number, email, at least one tablet. Each tablet has an identifier (login) and password.” We have incorporated all of this into our interface while striving to adhere to the style of the UI we have been sent.  Moreover, we have added a Moderation checkbox to the company’s settings — its existence was determined by the specification. Therefore, if we redo the company’s profile page in the way requested by the client, we will just disable the system because this design does not agree with the specification at all.

           The Dashboard pages are identical in both versions.

This makes our version of the Venue Flow (venue account) corresponds to the client’s specifications in regard to functionality while the client-provided design does not. The two versions are identical in regard to their style and design.

As a compromise solution, we can take the version we have developed (it being more functional and in tune with the specification) as a base, and, if the client really wants it, we can make the following simplifications (in accordance with the new design):

            1) combine the Feed and Moderation tabs in one (Feed, Events)—as a matter of fact, these pages differ only by the accessible filters and by the fact that the comment-status filter for Feed is strictly set as “approved”.

           2) remove the additional filters – Point, Date, Approved, Favourites

Essentially, the back end has not been affected by these changes; the work amount is small (about 12 hours). 

 

2) User Flow (user account)

Our menu version: My Feed (a given user’s comments … ), My Photos, Settings (user notification settings as well as publishing user content in the social networks and forwarding to email), Profile (editing of registration details).

The version described in the specification initially featured: 1) My Profile; 2) My Activity; 3) My Companies; 4) Moderation; 5) Notification Settings. In accordance with the client, in the first app version, the administrator can’t create content and, therefore, can’t act as a regular user. Accordingly, the regular user can’t be an administrator, either, which is why we have removed tabs 3 and 4 (My Companies and Moderation). We added a “My Photos” tab because there is no other place in the system for showing the user-created photos on the tablet (and not just the photos attached to the comment) as well as edit their status. This option is part of the design of the mobile site.

This ensures that our design agrees with the specification with regard to the corrections made by the client.  As a negative aspect of this version we can point out only the lack of an option for viewing public content— to fix this drawback, we can add a “Companies” (“Places”) tab with a list of all the companies in the system and an option to view their public content (similarly to the way it has been done with the public content menu in Part 4).

The new design features the following menu tabs: “Events” (Feed), “My Photos” (Photos), “Places”, “Recycle Bin”, “Set-up” (Profile, Settings), and “Suggest a New Place”.  Differences as compared to our version:

·      a “Recycle Bin” tab has been added (it isn’t described in the specification; there is no design for the page itself; there is no indication what to place in it, maybe deleted photos?) as well as a “Suggest a New Place” tab (it does not agree with the latest version of the specification according to which “in the first version, companies are entered in the system in manual mode via the admin panel”);

·      2 tabs (Profile, Settings) were combined in one (Set-Up). The design appeared recently. From it we found out that each user can have several phone numbers, one of which must be Primary, as well as several email addresses. The notification settings do not correspond to the specifications, either.

·      a “Places” (Companies) tab has been added, and it makes real sense for featuring the full list of companies and their public content (I wrote about this earlier, in the description of our version of the design).

Now about specific tabs. The “My Photos” page differs from our version (“My Photos”) not only by its style but also by:

·      the lack of filtering by photo status (active/deleted; the deleted photos should probably show up on the “Recycle Bin” page but this isn’t written clearly anywhere);

·      the grouping of photos by photo sessions (it’s unclear why there are 9 photos for each session displayed on the mock-up when, in actuality, only 5 photos are created on the tablet);

·      the system’s reaction to a click on a photo. In the new design, the click yields a window with the photo itself, the comment text, social network statistics, comments, an option to make a comment or delete the photo (a confirmation window appears after that). To the best of my understanding, we delete the comments as this function does not exist in the first version of the app. The issue related to the comments’ texts is formulated in (6.1). The design style differs from ours as well but its changing will not affect either the controllers, or the services.

There is no “Places” page in our version. The issues are formulated in (6.2).

            About the “Events” page. In our version (My Feed), here, the comments made by the current user are shown, with filtering by comment type, companies/points and date range as well as the option to delete and edit the texts of not yet approved comments (all of this has been done in accordance with the specification).  The design presents a different version:

·      the comments are grouped by companies (or points)—this will require making changes in the controllers and services;

·      switching between the comments about a given company is done by a carousel menu. If animation is needed, the modification will take a lot of time;

·      the commentaries about a given comment are shown underneath it—evidently, this is taken out as commentaries are excluded from the first version of the app;

·      for the current comments, there are “Like” buttons for the social networks;

·      green check marks are shown for publishing comments.

The questions about the filters at the top of the page and about editing comments are given in (6.3).

Here is a compromise solution. From the menu suggested in the new design (“Events” (Feed), “My Photos” (Photos), “Places”, “Recycle Bin”, “Set-up” (Profile, Settings), and “Suggest a New Place”) we take out the last tab (“Suggest a New Place”) as it does not agree with the specification. The contents of the current “My Photos” section are distributed between “My Photos” and the “Recycle Bin” (depending on the photo’s status)—this will take 4 hours. In “My Photos”, we display the content either in its present form (modifying the style will take 2 hours) or by grouping the photos by photo sessions as shown in the new design (only a few modifications are needed—this will take about 6 hours). We combine the implemented by us sections Profile and Settings into one (“Set-Up”), correct the styles but we retain our content and functionality (the new design version does not agree with the specification)—this will take 6 hours. About the “Events” tab: we either retain our version (styles—4 hours) or adopt the new design option as a base (with the carousel menu and grouping comments by company) but take out search, the animation when scrolling through comments (a lot of time is needed for implementation), the display/creation of comments (it does not agree with the specification). In the second version, changes will have to be made to the back end (including requirements to the database), together with the UI, this will take approximately 24 hours. About the “Places” tab:  we either retain our version (analogous to the “Companies” public content tab—the adaptation will take 4 hours) or adopt the new design version as a base and simplify it in the following way: we remove the functional from “Like” (the button and the statistics section), take away the user avatars and replace the “More” button with a regular pager. Here it will be necessary to modify the controllers (along with the layout change, it will take about 24 hours); in addition, we need clarification from the client about what exactly we mean by “place” and lists of what elements are we to display in the 2 tabs for each company.

 

3) User Registration

In accordance with the new design, the registration panel is displayed on all pages below the menu (if the user has not logged in) while in our version it is on a separate page which opens by clicking on Join Now (making the change isn’t complicated).  Moreover, unlike our version, the field for phone number entry does not feature a drop-down list of country codes (according to the specification, “the field format should facilitate phone number entry”). We have moved the user agreement to a separate page and have made registration a separate step (making the change isn’t complicated).

The password entry page differs in the aspects described in the specification and already implemented by us: in addition to entering their password received via SMS, the user needs to enter a new password and confirm it (making the change isn’t complicated). Also, there are additional questions to the client (described in 6.4).

Here, depending on the client’s responses, it may be necessary to make changes not only to the controllers but also to the services.  Here is a compromise approach—we retain the registration process (the step sequence, the required data) in the form in which they have already been implemented and change the window styles so that they will agree with the new design (this will take about 12 hours).

 

4) Other pages

In accordance with the specification, in the first app version, there should be 3 types of users: system administrators, company administrators, and regular users. In addition, there is public content accessible to non-registered system users. In both the initial design (for a mobile browser) and the modified new design there are pages only for regular users, which is why , when creating the company administrator account and the public content pages, we stepped away from the specification (in which these interfaces are described only briefly) while striving to preserve the overall style of the site. There was no description of the system administrator interface so, in creating it, we were governed by general considerations.

The menu in the company administrator’s account features 3 tabs: My Companies (displaying a list of the companies belonging to that administrator; by clicking on a given company, we enter its account), Moderation (a list of comments to be moderated with an added option for filtering by company), and Profile (analogous to a regular user profile).

The public content menu features the following tabs: Companies (Venues, Places—transition to a list of all the companies in the system with a display of each company’s logo, name, number of points and comments; the user has the option to view the list of points and the company’s public content with standard filtering by comment type, specific point, and date range), How It Works, Get Started, Terms Of Use, About Us, and Contact Us (in accordance with the specification): “4) A description of the system for Users and Companies; 5) Instructions for hooking up; 6) User Agreement; 7) Company’s— system owner’s essential data; 8) Contacts and feedback field”).

The menu in the system administrator’s account features 4 tabs: Companies (a list of all companies in the system with an option to remove any company and to transition to its account; in the company’s profile, an option appears to edit the data of the company’s administrators), Users (a list of the regular system users; there is an option for quick editing of user data as well as deleting/reinstating  a given user and transitioning to their account). Profile (analogous to the regular user’s profile but without the option to connect to social networks), and Settings (a setting of the frequency of sending notifications—these are necessary according to the specification).

Since the system allows transitioning among different company accounts, user accounts, and administrator accounts, at the top right of the page we’ve added a “My Account” button which returns the user to their own account.

Therefore, all the pages described in this section (4) are not included in the design sent by the client. These pages were created by us in order to implement the functionality described in the specification. Their style and layout are analogous to that of the other pages in the site.

 

5) Miscellaneous

In addition to modifying the design, we will also need time for the Russification of the system and for coordinating the translations with the client (16 hours).

 “Like” buttons for the social networks are added to a number of pages (takes 8 hours).

Adding images to the main menu, new links (About, Contact Us) in the footer, font correction (takes 6 hours).

Very recently, a design appeared for a new page— Homepage. The questions regarding it are formulated in 6.5.

 

6) List of Questions For the Client

6.1. User Flow, “My Photos” page:

·      In the new design, clicking on a photo yields a window showing the photo itself, the comment text, and other information. It’s unclear whether we should display the comment text if the associated photo is not “selected” (we make 5 photos on the tablet and select only one of them to be displayed along with the comment)?

 

No, it isn’t necessary.

 

The comment is written for the “selected” photo; the rest of the photos are accessible to the user for making a decision and future use; in this way, the comments to all the photos are unique.

6.2.)  User Flow, the “Places” Page:

·      What is the exact meaning of the term “place”— a company or a company’s point?

·      What should happen upon clicking the “Like” button (considering that there are “Like” buttons next to it for each of the social networks) and what should be displayed below, in the “Likes” panel (maybe we need to introduce our own system of “likes” and keep the data in our database?)

·      Above the list of companies, there is a “Search” field. What criteria should we use when looking for companies (the presence of a given syllable or individual words in the name or address)?

·      On the company’s page, there are 2 tabs (with icons of a photo camera and a message, resp.) What exactly should these tabs contain (for example, the first tab—photos or photographic comments; the second tab—comments or text comments)?

·      The design displays the avatars of those users who have written comments. How can we receive these avatars (add a function for loading the avatars to the user profile or pull them, as well as names, from the social networks)?

·      Below the tab with the message icon, there is a “More” button. What should happen upon clicking on it—all the messages will get displayed?

 

- place—this is a company which consists of points; this fact is not visible to the regular user

- true, “Like” and “Likes” form an internal system of “likes” in Likelabs

            a)upon clicking on a “Like” button from a social network, that “like” should be visible on the page/to the group

            - search only by name; include other words in the search result. It isn’t necessary to do this just now, we’re starting with three companies. Make the search inactive.

            -the tab with the photo camera contains photos and the accompanying them comments; the “text” tab contains text comments.

  -pull them from the social networks, from the first one they are registered with. We will add the option to make changes later.

6.3. User Flow, “Events” Page:

·      Are the comments grouped by company or by the companies’ points?

·      The transition between the comments about a given company is done with a carousel- type menu. Is animation necessary?

·      For the current comment, the social networks’ “Like” buttons are displayed. What exactly URL should we “Like” (the link to the comment on our site or the link to the comment published on the user’s page or the company’s page in the social network?

·      Green check marks are displayed for some of the comments. Is this a way to mark the comments which have been published by a given establishment in the social network or on the company’s page in LikeLabs?

·      Do we understand correctly the meaning of the individual filters (at the top of the page)?

o   All – all the current user’s comments and all the other users’ public comments;

o   My Photos – the current user’s comments which contain photos;

o   My Comments – will be removed, its functionality is not supported in the first version of the app;

o   Messages – the current user’s comments which contain text;

o   Venue Updates – the other users’ public comments?

·      The design doesn’t indicate how the users can edit their comments. Add an Edit button and edit the text in the pop-up window? Or introduce the option to edit the text on the Review Details page to which we get by clicking on the comment?

 

- The usual user “doesn’t see” the points inside the company, i.e. if a company has several points, for the purposes of the display on the site, this is invisible to the user

-Animation is necessary but it can be created in the second version.

-“Like” is given to a photo

a)    if the photo is published in a group/on an establishment’s page, “Like” is marked for the photo published on the establishment’s page;

b)    if the photo is not published in a group/on an establishment’s page, “Like” but is published on the user’s personal page, “Like” is marked for the photo published on the user’s page

c)     if the photo is not published by the user, the photo is published from the social network and “Like” is marked, both actions take place for the social network on which the user has clicked

            -the check mark in a green circle marks the photos selected and published by the establishment on the establishment’s page/in the group

            - the correct solution in this discussion is “home feed”

            - upon clicking on the photo, a likelabs_userflow-my-photos_ru_details-modal.png screen should open which is published on the page https://basecamp.com/1815659/projects/269576-like-labs/todos/8121109-my-pho…  ;

if deleting is chosen, then likelabs_userflow-my-photos2_ru_delete-modal.png 

 

 

         6.4) The User Registration Process

·      What is the exact sequence of steps for registration (the design contains mosk-ups without an indication for their exact order)? First, a page with the user agreement appears, then, a page for entering/changing the password, and, at the very end, a page for linking to social networks and entering an email address?

·      Why is the button “Continue Without Authorization” (“Skip This Step”) necessary? Cancel the already established link to the social networks (similarly to the “Cancel” buttons associated with the attached accounts) and ignore the already entered email address?

 

Sequence at first entry:

- enter/change password

 -user agreement

-linking to social networks or e-mail

 

The “Continue Without Authorization” button—we would like to give people the opportunity to use our system without linking to social networks and/or e-mail

 

The “Cancel” button interrupts the registration process and deactivates the link to social networks if such links have been established

 

If the user links to one or two social networks, the “Continue Without Authorization” button disappears. If the user deactivates the link to both social networks, the “Continue Without Authorization” button appears.

 

If the user entered their e-mail address and clicked on the “Continue Without Authorization” button, the entered e-mail isn’t saved. In the second version, we will give a warning that the entered e-mail address will not be saved.

6.5) The Homepage Page:

·      The page design features a video clip (it will have to be saved locally or downloaded, for instance, from YouTube), logos (of the companies?), quotations (predetermined or taken from the comments?), samples of photos (or of photographic comments?), and additional text. We would like to clarify what data exactly will need to be displayed in the described sections?

·      Clicking on the “More” button should yield a transition to the “About Us” page?

·      Should photographic comments and company logos be clickable? If yes, what should happen upon clicking?

·      In accordance with the specification, the nonregistered users are able to see the public content. How is the transition made from a given page to it?

·      In the page footer, there is a “Confidentiality” tab. Should this tab be present only on the pages of nonregistered users? Does clicking on the tab yield the appearance of a pop-up window or the opening of a new page (is a specific design needed for this page?)

 

— a) the video clip will be saved on YouTube

  b) yes, the participating companies’ logos; I’ll supply those

   c) quotations—at launch, there will be none, we will add them later; these aren’t users’ comments but comments about the system of establishments; we will be doing control inside the administrative part of the site

d)    photos—for the time being, there will be 9 fixed photos from “real” photographic comments; we will create and select the photographic comments as soon as the system begins functioning

e)    I will supply the additional text later on.

            - Clicking on the “More” button yields a transition to the “About Us” page

            - The logos are not clickable. Clicking on a photographic comment yields a transition to Homefeed displaying only the public content

            - Public content for non-registered users, see above

            - “Confidentiality” needs to be replaced with “Rules”—a pop-up window with the user agreement, in the tab. The User Agreement hasn’t been finalized yet but can be used.