Digital Thoughts @ Wesstyware

This post is part three of a series posts covering my progress on the Zany Video Games Quotes (www.zanyvgquotes.com) project. For the full story about the project so far, check out the other posts in the series or the project page for an overview of the project:

• Project Kickoff

It has been a while since I have posted. A lot has happened since I was in Vancouver for the Winter Olympics, and I thought I would start with the progress that I have made with the ZVGQ project. So, here goes.

SketchFlow Version 0.1 Complete

I know that version 0.1 sounds less than impressive, but keep in mind that once the SketchFlow is “complete” (i.e. version 1.0) we will have a complete skeleton of the new ZVGQ site. In any case, I managed to complete the first iteration of the prototype for the new ZVGQ and went over it with Kev. I have posted it on my site here (requires Silverlight 3), and you are more than welcome to check it out. Right now, the pages are placeholders but the main thing this prototype covers is the way users will navigate through the site.

Once complete, I went met up with Kev to go over the prototype to get a couple of things clearly defined about the project itself:

• Confirmation of the vision for the application.
• The definition of success.
• Basic flow for the site by defining how users will navigate through the application.

Vision and Success?

I realize that you might be wondering about the first two items on the list above, but let me explain. While working with David Alpert, I have had many conversations about vision and the definition of success for software project and the importance of having those pieces properly defined. If your stakeholders agree to a definition of their vision and what they see as “success” for the project, then you always have clear way of making decisions about the project itself. With a clear vision and success defined, developers and project managers are able to make decisions about the direction of the project and how to use available resources properly.

So, how does that relate to the prototype? Well, it doesn’t really. At least not directly.

I have worked with Kev on trying to define both the vision and success for the project through many conversations or “requirements gathering sessions” as some would call them. The problem was that after these conversations, I never felt as though I had a clear understanding of vision and success for the new ZVGQ site. This is mainly due to the fact that, I couldn’t guarantee that the experience that I envision for the site is the same as the one that Kev envisions.

With the prototype, I could show Kev what I was thinking for the site and he could actually play around with it. The SketchFlow also enabled me to explain to Kev my reasons for designing the header as I did. Since my decisions were based on the understanding I had about the vision and success for the project, I was able to confirm that Kev and I were on the same page and shared the same vision for the future of the site, along with the definition for success.

Prototype Feedback

On top of ensuring I had the project vision and definition for success defined, we discussed the navigation for the site. Kev had a few comments about the ensuring that the large navigation buttons were kept the same. What does that mean? It means that the random button that I currently have will be made into one of the hyperlink buttons at the top, and liked having all the letters up at the top rather than in the corner. One thing he did notice was that the “NEW” button that is on the current site with the letters is not in my prototype.

The points that Kev mentioned will be added to the header, and it shouldn’t take longer than about 15 minutes. Then I can move onto page layout, which will help in the next step: database design.

Next Step: The Database

I realize that SketchFlow has nothing to do with database design, but it can definitely help with identifying what needs to be stored in the database. I started work on this not long ago, and kept on having to go back to Kev for details about what he expected to display.

I realized quickly that it was my job to tell Kev what he wanted to display and ask him if there is anything else. This is where SketchFlow comes into play.

If you check out a game on the current site, you will see that the majority of the data is quotes, games, and pictures of the quote in the game. Considering that we can do far more than this, I want to show Kev the data we can display to his visitors, not just talk about it.

Ultimately, the next steps for the SketchFlow and I is to build a page that will display a game and add it to the prototype. The link above shows Final Fantasy 2 for the Super Nintendo, and I plan on recreating that page in the prototype. This will give both of us reference point that we can use to compare the future site with the current one.

Conclusion

At the end of the day, the SketchFlow is going to be a very useful tool for requirements gathering on all fronts. The SketchFlow works because it allows me to show the stakeholders how I have interpreted their vision and demonstrate how I believe my design fits with their definition for success.

As we move forward with the project, the SketchFlow will slowly become more complete and we will have a skeleton of what we will be builiding over the course of the next year.

Catch you on the flip side.

Digital Thoughts Cast Member: David Alpert

My work and growth in software development would be impossible without a strong supporting cast. With that, I want to introduce you to the latest addition to the Digital Thoughts cast: David Alpert.

David Alpert (blog.spinthemoose.com) is a Web Developer and Interaction Designer at Anvil Digital and one of the creators of bundl.it. I have found that David is strong with the Force called user experience development/design, and is considered something of a UX Jedi in my books.

Update

Since writing this post, I have updated the SketchFlow for ZVGQ online. It appears that if you are viewing the SketchFlow in Google Chrome, you might have to clear your cache before it will update. I am not sure if there is a remedy to this problem, but I will do some research and see if anything is out there.

With that, if someone knows something about this issue (or if it was just me), please comment and let me know.

Wednesday was the last day for the Tech Days 2009 tour hosted by Microsoft. This year, they decided to put on the full two day show for Winnipeg, and something was different this year. Something was better. That something better can be explained with the following formula.

Be warned that if you do not have some kind of training with formal mathematics, this may blow…your…mind.

The big difference about Tech Days this year was that the Wessty wasn’t just an attendee, but a presenter. I took part in two presentations over the course of the two days. The first day, I worked with Miguel Carrasco on the presentation entitled Expression Blend for Developers (with Miguel Carrasco). The second day, I presented Building RESTful Services in WCF on my own.

Expression Blend for Developers

As you may have noticed, the topics of my two presentations were very different. The first one was about my bread and butter, that being Expression Blend 3. Considering that I am something of a User Experience person, this topic was right up my alley. Miguel started off the presentation by introducing the software and explaining how it can be useful to developers.

My work in the presentation involved demonstrating how a developer can use Expression Blend in their work. I started out by demonstrating how to use SketchFlow with WPF and giving people a quick run down on its capabilities.This was followed up by implementing the front-end of the SketchFlow application using Blend and seeing how the new features in the software can help me build something that not only works, but looks good too.

I very much enjoy the Expression Suite of software. For more details, check out the Expression website.

Building RESTful Service with WCF

The second presentation discussed how developers can use WCF to implement RESTful services. At a glance, you might thing that a UX developer has no place presenting this topic, but that is where you would be wrong.

My roots are with .NET 3.0 and 3.5, which includes the project formerly known as Indigo (a.k.a. WCF). I have always loved WCF for its simplicity to get working and have a flexible communications layer in my application, without having to write any complex communications code. Unfortunately, this fantastic tool is only fantastic thanks to the tooling that has been provided with Microsoft. It sets up everything for the developer, without the dev actually knowing what is happening under the covers.

SOAP (which is the protocol used to send and receive messages in WCF) is quite complex, specifically with the protocol that must be followed on both the client and server to get it working. A service implemented with a RESTful architecture demonstrate a refreshingly easy way to implement a communications layer using nothing more regular web protocols.

For more information about this, check out the MSDN and get started.

Conclusion

This was a very enriching experience, and I would recommend anyone dealing with Microsoft technologies to considering coming out to the next one or checking out any of the other .NET development events happening in your area.

If you have any questions, feel free to drop me a line on here or drop me an email.

Oh, and I will be posting some photos sooner than later. I just need to get them organized. Until then…

Catch you on the flip side.

Related Resources

Here are some other findings on the web that discuss Tech Days 2009. Check them out!

• D’Arcy Lussier Blog Post
• Canadian Developer Connection – Joey Devilla (a.k.a. Dude with the accordion)
• D’Arcy Lussier’s thoughts….

It has been quite a while since I have been able to blog about anything as I’ve been working exceptionally hard on my project at ANVIL as we are going live on Tuesday morning. As things seem to be moving smoothly, I have decided to take some time this weekend to report on something that has captivated my attention. That something is Microsoft Expression Studio 3.

A Brief Introduction

Expression Studio is a suite of applications that have been development by Microsoft for designers as opposed to developers. Over the past few weeks, Microsoft has officially released the third version of this suite of applications that include the following:

• Expression Blend 3 with SketchFlow
• Expression Web 3 with SuperPreview
• Expression Design 3
• Expression Encoder 3

I could go off and give you a detailed explanation of each application, but with its release the Expression Team has updated the Expression site and there you can find a slew of resources and explanations about all of the applications. I strongly suggest heading to the site and checking out the resources available and trying some of the applications.

My purpose for blogging today is specifically for Expression Design, the drawing software that is provided by Microsoft with Expression Blend and Web.

Why Expression Design and Not Photoshop?

This question goes back to me learning how to use designer/drawing software. Being in the UI/UX field, occasionally you need to work with image files. If you work with designers, like I do at ANVIL, then then you “obviously” need to learn Photoshop. Here’s the thing: the work I need to do with the images I get from the designers are simple edits and Photoshop provides far more functionality than I need. So, why would I go off and learn how to use this software if I don’t need it?

Well, that need came up a while ago. I have a couple of personal projects that I want to work on, but as they require some design work to create some web graphics for the project. I had learned to use the GIMP to do my minor edits, but I never really felt fully comfortable when creating graphics, not to say that it can’t live up to my expectations. I suppose the real issue is me spending the time to learn how to use the GIMP to create the design that I want.

At this point I took some time to take a look at Photoshop. I played around with it, found some resources, and talked to the Designer about it as every designer I have spoken to as said that Photoshop is pretty much the industry standard for creating UI designs. Well, if I wasn’t comfortable learning and working in the GIMP, why would I want to learn how to use a whole new application with which I have no foundation? This lead me to take a look at Expression Design.

I have worked in Silverlight and WPF since both of their releases in the past few years, and thus have worked with Expression Blend to get some of the desired UI effects. Expression Design looks and feels like Expression Blend, so I immediately felt comfortable with it. Plus, as luck may have it, Microsoft had decided to take it to the next level with version three and include with both Expression Blend and Web. In the end, the real question was: Why hadn’t I considered this earlier? I have to learn some sort of designer application, and Expression Design is able to import PSD files. Why not give it a shot?

And so I did.

The Result

With a potential side project coming my way with another friend of mine, and with my want to actually do something more with Wesstyware.com than just have it forward everyone to my blog, I started working with Expression Design 3 and this is what I came up with:

I realize that a designer can do much better than I, nor would I ever challenge a designer to some sort of web design face off. But for my intents and purposes, I think I have managed to create something pretty nifty that I can use for my website.

For the time being, I will be using Expression Design for my design needs as I’m sure that when I find its limitations, it will not be in the software, but more as my skill as a graphic designer. It is important to remember that although I live and breath in the realm of UI, I’m still a developer and not a designer. I think that Microsoft has definitely shown with the Expression Design along with the rest of the Expression Studio that the bridge between developers and designers can be bridged.

Catch you on the flip side.

Side Note: The Face

One quick note. The image you see of me in the top left corner was actually a birthday present from the Designer last year. He sent me a PNG a while back, and I have decided that for the time being that will be the official logo for Wesstyware. What better image to associate with my software ramblings and developments than a digital version of my face?