Example Mobile Spec Sheet / Scope of Work

Whenever creating a new web, ott, wearable, or mobile application, you’ll eventually need to define a spec sheet that informs your design and engineering teams with what it is they need to build. To get here, and do so while removing as much product risk as possible, product concept goes through a product design phase, for which there is no substitute. The output of this is a series of documents; as follows they are:

Research & Insight, Persona Definition, User Journey Mapping, Landscape and Business Model Analysis, and finally culminating in a final Product Definition output and a Visual Information Architecture Doc.

This Visual Information Architecture (VIA) is what defines the state of the MVP and lays out a post-launch product roadmap. A representation of the VIA is in the below registration flow. It lays out all elements that live on a screen and their corresponding actions.

Visual Information Architecture - Product Design

Fundamentally this VIA is then converted into use cases that create a functional engineering spec document, its engineering architecture, and engineering framework that speeds up development time. If you don’t have either of these, the links here give you free access to SWARM’s resources.

Feel free to take this example spec sheet and use it. This mobile spec sheet/scope of work doc will help you define your mobile application conceptually and will be a lifesaver when approaching designers/developers for estimates. If you think we can improve on this in any way, please let us know in the comments, otherwise, enjoy, and please link back. 

Example App – iOS or Android Functional Spec

Tying this all into a new project, and a spec sheet, your goal when engaging a technology partner, should be to communicate to the best of your ability the vision and the design and technical lift of the product (application). This spec sheet serves to do that; however, you should consider it nothing more than a daft and know that as you walk through product definition elements will change.

Please feel free to take this example spec sheet and use it. This mobile spec sheet/scope of work doc helps you define your mobile application conceptually and is a lifesaver when approaching designers/developers for estimates. If you think we can improve on this in any way, please let us know in the comments, otherwise, enjoy, and please link back.

You can also access the functional spec here. This page was last updated Sept 7th 2018. 

Hacking together mobile apps using Twitter data store

At SWARM, an app design and development company in New York, we love to run experiments and try new things. Some of our experiments like the SWARM Weather Watch Face have even been featured in app stores like Google Play.So when defining PartyUP Player (PUP) into an MVP (minimum viable product), we came across an interesting problem while streamlining this new app. The user base was strongly divided into multiple defined categories. Namely, “casual gamers” and “hardcore gamers”. But, we figured it’d be fun to run an experiment to test the hardcore gamer’s level of engagement. All this, in as little time as possible.

Problem: Build a product that engages the hardcore gamer to post a LFG (looking for group)?

First: Competitive Intel – We looked at services like “Destiny LFG” that try and help pair gamers with each other via a long form list and we sought to identify what they were doing to drive user engagement, and what made them successful.Fundamentally, these services had the user fill out mandatory form fields (walling) before letting them post a LFG request, whereas others were relatively easy to use (frictionless).Second: Keyword Research – Then, in order to make our experiment easily findable we did a keyword density and SEOT (Search Engine Optimization Traffic) competition search, narrowing the prospective url down to lfger.com (Looking For GamER) for the product.

Once we had the domain, we threw up a quick landing page. Next, we went back to these services and identified those elements that the frictionless sites were doing best. We also analyzed each site’s architecture. As you would expect, each site relied on a database (db) to store and pull information. While db’s are great, their architecting can take considerable time so we decided to scrap that all together. Third: Hack and Build—We started looking into easily accessible services, that included the ability to store data. We also had an anonymous open source twitter app called SWARMsecret. Eureka!Send the form’s “POST” request to Twitter as a URL (see below).

How to Do It:

http://lfger.com/destiny/?region=Europe&platform=XBOX+One&level=23
&event=Crota%27s+End+-+Normal+%28Deathsingers%29&gamertag=Tres+Coole&
notes=I+want+to+shoot+stuff&time=1430843360"

All the data needed to build this app was stored in the URL that Twitter shortened.Serendipitously, this created a benefit to the user that we hand’t initially explored. Each LFG request was turned into a tweet containing a hash tag #LFG and #gameName. Sweet – Network effect!We then defined six popular games for Steam, Playstation and XBOX and built individual pages for each game tied to it’s own twitter account as a “datastore”.We slapped on a design layer, made it responsive(ish) and wrapped the whole thing in a WebView for Android, and iOS (we’re probably not going to publish these as they just weren’t that good).Total effort by two team members to roll LFGER.com – about 20 hours total. 

Conclusion:

Product wise, there are issues with LFGER. No information architecture (IA) led us to circle back time and again on decisions – adding and removing components.Starting this process with an IA and thinking through the product would have saved us hours in the end, meaning we could have rolled it quicker, it would have been more complete, and in all likelihood designed better.

Since there were no designers on this project, there was also no real UX or UI. This resulted in a product that felt sloppy and had no real or concise interaction feedback for the user. Because this is a web-app, it doesn’t have the same smoothness on mobile that there would be on native. Things like -webkit-overflow-scrolling and overflow-y:scroll were very buggy on iOS 8, but more on this later.The lack of IA fundamentally meant bugs upon bugs. Doing a proper IA workup in the beginning would have solved all this. The experiment shows just how important IA is.

Findings:

Nothing about what we did is production ready, but we still want to see if people will use it. If they do and it gathers traction we can then build something more stable. Test quick, fail fast.You can use twitter as a data store (ha!) albeit only for 2400 pieces of data a day (although special resections apply).Even though publications like the FT have great HTML5 mobile apps, developing for an optimal mobile performance you should go native. It solves a lot of issues still present in mobile browsers. Most importantly, before you start a project, do the IA, always do the IA. We’ll update with results here a few months after the launch.

Made in NY is now SWARM affiliated, and we couldn’t be happier

We are excited to announce that SWARM has been accepted to the Made in NY family, and are thrilled to be joining other leading digital businesses in supporting the continued digital growth of NYC.

As New Yorkers, we’ve always believed that incredible digital businesses can be established here, and the “Made in NY” initiative is a testament to those companies that relentlessly push forward the city’s digital fold. Digital NYC is who we have to thank. SWARM, a design and app development company based in New York, is now part of that team.

Check out what we have to say on all things tech here.

Best places for design inspiration resources and other generally cool things.

 

It’s no big secret that once in a while you need to look elsewhere to get out of the same old pattern. For those who may be looking for inspiration, for this I thought I’d share some of my favorite places to go to while trying to pass the winter doldrums and stay on top of my game. Check out some of these design inspiration resources:

One. Bored Panda

I love the imagery here, and the content they post is always beautiful and shareable. The site is also incredibly positive which helps wash those winter blues away. Also they have loads of posts with cats.

Two: Freebiesbug

Apps, icons, mockups, and free HTML website templates for all the inspiration and grabbing free stuff that can help.

Three: Tympanus’ Codrops

While I feel that the tympanus website has been getting a makeover for the better part of the past couple of years Codrops has provided a source of ongoing inspiration. Their JS experiments are great, and provide plenty of ideas.

Four: Muz.li

It is a browser plugin that displays selected news from the design and tech world. When it fitst came out it was great and a lot of the content that it presented was uh-mazing. Now however, I feel that’s it’s gone more the way of CSS Awards and similar sites that basically put anything up but you’ll still be able to find a gem here and there. I say install the plugin.

Five: ColourLovers

This is one of my favorite sites out there, I tend to go back to similar colors. ColourLovers lets me find new colors that act as jumping off points for a project.And then there’s obvi dribbbbbbble and behance. 🙂

Check out some more of our favorite stuff here.

Digital Marketing Fundamentals or: How to Plan Your Inbound Marketing Strategy

A while back we covered the marketing basics for startups. If you’re jumping into this checklist without first having defined your marketing fundamentals, we highly urge you to read the other post first. If you are already caught up, or just want to head straight to the digital marketing checklist then keep on reading. Here’s the guide on how to plan your Inbound Marketing Strategy:

Before you market, prepare to market

It’s incredibly important to have all your ducks in a row before you start marketing your brand or product. Things to consider are:

  • Build and allocate your marketing budget: how much can you spend, in terms of time, money and human capital resources.
  • Identify and Define KPIs: You need to define where you will look to draw customer insight.
  • Define customer segments: Pick your cohorts and what you will test.
  • Create a attribution model: What user actions will result to your desired outcome.
  • Build an end-to-end marketing plan: Even if it’s a 10-slide deck, it’s good to have your thoughts, plans and strategies down on paper.
  • Set up your marketing experiments: What are you going to test?
  • Track customer behavior: Run your experiments and execute your marketing plan.

 

Deploy & learn from your marketing activities

Deriving insight from data is incredibly important to understanding the efficacy of our marketing activities and optimizing them to drive any of our objectives and goals. When you start learning and optimizing, you should be mindful of the following:

  • Test, analyze and optimize user flow patterns:

    • How do your users move through your site or app. where are the entry points and exit points? Design and optimize this to achieve certain outcomes.
  • Test and optimize landing pages:

    • Landing pages are the gateways to your product and convey to the visitor the unique value your product brings. If you focus on more than one vertical, or have a product that is usable by many verticals then build vertical specific pages and see which work best.
  • Identify and rectify common design flaws:

    • In the event you didn’t do you IA (information architecture) right, or obtusely made your go button red, this is the time to fix that. You should always be on the lookout for design flaws that negatively impact your user experience and goals.
  • Define activation and retention processes & build metrics:

    • Create flows that users take along with triggers and value adds that will activate then retain them.
  • Identify processes to improve activations and retentions:

    • Chances are your initial assumptions may be off; you should consistently seek to optimize your activation and retentions.
  • Develop brand content strategy:

    • Good content is great, and likely a low friction way to share your url and associated product. Good content can be a great on-boarding tool and passively introduce your product to a wide range of interested folks.
  • Deploy key UX techniques to force congestion with goal exits:

    • Imagine congestion being the closed highway that has one way to exit. If you lead people to a certain action, chances are they’ll probably take it. UX can be a great way to do this.
  • Deploy an email marketing strategy & determine metrics to track campaign performance:

    • Your email marketing strategy should be timed, automated and meticulously executed without being annoying. There is still no better way to get in front of someone digitally than email, but it’s all about how you do it. You should figure this out with A/B email tests.
  • Analyze SEO:

    • If you offer something people search for, you should do your damnedest to be as close as possible to page 1 on Google as possible.
  • Create SEM if makes sense:

    • On the other hand, if you’re in a very crowded space (aside from asking yourself why?), it might make sense for you to invest into Search Engine Marketing.
  • Identify SM channels and see if influencer marketing makes sense:

    • There are a number of great ways to expose your brand on social media, be it through Twitter, Facebook, or Snapchat. Again, going about your SM is about proving content people want to see/read and want to share, and remember, Social Media Management does not have to take a lot of time. You can automate most of the low level stuff.

With that, you should be able to set a good marketing trajectory for your product and start reaping the rewards of your hard work. If you have any questions, please feel free to ask in the comments, and while this is brief, it’s meant to be an overview.