Product walkthrough

The Opportunity

Strategic Inner Circle hired KDI to concept and design Dealslegend, a new application for creating online deals, with an easy to use editing tool, aimed at online vendors.

Our involvement included UI / UX design and development including wire-framing, UI design, branding, through to creating the working front-end code.

Our Approach

Strategic are based in Nashville, but we've never found distance to be an impediment to working with our clients. As always, we were able to work in a highly collaborative manner, communicating via email and conference calls.


At KDI, we practice an Agile methodology. However, we are not fanatical, preferring to follow the practices that make sense, and eschewing those that seem to be more about the process than the result.

One Agile methodology that we find to be very useful, is the creation of user stories: User stories are short, plain English descriptions of a user need and feature, with emphasis placed on the user. User stories are typically in the format:

As a [ type of user ] I want [ some user goal ] so that [ some reason ]

We find that user stories help to make sure we create features not because they are cool, impressive or flashy, or worse - because we saw it somewhere else - but rather because they answer a genuine user need.

Wireframe > Photoshop > Code

The user stories inform the scope of the project, which helps us to create a solid set of wireframes. In the case of Dealslegend, the wireframes also became an important part of the specification document, handed over to the dev team. For this reason, we made sure they included thorough annotations, giving as much detail as possible about every aspect of the functionality.

Dealslegend wireframe page
Dealslegend wireframe page

From the wireframes, it is our preference to go straight into code, rather than spending time designing in a program like Photoshop or Illustrator. These are great tools that we love to use for visual design, but these days, with the range of screen sizes that apps must display on, it makes more sense to go straight into code. The client was happy for us to use this approach, and the result was a tighter timeline and lower production cost, without sacrificing quality.



For the Dealslegend brand, we chose Hero, a simple geometric typeface. It's light and friendly (without being Comic Sans).

Dealslegend branding


The final deliverable included a detailed build specification document for Strategic's back-end development team, including recommendations on suggested development technologies. Since the front-end code is production ready, not merely a design prototype, the back-end development team will not need to rework the code, thus saving project cost and time.

Dealslegend admin page

More stories