to-Planet Logo

TextOrbit

Branding and UX/UI

Overview

TextOrbit was an idea I had while building out campaigns for some of the largest companies in the Fortune 500 list. The projects we built were all different but were all based around the incredible connecting power built into SMS marketing. I wanted to bring this amazing value to smaller personal projects, but the high cost of entry made it impossible. I estimated I would need about $2500 in monthly subscriptions plus the cost of sending each message (about to .003¢ per message) before any projects could be begun. I looked for another solution.

This eventually led to me repurposing an existing technology to create even more personalized vanity short-codes. I hired a developer friend to build out the MVP app that I prototyped, and we have been working on it in our spare time. 

Hats Worn

⛈   Concepting

🗺   Wireframing

💬   Copywriting

♻️   Prototyping

👂🏽   UX research

🔸   Animation

📢   Visual design

Project Definition

The world of possibilities got very scary very fast. There were so many features we wanted to add, and so much value we could design. To prevent the project from dying before we were even launched, I defined a very basic MVP. The first version of the web app would be able to create autoresponders that when triggered would send a preprogrammed message as the reply. The history of the interaction would be logged and this information would be available via a web kiosk. To document what features would be available in the first versions I wrote out the list of features in a Sentence outline format, with each line item being a screen or series of screens.

textorbit-outline

UX Definition

Here are a few snippets of a digital notebook I kept during the project definition process. In addition to highlighting the development of the wireframes it shows the process developed to determine what needed to be included in the UX.

 

Click one of the screenshots to see an expanded view.

Wireframe

The sentence outline I then used to sketch up some initial screens of the app. I used a 'mobile first' approach to help prevent feature creep and help focus the pages. This sketch I then transferred into a digital wireframe in Adobe XD. It was a surreal experience to be building something that needed only my approval. Having it just the way I wanted was something that could happen. This did not however prevent me from getting feedback not only from development but also several colleagues in the industry. 

textOrbit-wireframes

Prototype

Once we were happy with the layout of the app the problem of skinning the interface became a concern. We hadn’t yet decided on the specific branding we wanted this project to follow. Based on our research we knew we wanted to feature the color blue but that was as far as we were. To prevent rework and to give us a leg up I decided to use the Bootstrap framework. This simplified the process from translating the wireframes into a prototype as the UI elements were already defined. We planned to update the SASS at a later point to customize the experience. 

textOrbit-Prototype

User Testing

The tests we performed after wire-framing were repeated to make sure that UI was still functional and easily understood. Except for some minor spacing, and ordering changes the app proceeded smoothly from wireframe to prototype.

TextOrbit UX Design

Development

TextOrbit is currently in development and is hoped to be available to the public by the end of 2018. We have completed two sprints (our sprints are greatly spread out as our resources to put into this project are very limited) and are working on a third which almost doubles the capabilities originally defined in our MVP. 

See the Prototype

The prototype we are using for development is linked below - go ahead! Try it out.

 

If you see something you like, or don't like, let us know in the comments below! (Free testing/validation! 😉 )

Leave a Comment