We recently launched a new version of AgileThought.com, with an updated user experience and new service offerings. In this latest revision, we completely reworked the Azure structure, both internally and externally. I want to share an inside look at our tools and process.
Envisioning the New Site
The major chunk of effort to this redesign began with our internal user experience team working with our marketing team to build out wireframes. Our team used Invision to build these mockups and, more importantly, collaborate remotely. Team members were in different geographical areas, with different schedules, and did not have the luxury of full-time face-to-face collaboration. Invision allowed our team to rapidly prototype the user interface and collaborate through multiple revisions of different design ideas and patterns.
Our team took the user interface to the next level by also using Invision to collaboratively design high-fidelity mockups of what the new site would look like. Using Invision’s commenting features allowed our team members to share ideas and get input from the product owner on a near real-time basis.
Our Director of Marketing, Adam Wisniewski, who served as the product owner, said, “Working with a project team that is spread across the country can be difficult. We had team members in Illinois, Indiana and Florida. By leveraging Invision, we were able to easily view and comment on the designs as well as have organized dialog on even the most specific details. The contextual comments feature allowed us to spend less time on collecting and organizing feedback and more time getting the design and experience right.”
Building the Site
In the next stage, the team had to put the rubber to the road – turning these gorgeous pictures of software into actual working software in a robust content management tool. This meant adding developers to the team and getting a working solution started.
Framing out the site
Our developers used Visual Studio 2013 and started a completely greenfield effort, beginning with File | New Project. Working with the UX designers (who are fluent in modern web design with HTML/CSS), they crafted HTML based on Foundation, a responsive design framework. AgileThought.com was intended to be not just mobile-friendly, but touch-tablet and desktop-friendly as well. The team needed an easy-to-use framework to get going quickly, and Foundation fit the bill perfectly. The UX design team also used enquire.js for media queries, matchMedia.js for progressive enhancement, and IcoMoon for crisp icons.
As the HTML being created was integrated into the MVC solution, we began to create the reusable templates that would be used for content management. We focused on a very simple reusable pattern for a content item that covered a large set of our content types. This content item has three basic attributes: a title, a block of text and an image. This simple design was put into place to balance ease-of-use and flexibility for managing content. For example, there was not a suitable blog component available that leveraged MVC. This content item design allowed our team to very rapidly build a lightweight blogging component, purpose-built for exactly what was needed, using ASP.NET MVC.
Application Lifecycle Management
Our process framework for building custom software projects at AgileThought (and for our clients) is Scrum with elements of Extreme Programming, and this project was no different from others. We had a single identified product owner, a Scrum Master and a cross-functional team. The team delivered the final product that was shipped to production after 10 short sprints, and stakeholders were shown working software after every sprint.
Backlog, Iterations, Burndown
The product backlog, sprints and sprint backlogs (along with source code and build automation), were managed using Team Foundation Server 2013. The team made extensive use of the product backlog and sprint task board features to have visibility of the work in progress.
The team used Team Foundation Server 2013’s build automation engine for both continuous integration builds, which exercised code analysis and automated unit and integration tests, and for automated deployments to the test environment, which is located on-premises. The team also used Team Development as a part of the process to continuously integrate code and content changes. Using these tools, the team could have an updated test environment ready for review by the product owner in four minutes from the time code changes were checked into Team Foundation Server 2013. This rapid delivery model helped ensure that the team was responsive to change and had quick turnarounds to validate new features.
The production site runs in Microsoft Azure, and the team controls deployment to that environment much more closely, especially now that the site is live. The team uses the Azure deployment features to push site changes from the test environment to the Azure site.
To build a scalable, responsible, content-rich web site it takes more than just an HTML editor. It takes a world-class content management platform, the best cloud platform available (Microsoft Azure), robust design and development tools (Invision and Visual Studio), a delivery platform to tie it all together (Microsoft Team Foundation Server 2013), and a top-notch team of professionals. Hopefully, this gives you an idea of what kind of efforts are needed to pull off a project such as this one. The team spent a few months total on this effort, and the results are well worth it. The new agilethought.com is scalable, secure and easy to manage. The feedback on the new design has been overwhelmingly positive, and the investment in building the solution the right way, with the right people, will pay off for years to come.