Designing SignalFeed

Our team was to redesign the website for SignalFeed, a service that broadcasts trade signals. Trade signals are time sensitive opinions or positions on a particular market based off technical analysis. With SignalFeed, a user subscribes to known companies, trading educators or trading personalities and then receives the subscribed signals in their feed.

Initially we had a site directed towards the publishers explaining the benefits to them for signing up to create feeds. At the same time it also served as a location to download the SignalFeed desktop application and a place for users to browse and subscribe to feeds. The new site was more situated as a portal for the users themselves giving them prominence over the publishers.


Applied Concepts

Markerboard Co-design:

This project was soon after I had read “Lean UX” – a major concept that we used in this project was rapid marker prototyping to plan out the major sections of the site. It gave us a fuller and quicker idea of what we was required. I also noticed the difference in communication between me and the main developer Todd that this early co-ownership provided. We had two main sessions, one to flesh out the sign-up and account settings and one for the majority of the pages  for the site. We did this in way of flow charts on a markerboard.

For the most part the architecture of the site was decided so it was  a matter of organizing and ranking.

Afterwards, I documented all the screens by making markerboard drawings at a standard size. I brought these into into InVision to serve as an initial wire frame.

Form Design:

I referenced this article and incorporated the concepts whenever possible:

I particularly like the concept that a form is a conversation and not a series of orders. From this perspective you can make logical choices on the progression of the form as well as if a specific piece of information is required .  I also concentrated on including all the visual components that a form needs as outlined in this article.

Architecture hierarchy of the site based on the types of user:

We shifted the site towards the user of the site and application versus the publishers that we wanted to recruit to provide content. In this case, these were imaginary users, the perfect traders that did everything we thought he/she would do.

I identified and ranked the three major groups of people that would be coming to our site, the prospective customer, the SignalFeed user , and the publisher and ordered the information on the site accordingly.  In laying out what would be the hierarchy of the site the home page was now devoted to explain what the product was and how it would help the prospective subscriber but with a easy way to sign in if you are just passing through to your account.

Lastly the information, for a publisher was made less prominent. This was a relatively easy decision as no one had cold contacted use in regards to publishing. It was always through conversations between different people in the industry and them directly linking to the information.


New Tools

Wireframing Software: Balsamiq

Using Balsamic was a great asset to my process in terms of tools. During this project, after the Markerboard mock ups were uploaded into inVision and I set about the next stage of refinement  it was apparent how inefficient Photoshop was for this Lo-Fidelity step. Changing from style to style in the wire-flow is not conducive to only focusing on the content and Balsamiq helps alleviate this.

Prototyping Software: inVision

A Crop Meetup had a designer from Two Toasters show off how they used InVision and this seemed like a great way to communicate entire projects between the teams here and Texas. It helped immediately find steps we missed and the technicalities of actually navigating the mocked up site. It also gave us a greater idea of the scope of what was being made and how much time it would take. Again, getting as close as possible as fast as possible and then showing it helped to avoid miss-communication among the group on how elements actually worked together.

It did lose some of its power when you got to if/then situations (signed in but no CC on file/ versus one on file)

You can poke around on it here

Web Framework: Bootstrap

We opted to use a framework versus custom because:

  • It has responsive elements and while we didn’t implement a mobile first strategy we were aware that it would be used and viewed on other devices.
  • It was much quicker. Since the majority of the coding was relatively basic, from other projects, or Bootstrap made it easy. I was able to create the first 90% of the HTML and CSS myself before I handed it off to the developer. This did hit a snag with the store because it had to be transferred into a format that could be managed from a database.


What worked

  • The quickness/usefulness of marker to inVision can not be stated enough. Get as close as possible as soon as possible.
  • Balsamiq  and inVision have both become tools I use daily.
  • The developer and I were never more on the same page in my year and a half here. Our goal was the same and there was no version A in my head and version B in his.
  • Forms were designed and better for it.
  • I personally liked the secondary title and found it a way to improve understanding and humanize a page.

What what Didn’t Work

  • In the design we knew it had to plug into the web application side but it was not taken into account in the earliest mockups. Which lead to confusion on how to differentiate and cross back and forth between the two sides
  • The content on the site is not descriptive enough and would be better served with a better idea of who is visiting.
  • We did not understand how this product should be marketed.
  • After revisiting,  the log in screen has several issues that could be solved in better ways. The “Sign In” and “Register” section are less cumbersome when only shown one at a time.
  • We never took the time to become aware who is using this. It was just “traders”