Meeting the Goals The goal of SocialGym is to encourage people to ...

bolivialodgeInternet and Web Development

Dec 14, 2013 (3 years and 8 months ago)

109 views

Meeting the Goals
The goal of SocialGym is to encourage people to go to the gym by connecting them with their
friends and rewarding them for achieving their goals. Therefore, it is important that the application is
easily accessible and that the interface looks casual and fun. We chose to implement the application as a
website due to the time limitation, but we will use responsive web design so that SocialGym can be
easily used on mobile phones as well as computers.
Our app will connect people by importing friends from the phone book, Facebook, or
LinkedIn. It will also help people to easily schedule events with other friends by importing the user’s
schedule from Google Calendar and comparing the friends’ schedules when a user creates an event. So
the user wouldn’t have to create a poll or ask each friend for his or her schedule prior to creating an
event. We will simulate the importing and the comparing of schedules as well as the importing of friend
list. Our app will reward the users for achieving their goals by assigning points to the goals based on the
user’s skill level and the difficulty level of the goal.
Overall Implementation Strategy
Our group will divide the work into Design, Front End (UI and UI framework), and Back End.
The design group will make sure that the UI is intuitive and attractive. The front end will implement most
of the main tasks of the app such as adding a goal, viewing upcoming events, and searching for people
and events. Suggesting friends will be simulated by displaying users with most common interests,
although a more complex algorithm that also considers skill level and schedule would be needed for
more accurate matches. The database that is used for the back end will also be simulated due to the
time constraint. For example, we will assume that our application can import information from
Facebook and Google Calendar, but we will actually be fabricating the data.
Each subgroups responsibilities and tools are as the following.
UX
Jingning, Wenjun
Responsibilities
:
1.
Design the overall layout based on the evaluations(cognitive walkthrough and heuristic
evaluation) and the design principles mentioned in class.
2.
Design icons, buttons, and menus
Tools
:
1.
Photoshop
2.
CSS
3.
Icon Photo
4.
Buttons
Front End
UI
Caroline, Hidy, 
Jiajun
Responsibilities
:
1.
Create a webpage that is responsive since our primary target is mobile­users.
2.
Build each page of the application
3.
Link the designs(icons, buttons, etc) to events that can be detected by the system.
Tools
:
1.
ResponsiveGridSystem (CSS)
2.
JQuery
3.
HTML
4.
CSS
UI Framework
Aaron, Grace
Responsibilities
:
1.
Work on the FrontEnd Routing Logics
2.
Handle Events and Errors
3.
Integrate Front­Backend
Tools
:
1.
Backbone.js
2.
Require.js
3.
Underscore.js
4.
Almond.js
5.
jQuery
6.
jQuery Mobile
7.
Handlebar.js
8.
Grunt.js
Back End
 Wayne
Responsibilities
:
1.
Built a dummy server that links with CouchDB and capable of serving/receiving JSON data
2.
Set up a mock database
3.
Information Retrieval
Tools
:
1.
NodeJS
2.
CouchDB
3.
Amazon EC2
To better facilitate the user test, the prototype will first provide short introductions and guidance. A
short video will first be provided introducing how the app works and demonstrate how to perform
several major tasks before the user actually uses the app. Better user guidance such as a user handbook
could also be added as a part of the app, so the users could refer to the handbook when they have
problems about how to perform a certain task. When a user makes  a mistake while performing a
certain task, a pop­up notification will report the error and give suggestions.
Besides providing direct user guidance via documents, we need to design the user interface so that it is
easy for the user to understand and use through standardization and consistency. The most important
thing for design interface is to follow the current popular design style to make the user able to use
experience from other apps. We will promote consistency within the app by consistent wording and
layout between the pages. For each interface, we could use words that are easy to understand and even
add notifications about the function to make the user easier to make the choice. We will make sure that
the main buttons are visible and that the functionality is clearly indicate as well.
For our prototype, we could test the smoothness of  the process of finishing several majors tasks, such
as create a group goal, without any guidance from other people. For the tasks that may exist in other
similar apps, we could do a comparison based on both the user experiences and accurate usage data.
Modification based on peer evaluation
Based on the evaluation from the other teams, in the visibility aspects, we will always show a navigation
bar on the screen and adjust the “back” button with a more meaningful caption.
About the user controlling, according to the suggestion about adding an undo function, we will add a
function to delete the created activities or progress. In order to let the user understand how the apps
works, we will expand our tutorial in more detail and make the tutorial accessible in the slide bar on the
side of the screen.
In helping users recognize errors (ex. if user wants to create a new goal “10 pushes up a day when”
when they already have a goal “15 pushes up a day”), we will show a pop­up screen to notify users to
decide whether they want to create a new goal or not.
The evaluation mentioned that there is too much content in some of the pages. We will go through all the
tasks and screenshots to simplify the content in each page, and we will get rid of or rearrange the
confusing contents.  For example, in the “goal” page, there is a horizontal scrolling section and a vertical
scrolling section in the same page. We will reduce it so that there is only one scrolling section or at least
that the scrolling sections are in the same direction.