personal

What Is Really The Redesign Of Spot.Us?

150 150 eriks

As most of you have noticed Spot.Us now has a very different look. The main objective of the re-design has been to simplify as well as strengthen the concept of Spot.Us. The mantra for this re-design has been consistency, consistency and consistency.

We started to think about the redesign back in November. David and I attended NewsFoo in Phoenix, and after the camp we drew out the first versions of the re-design on some pieces of paper on the floor of the Walter Cronkite Center School of Journalism and Mass Communication the University of Arizona. The core of those drawing was simplicity and brevity for the pitch page. The old design felt heavy, intimidating and cluttered.

Generally, the old design was inefficient for a number of reasons and did a poor job guiding users through the process, and failed to inform new users of what Spot.Us was. I will cover a few things we identified and how we resolved these issues in the re-design. These are in no particular order of priority.

Key Issue: Inconsistent Visual Design

Inconsistency in both the visual design and user experience was a major issue. We spent a great deal of time to define the proper experience for our users by making sure all screens consistently presented the same key information. Example: Prior to the re-design the buttons for donating and applying did not have a consistent logic throughout the site. They also contained a slightly different look and feel throughout the site, which can be confusing for users.

Solution:

We addressed the inconsistency by completely re-working the underlying code for how we handle the layout of pages. We introduced a completely new way of handling and using Cascading Stylesheets (CSS), which is the technique we use to style the pages. The new model, which I call “Container Based Styling,” simplifies the code, the work with the code and also creates a flexibility Spot.Us previously did not have.

Container Based Styling allows us to move sections of HTML snippets, and the style will snap to its new position. It is an awesome approach, making the life of any designer much easier.

This new way of CSS makes the pages much more efficient to load and drastically decreases the size of the code and page. We have managed to shrink it by about 2/3 on average, including diminishing the number of files used and average number of lines inside.

Key Issue: Inconsistent User Experience

Any web page should have a consistent logic for a particular action regardless of where on the site you enter that action. One of our main concerns was to consistently give a path users take when they are required to login to perform a certain task.

Solution:

For any action we use only a single template or function to ensure a consistent user experience. This ensures the user experiences the same layouts as well as feedback for their actions. For instance, users will always be brought to a login screen by a page reload. The old AJAX popups are gone and we have eliminated all duplication of the logic.

Key Issue: Inconsistent Use Of Language

Spot.Us introduced new concepts to the market. Yet, throughout the site in the former design the language, as well as the url structure, was confusing. Some examples are: pitches, stories, posts, pledges, tips, etc. To create a pitch was denoted as “create a pitch” in some areas and “story” in other areas. In one case, it was missing completely: The browse page only referred to stories as “funded,” “unfunded” and “published.”

Solution:

For any action we use only a single template or function to ensure a consistent user experience. This ensures the user experiences the same layouts as well as feedback for their actions. For instance, you will always be brought to a login screen by a page reload. The old AJAX popups are gone and we have eliminated all duplication of the logic.

Key Issue: Hidden Community

Without our donors Spot.Us is only a theoretical experiment. The community makes Spot.us possible. We’ve had a community page for more than a year, yet we did not highlight it at all on the landing page nor on the pitch page to the extent necessary.

Solution:

The main change, thus far, is to add “Community” as a tab on the main landing page. We are aware this is not near enough. We would like to highlight it better. Hence, we are continuously working on elevating our donors, sponsors, reporters and news organizations better to give them the recognition they deserve.

Key Issue: Pitch Page Ecosystem Was Cluttered, Bloated And Heavy To Digest

This was our main driving force for this re-design, as it is the most central page on Spot.Us. This is the page where donors arrive to start their donations and read story updates. The former page did a poor job explaining the core action was to donate, as the buttons were much smaller. The page felt heavy, intimidating and overwhelming.

Solution:

The current Pitch Page is completely new. It is designed to help both the reporter and donor to engage with each other.

The core idea is to make the donation process simple and clear. We wanted to make sure that every step to and from the Pitch Page felt natural and intuitive. We spent a great deal of time to make sure the user felt guided through the process from the list view of pitches, to the Pitch Page, to the details of the pitch. We wanted to empower users to explore the parts of pitches they wanted and always have the ability to donate at any position. The focus was to condense and distribute, making the content more digestible.

The main structural changes of the Pitch Page are:

  1. Add tabs to the top of the page
  2. Decrease amount of text shown on the main pitch page by introducing an excerpt
  3. Increase the size of the donate buttons, yet preserve the style in the list view
  4. The published story is now tied to the pitch

The new Pitch Page is very different from before and there are a lot of subtle differences. We have even changed the admin menu to make it more robust — simple and flexible for reporters, editors and admins. Basically the new version is awesome!

Key Issue: Too Much Information, Yet Not Enough

One of the challenges for any organization is to balance the amount of information you give without overwhelming. For instance, the form labels were, in general, too verbatim and cluttered the form. That made it slow to digest for many reporters. At the same time, we did a poor job in explaining the purpose and effects of Spot.Us.

Solution:

We resolved this issue in two different ways: simplifying the language and url structure, as well as introducing a complete tool tip framework.

Throughout the site users will see hover effects in some areas explaining the meaning of a button, an icon or a label. For instance, the “free credits” button has a hover to explain what “free credits” mean, and some of the forms now have a little question mark icon that further explain what the label and form elements are. We will roll out more of these tool tips through the site to help our users understand what each element does.

Key Issue: Our Google Search Widget Didn’t Adequately Help Our Users

Previously we used Google to provide search capabilities to our community. The disadvantages were: it was not instant, it was not simple, and it failed to allow for a more advanced search functionality.

Solution:

Sphinx is a simple off-the-shelf search engine that has a very nice and tight integration with Ruby on Rails. When you search on Spot.Us now you will see the same layouts as the rest of the pages. This functionality will allow us to show related pitches easily using this simple search engine.

Key Issue: Poor Performance, Slow Load Times, Etc

When I joined Spot.Us, the performance of the site was a main concern for me. Site performance is one of the most common design mistakes.

Solution:

I have continuously added improvements to ensure faster page load times. With the new re-design, the countermeasures implemented have allowed us to drastically improve the performance of the site.

Conclusion

The new re-design of Spot.Us is a big step towards a much better frame for the concept. We’re always working to improve the site and the experience of the users, so we will continue to modify the layouts according to the feedback of our community and supporters.

I do want to specifically give huge thanks to Lauren Rabaino. Lauren has been amazing throughout the process of re-shaping Spot.Us. I really do appreciate her openness and strife to endure the intense design work we carried out. I threw an entire new concept of CSS layouting at Lauren and she embraced it. I also pushed hard to get the consistency and structure in place.

Thank you Lauren, for being so willing to learn and grow through the process.

Finally, do let me know if you would like to see a specific feature implemented or if you have questions or concerns about the site.

This blog post was also posted here: http://blog.spot.us/2011/02/12/what-is-really-the-redesign-of-spot-us/

Blogging over the ocean – Part II

150 150 eriks

I am now over the same ocean, but in another direction transiting home to Sweden to meet my family after ten amazing days. Ten days that has taught me so much. Ten days with incredible experiences and companionship. Ten days of peace, happiness, and excitement. It has truly been an incredible and wonderful time. All thanks to the dearest person to me.

The trip has very much proven to me where I want to be and why. These ten days have amazed me in so many ways. So many impressions. They have shown me what really matters and ultimately guided me into the path I probably already knew in my heart is right, but in some ways was afraid to pursue. How that path can become reality is another problem however, but time will tell how that will happen.

I am sad to leave. I wish I could stay. I have many reasons why, but I will not go into details. Yet primarily it is one reason. I do believe the place and company are right. It is right on all levels.

I have mixed feelings flying here over the ocean. Part of me just wanted to stay, and part of me look forward to see my family. It has been a long time since I last saw them.

One thing is for sure. It felt and feels empty leaving… It felt like home to the soul.

Blogging over the ocean – Part I

150 150 eriks

(I wrote this blog 10 days ago and didn’t get a chance to post it. However I still do think it fulfills a value.)

I am right now at 38,000 feet over the ocean. Flying over an ocean I have never ever been over. My destination is a place at which I have never been. Never been… Never been in so many ways. My destination is not only a completely new country and environment for me, but it is also a completely new experience on so many levels.

My feelings are very much a combination of delight, excitement, anticipation and curiosity. All weaved together into sincere and profound happiness.

The decision was made a few weeks back, when I woke up with a very clear mind that this is what I should do. A few friends have asked my why I chose this path, yet they know me. This is the trip for me at this time with this iternary.

Parts of my trip will have some direct meaning for what I do daily but predominantly the trip will guide me in ways I cannot foresee other than I know this is the experience I need to have now. Not because of a lack, but as a foundation for growth.

Experiences are funny. They should be had, but never “constructed”, yet so many people try to construct or dictate their reality. Certain things cannot be changed and certainly not when they give us peace, happiness and joy. You always have to be honest to your soul even though it could complicate your life. In all honesty I too try to construct my reality, but it seems as the more I try to construct the experience after what I would like it to be the less it becomes that way. Part of me do feel the quest between mind and heart, but I do know my happiness resides in my heart and not mind.

I do believe that maybe this trip will teach me to listen in ways I haven’t been able or have before. What I will ultimately listen to, I don’t know. What I do know is that just knowing it will teach me to listen in new ways gives me a tickling feeling in my stomach.

A tickling, exciting feeling. I love it.

See Solutions, Not Problems

150 150 eriks

A reflection after the RemakeCamp yesterday at which I spoke. For me the key is to refocus the media arena to understand that it is about the community, the society which the media should serve. Any media – in particular news media – is there to serve and give voice to the community in various aspects – jobs, classified, entertainment, information, education, but probably the most important part as the 4th governing power controlling the other governing powers. The power which should give voice to the ones in need – whether this voice is channeled through a journalist or by themselves is not necessarily important. What is import is the room for their expression of it. The challenge moving forward is to make sure these voices are diverse, free and expressionate. The channels at which these are heard should be diverse, yet they should be kept sane, on-point, human and compassionate.

Ultimately, media should refocus into a dialogue fostering aspect and leave the broadcasting approach behind.

The key is to once and for all move away from seeing the problems and see solutions. The challenges are issue will always be there, and there will be new ones. What we always need to focus on solutions and how to move forward. The steps might not be long. They might be small. But they will be a step towards a change. A step back to the roots of journalism – the humble and dedicated servant of the community and its needs. The servant can either be a journalist or a citizen, and we need the tools for it.

Yesterday at ReMakeCamp it was a discussion about trust. Instead of focusing on how we can provide guidance for the consumers whether it is to trust the journalists, provide channels for them, provide funding or “simply” giving the tools to see if other citizens tell the truth or are juste for what they are covering it ended up being a discussion focused on all the problems we have. That is a very unfruitful discussion that leads nowhere. I think the key for me is that I have the ability to find solutions by listening to the needs and try my best to eliminate myself as much as possible from the projects over time. Only then will we start to walk a path towards change.

Now imagine we start to constantly stepping towards bringing such tools that allows anyone to provide their voice and open up for a dialogue. I think the key for myself and the work that I have done is to show that that the obstacles are not there if we don’t want them to be. It is easier to hind behind an obstacle and hide from it instead of moving around it and get going. It is the perfect excuse not to do anything. We should move around obstacles and as technologists we should constantly strive for not being a needed constant in it.