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:
- Add tabs to the top of the page
- Decrease amount of text shown on the main pitch page by introducing an excerpt
- Increase the size of the donate buttons, yet preserve the style in the list view
- 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/
