The heart (see what I did there?) of the first phase of the I Heart DNN site was all about telling us why you love DNN. A simple activity feed for you to share your love of DNN front and center. You hit the site, login with your preferred social media, and you're ready to tell the world how you feel. Since you have to be a user to share, we felt that having the login be tied to your social media account was the easiest, and lightest barrier to entry (for more about what we did there check out Brian's post).

So once you logged in, told the world how much DNN rocks your socks, now what? Well, we have other features cooking, but for the meantime why not fill out your profile? Assuming users will be curious and click around the site to learn about all these other like-minded DNN fans, you want to make sure that you have something for them to discover.

We wanted to treat your profile page as an "About Me" page, a hub with all of the information you want to share with the community. Our design was beyond what the simple templating in DNN’s default profile module provided, so we quickly reached the decision to build a custom profile module to give us complete control over the markup and functionality, which let us design to first for our community members, not technology constraints.

Your I ♥ DNN profile is automatically filled with some of the information from your social media account, like name, bio, and avatar (based on which login method you choose.) While some pull in more than others, We wanted to encourage users to fill out as much info as they please. There are three main areas designated for the profile: your bio, your company info, and ways to connect with you. We want your fellow community members to be able to find you wherever you go to brag about your DNN skills, be it on Codeplex or GitHub with awesome code, Flickr or Pinterest with shots of you at DNN events, or Twitter or LinkedIn shouting at all the world about DNN.

When we thought about designing the profile editing experience, we decided that the standard DNN profile editor got us 90% of the way there, and we could make some tweaks to it to give us the experience we wanted. Our design removed a lot of the noise of the the editor, removing the tabs and merging the account info and profile info into one manageable edit form. One of the main issues we ran into while making those changes was having to maintain both update buttons. We had hoped that one of the Update buttons would apply to the whole page, but unfortunately they only worked for one section or the other. The compromise of having both buttons on the page isn’t great, but it is something I can live with for the time being.

Another small wall I hit with styling the edit page was being able to group the form better. Since we have three main categories, I thought it would be beneficial to separate these into groups with headings, letting users digest this form one section at a time. Even though we can add custom profile properties to the form, there isn't a clear way to organize these into groups. I wanted to give folks a chance to focus on one section at a time (perhaps with expand & collapse). It definitely wasn't a total failure, just one of those wish items I had to make the page a little more custom, and easier for a user to digest from a glance. The good news here is that the good folks at DNN and I are on the same wavelength, and many of these changes (grouping, as well as removing the noisier tabs) are included in DNN 7.1!

With a splash of CSS, we were able to make use of a lot of the space on the profile editor, combating the starkness of module isolation, ensured that all of the elements lined up well, and presented a consistent display of each property. This little bit of cleanup served to give the page a bit more of a custom touch and less like an out-of-the-box DNN admin page. Knowing that our core audience will be seasoned DNN users, we wanted to make sure we set the bar high and see just how far we can customize the experience while keeping the interface intuitive.