Project Preview

Visual Studio Industry Partner Portal

Intro

As a Web Design and Development consultant at Cadence Preferred I work quite a bit with groups at Microsoft. Currently I’m working with the Microsoft System Center Alliance Team with occasional maintenance and other requests, and the Microsoft Visual Studio Industry Partner Team.

When I started working with the Microsoft VSIP team, their site was built around Sharepoint. It had been developed over several years and by several different development teams. As such, the site had several strange bugs and functioned in non-intuitive ways. In December, I started developing VSIP 2.0. The idea was to start fresh and make things work the way the team needed them to rather than making the team have to jump through hoops to get things done.

Design

Since the original VSIP website was made, Microsoft has made a huge shift in design to their new “Metro” design language. While the old site included some “Metro” elements on the homepage, I wanted to make the whole site consistent with Microsoft’s new design style. To get inspired I looked at the new microsoft.com as well as the new visualstudio.com design. Both featured a responsive design that focused on the content, bold colors, and large imagery.

After getting inspired I prepared a several wireframes to outline the central parts of the website. Since I wanted the site to be responsive I started with mobile first and then adjusted content as screen real-estate increased. After getting the wireframes approved, I put together a high fidelity mockup of the homepage and the about page using HTML and CSS. After getting the go ahead from the team on the design, I started developing the site in Mid-December.

Development

After finalizing the design, I was ready to move into the development phase. Using the latest version of ASP.Net MVC, I started building out the VSIP 2.0 site. Having never started a project from scratch with ASP.Net MVC, it was really enjoyable and I loved the structure. The first step was to get Microsoft’s Live ID integrated. Normally this would be an easy OAuth integration, but since it’s a Microsoft site, we had to use Microsoft’s RPS server. After getting it all setup on my development machine (kind of a pain), I worked on integrating it into the login structure of ASP.Net MVC and SimpleMembership.

After a day or two of getting all those kinks worked out, I started building out the skeleton of the website. Once I was happy with the structure of my HTML I started fleshing it out with CSS. Unsatisfied with all of the responsive CSS grid frameworks that I tested, I ended up creating my own fluid responsive grid system. Once that was made, things started to come together nicely. By using Stylus with a CSS preprocessor program and LiveReload, I was able to whip together the design I wanted quickly with cross browser support.

Once I was happy with the CSS, I started defining all of the data models that would need to be used in the site. Using Entity Framework’s design first approach, implementing these models was a breeze. After getting my models setup, it was just a matter of creating the views and controllers for the pages I had defined in my wireframes and building out the requested functionality.

To control code iterations, I used a local Git repository. When we were ready to start doing public tests, I setup a folder in Dropbox and pulled the code from my git repository. On the testing server, I then set it up to serve files out of that specific Dropbox folder. By setting it up that way, to send code to the testing server, all I had to do was pull the latest code into that folder in my Dropbox on my local development machine and Dropbox would sync the code on the testing server. It was really convenient and kept me very organized.

Challenges

After finishing the wireframes, I was fairly confident that we would have the site done and ready by Mid-January. However, after the first review, while talking more with the VSIP Team, I realized that we hadn’t adequately reviewed the wireframes and there was quite a bit more to the site than I had anticipated. After another month of development and review we were ready to work on importing data from the old Sharepoint site.

Importing data from the old Sharepoint website was a big challenge because with over 70 lists and one list that contained 100+ columns, it was a complicated beast. After looking through the old website I was able to identify which lists were still in use and which ones were just there from past systems. After that I had to figure out how to get all of the data out of the lists and into CSV files. After quite a bit of trial and error, I developed a PowerShell script went through each list and wrote all of it’s data to a CSV file. Once I had all of the data in CSV format, I pulled it into MS SQL so that I could work with the data easier. I then created a program that used Entity Framework to connect to the legacy data and map it appropriately to the new database. Unfortunately, the old data hadn’t been maintained very well over the years and several required columns were missing information. To figure out what to do in those cases I met with the VSIP Program team and they either fixed the data or we decided on standard information to use in those cases. After 2-3 weeks of working with the data, we had everything into the new site and ready to go.

Final Product

The new VSIP site went Live mid-March. Already several partners have commented on how much easier the site is to use. The VSIP Program Managers have also commented on how nice it is to have so many of the task they did manually in the past be automated now with the new system.

Overall the project has been a huge success and we are already making plans for additions to the new platform.

View the Site!