I did not discuss, fully, the designing process of the wireframe in Part II. In Part IV, we’re looking at how to design the Profile Page using the advice and tips from the previous post.
Step 1: Steam’s Design
This is how Steam designed their one ( May 2013).
You can’t see below, but what is there is a series of comments from the user or their friends. These hold a total of 6 comments, before moving to another page. Let’s digest what we can see. The bluer box contains user information: picture, name and short description. The ‘Level 8’ box on the right is a feature unique to Steam, which is based on various badges they’ve collected during their time.
The middle box contains the user’s gaming activity. This includes playing time, achievements earned, and other game information. This logs information up to 3 games at a time. On the right side contains extra information, such as groups, friends, games, screenshots and videos. Essentially, this is the player’s personal portfolio of their Steam career. Here is where their collection of items is stored.
You can just see the listing for groups just below. This denotes various groups the player has joined, up to 3 shown. Below that is another listing for friends, with up to 6 shown at any one time.
Step 2: Pen and Paper
That is the Profiles in a nutshell, and the challenge here is the transition to my own design. Firstly, because certain elements will be unique to Steam, these will not be included here. They include game information (because are academics going to play that much?!) and Badges, because ‘levels’ are not important here.
I felt it helpful (to me at least) to so a paper-pen sketch first. As a first iteration, I could then understand more of how things were going to work. I regret that annotations are hard writing here, but they are included in the picture..
Steam helpfully orders different sections so that they are more apparent. I will do the same. I decided to go with a two-tier leveling again. The upper half contains user information that they add themselves. The lower half contains information about their community activity, including friends added.
The challenge comprises of trying to figure out how the mechanics work. Do I have it so when a user clicks a button, it opens a new window, etc? Ideally, all I want to include is those elements that make it social enough so that people are able to collaborate with others. I try to follow the rules and keep things simplified.
Step 3: First Draft
The pen-paper sketch is only half the story. Translating this into Lumzy will be a further challenge, yet also an opportunity to test things online.
So far this is what I have wireframed. This is similar in design to Steam’s and my pen-paper sketch, but without the clutter of annotations. Perhaps I will even keep this design. Again, I’ve kept it two-tiered, with the upper level the user information, and the lower community information.
The box on the left denotes the user’s specific content, such as videos or ongoing projects. The right box contains the user’s community information, such as friends. Those two are kept separate to allow better differentiation. The space in-between is where the posts will feature. I still haven’t quite come to a decision about how these will be stacked. I can choose to have them as a never-ending scroll (like Facebook), or have a max number at once before shifting to another page (like Steam). The frequency of the posts will depend on how often the user and/or others post themselves.
Each text will be a clickable link, which refreshes into a new page. I find that is the tried-and-tested method of web design, since that it is commonly used. Anyway, I want to keep is relatively easy to use and simple. Creating a profile should not be a complicated process.
Step 4: Second Draft
Having prepared a first version in Lumzy, I have to look at it and think areas of improvement. I designed the first version to make user interactions as simple as possible, but there were a few things I could still do.
This is the second version, of which there is little change. Mainly what I did was reshape certain elements to be more standard, as well as adding more fuller search options at the top. I also decided that for comments, I would order them using the next page options, which is below. Having a continuous scroll of comments would seem too laborious. Whilst having next page is not ideal either, I felt that comments could be controlled better be regulating how many are shown.
Unfortunately, Lumzy did not have the tools which would allow me to test how the user would interact. For instance, I couldn’t see how new comments would be posted; how users would navigate their content portfolios. I suppose there’s one good thing though; that having a design to show for is a step forward.
I’m not sure what else I can do here. I have a design that I am happy with.