WIXLIB

Endicia Interactive Style Guides forFuture Web DevelopmentA Major Qualifying Project ReportSubmitted to the Faculty ofWorcester Polytechnic InstituteIn Partial Fulfillment of the Requirements for theDegree of Bachelor of ScienceByLucas McLaughlinZeng LiuXi WenSponsored byEndiciaApproved byProfessor David Finkel, AdvisorMay 5, 2015

AbstractWe developed a set of style guidelines by creating page templates, components, and widgets forEndicia developers as they create a new CRM called Sputnik. By interviewing users and examining usagelogs of Supervisory, Endicia’s current, outdated CRM, we also designed the layout for the Sputnik homepage. All of these deliverables were created using ASP.NET, AngularJS, jQuery, HTML, and CSS. Overtime, our project will greatly speed up the development process and ensure a consistent look and feelfor Sputnik.

Executive SummaryThe Computer Science curriculum at Worcester Polytechnic Institute (WPI) provides studentswith the theoretical knowledge and skills to succeed. Through their MQP program, Endicia presentedour team with the unique opportunity to synthesize our theoretical education by practically applying ourskills to solve a real-world business problem.Based on the proposed areas of need, our primary objective for this project was to developwebsite components as well as style guidelines that will assist in and streamline the process of migratingEndicia’s old administrative site, Supervisory, to their new administration website, Sputnik. We followedan agile development methodology consisting of gathering requirements, analyzing the current system,and implementing functionality.Beginning with requirements gathering, we conducted meetings, interviews, and surveys withmajor stakeholders and potential users of Sputnik. Utilizing these requirements, we determined the keytasks to be implemented. We further analyzed the data in combination with usage logs from Supervisoryand created default links for different user groups to provide a more convenient navigation panel. Wethen segued into the implementation phase. Comprising two major parts, back and front-end, weseparated into two small teams working concurrently on the project. The process was highly iterative, aswe frequently refined the user interface, database architecture, and other components in response tohelpful feedback from Endicia employees.The deliverables include the Sputnik Developer Hub, in which developers can find all thecomponents they will need to port pages from Supervisory to Sputnik. We also designed a new homepage for Sputnik as well as the universal top navigation bar and left favorites panel. Both of theseadditions will greatly increase customizability and ease of navigation through Sputnik. As a whole, thehome page design and Sputnik Developer Hub will cut down development time and unify the look andfeel of Sputnik.

Table of ContentsAbstract . 2Executive Summary. 3Table of Contents . 4Table of Figures . 7Table of Tables . 91Introduction . 102Background . 112.1The Bootstrap Framework . 11Introduction . 11What is the Bootstrap Framework? . 11Why Use Bootstrap? . 11Downsides to Bootstrap. 12How Bootstrap Applies to Our Project . 122.2AngularJS . 13Advantages of Using AngularJS . 13Disadvantages of Using AngularJS . 162.3Razor . 162.4Information Architecture . 17Introduction . 17Design Patterns . 17Design Techniques . 18Design Styles . 182.5Web Design and User Experience . 18Introduction . 18User Research . 18User Interface (UI) Design . 19Interaction Design . 19Visual Design . 19Usability Evaluation . 19Accessibility . 19

3Methodology. 203.1Supervisory and Sputnik . 203.2Requirements Gathering . 213.3Wireframes . 24Key Elements . 24Home Page Wireframe Iterations . 263.4The Sputnik Developer Hub . 29Supervisory Page Types . 29Page Classifications Spreadsheet . 31Page Templates . 33Components Page . 36Expected Workflow . 373.5The Page Shell . 38The Top Navigation Bar. 39The Favorites Bar . 413.6Backend Development . 44ReSTful APIs . 45Database Implementation . 474Results . 485Future Work . 495.1Migration to Sputnik . 495.2Dashboards. 49Appendix I: User Interview Notes . 52Appendix II: Supervisory Usage Survey. 57Appendix III: Expected Workflow for Future Developers . 64Appendix IV: Default Favorite Lists by Department . 65Business Development . 65Account Maintenance . 65Reports . 66USPS Reps Reports . 69Finance . 69

Account Maintenance . 69Reports . 70USPS Reps Reports . 73Marketing . 73Account Maintenance . 73Reports . 74USPS Reps Reports . 77Research & Development . 77Account Maintenance . 77Reports . 78USPS Reps Reports . 81IT Department . 82Account Maintenance . 82Reports . 82USPS Reps Reports . 85Sales . 85Account Maintenance . 85Reports . 86USPS Reps Reports . 89Technical Support . 89Account Maintenance . 89Reports . 90USPS Reps Reports . 93

Table of FiguresFigure 1 Example of using directives. 13Figure 2 Example of implementing two-way data binding . 14Figure 3 Output of the code. 15Figure 4 Example of binding data in a checkbox. 15Figure 5 Example of binding data in radio buttons . 15Figure 6 ASPX Syntax Example . 16Figure 7 Razor Syntax Example . 17Figure 8 Supervisory Main Page. 20Figure 9 Sputnik Main Page . 21Figure 10 Supervisory usage by department . 22Figure 11 Search Box Screen Shot 1 . 24Figure 12 Search Box Screen Shot 1 . 25Figure 13 Search Box Screen Shot 2 . 25Figure 14 Home Page Wireframe, Accordion Menu . 26Figure 15 Home Page Wireframe, Toggle Menus . 27Figure 16 Home Page Wireframe, Smart Search . 28Figure 17 Category Descriptions Page on the Sputnik Developer Hub. 31Figure 18 Page Type Spreadsheet Snippet. 32Figure 19 Form Template . 33Figure 20 Tabbed Menu Template . 34Figure 21 Data Table Template . 35Figure 22 Left Nav Template . 35Figure 23 Java Applet Template . 36Figure 24 Components Page . 37Figure 25 Expected Sputnik Developer Hub Workflow. 38Figure 26 Page Shell and Home Page Content . 39Figure 27 Site Map Open . 40Figure 28 Advanced Account Search Pane Open . 40Figure 29 Favorites Panel Open . 43Figure 30 Favorites Panel Closed . 43Figure 31 Favorites Panel With Edit Buttons Visible . 44

Figure 32 Favorites Drag to Reorder . 44Figure 33 Using API as part of the framework. . 45Figure 34 ReST Architecture . 46Figure 35. Repository Pattern . 47

Table of TablesTable 1 Relation between user behavior and department . 23Table 2 Count of click-through of each link group by department . 23Table 3 Assigning weights to survey results by department. . 42Table 4 API method names, descriptions, and parameters . 46

1 IntroductionIn any form of website or software design, it’s extremely important to consider users and howthey will be utilizing an application. Without accessibility and ease of use, users get confused, usabilityplummets, and ultimately a site or program can become useless. In recent years, UI and UX design hasbecome a big concern for companies because of this. Endicia, an online shipping label, stamp, andpostage vendor is no exception. Towards the beginning of their company, they built a CustomerRelationship Management (CRM) system called Supervisory. Through the years, new functionality wasadded to this CRM with no concern for design or structure of the site. It quickly became cl

Endicia developers as they create a new CRM called Sputnik. By interviewing users and examining usage logs of Supervisory, Endicia’s current, outdated RM, we also designed the layout for the Sputnik