Last time I talked in very broad strokes about how we developed IP.Board 2.2, today I'm going to go into detail on exactly how the new profile system evolved from concept to the finished product you see today.
Our initial goal was to bring some of the social network concepts to the profile system, without going overboard and turning it into a myspace clone. This is a fine line we walk in adding any new feature, how do we make this useful without going to far? We knew that we didn't want to let users customize the CSS or HTML for their profile image, that introduces any number of security and other technical concerns. We thought about letting users move blocks around, to give them some amount of customization, but in the end that was dropped due to the time involved. Here's a portion of the spec we came up with this for this feature:
Enhancements to the profile screen to include:
- Option for user to add a short bio
- Ability for other users to add comments
- Greater integration with Blog/Gallery/DL Manager/Wiki if installed
- Options to turn off all new features if board admin does not want this type of layout
- Multiple personal photos
- Enhance buddy/friends list and display along with profile view
- User ratings
Member list enhancement where you can search for a member in greater detail via custom fields and such.
From that basic spec, Rikki created this mock up:
This is generally how we work with a major feature, we create a rough outline of the features we want to include and then create a mock up to make sure everyone is on the same page. This mock up is quite a bit different from the final product, but you can see most of the elements of the final profile in it. A lot of things changed, the location of the profile picture for example. While this design looks cleaner, it's also less flexible, what if the user wants larger images? With this mock up there isn't much room for that. Also the tabs are clearly different, while we liked these tabs, they did not really fit in with the overall design of IP.Board.
Here's an early shot of the profile system actually running:
This has much more of the final functionality included, even if the design is not quite there yet. You can see that we've already changed how the profile picture looks, as well as how the tabs look. Another major change is that the comments are displayed below the main content area, rather than on the right where they eventually ended up. This change was made for a number of reasons, if the main content area had a lot of information, you'd have to scroll to find the comments and could easily miss them. So we moved them, but added a tab to the content area so that you could view them there if you want.
This screenshot shows a few more changes, you can see the options to edit gender, location, and birthday inline with the profile view. You can also now rate the user as well as see their gender icon next to their name in the visitors/comments/friends block. The options drop down was also added to the top right of the name block, although it would eventually move to the left hand menu.
And here's the final result: My Profile
Through the entire process our staff is constantly reviewing the latest build of the profile and making suggestions. We also brought our test group in around the second screenshot you see, they provided valuable feedback that helped a lot in shaping the final product. They were given a few different builds that included the profile, before we announced the feature to the general public.
Not everything that we wanted made it in to the final product, that happens with essentially every single feature. For example, multiple personal profile photos did not make it, even though we really wanted that. You have to know when to call it a day though, or you'll never be done. We decided that the particular feature did not offer enough of an improvement over what we already had with gallery integration, so it was dropped.
That was another important concept for this feature, we had a lot of user information out there via our various components. We wanted to pull all that data into a central location, to provide much tighter integration and a better overall flow to our products. We also wanted to give mod authors the ability to easily add their mods to the profile tabs.
So to wrap this up, we wanted to bring a fresh look to the profile and at the same time move IPB forward by bringing in social networking concepts where appropriate. I personally think we did a pretty good job of this and we all hope that you agree. If you have any questions or want more info, please ask and we'll do our best to answer.