Tyler Goelz
Front-End/UX @GiftStarter - Co-Founder @WriteOn - Former @WayUp (formerly Campus Job) - Bearded @OrganicBeardSup - Full-time traveler focused on work-life happiness.
A User Experience Foundation
(Click or slide down)
User Experience
(Click or slide down)
The Goal
Increase the User Experience to a level that is easy-to-use, highly integrable, and FUN. Simflofy will make data accessible by every skill level, from L33t to n00b.
Learning from the leading "user-centered design" brands, we will build an application that converts the art of working with data to an intuitive process.
Simflofy will be to data what MailChimp is to email marking, Simple to banking, Zapier to webhooks, and Duloingo to language learning.
(Click or slide right)
"User-Centered Design" Brands
(Click or slide right)
Simple
Zapier
Duolingo
MailChimp
More than 6 million people use MailChimp to create, send, and track email newsletters.
(Click or slide down)
MailChimp's Approach:
Before there was MailChimp, email marketing was a highly specialized position within companies. It wasn't just a part of a person's job description, but a job within itself.
MailChimp created an environment that was intuitive and their use of laymen terms and chimp-related humor left users feeling "at-ease" and ready to tackle a new platform.
(Click or slide down)
How Simflofy Will Utilize This:
Simflofy will encompass these same emotions throughout it's platform. An "open", "free-flowing" interface that allows a user to go from one action to another without feeling a sharp change of action.
Building an intuitive system will allow for non-techie, straightforward, humorous tutorials, demos, FAQs, and verbiage eliminating the intimidation of working with Big Data.
(Click or slide down)
Examples of MailChimp's
Awesome-Sauce:
(They've got quite a bit of it)
(Click or slide down)
"Send Better Email"
MailChimp has taken the idea of "Value Proposition" to a completely new level. Three simple words describe the whole platform, and well. The homepage evokes an open/clean emotion by showing a inviting, fun desk, while still promoting a quick, intuitive demo. (Click image to visit homepage)
Dashboard: Great use of white-space. Intuitive.
(Click or slide down)
Reports: Clear, precise, and important reports. Clearly labeled, no "hints" needed.
(Click or slide down)
Campaign Creation: Large, clearly labeled and described options. No confusion.
(Click or slide right)
BONUS CONTENT!
One of the best parts about MailChimp is their transparency to the public. They go as far to provide a public facing "Brand Assets" page allowing anybody to user their logos, brand colors (Hex provided) and screen shots. (Click image to visit)
(Click or slide right)
Simple is a completely online bank solution providing an intuitive way to save, spend and budget you money while eliminating unnecessary overhead & fees.
(Click or slide down)
Simple's Approach:
Simple approached a saturated market in a completely new angle. Founded in 2009, they've gotten the chance to reengineer the way people bank. By developing highly powerful, easy-to-use mobile and desktop platforms, they've eliminated the need for brick & mortar banks removing tons of overhead and fees.
Once you're request for invite is accepted (accounts are not widely open to public yet) users are welcomed with features not offered by any other banks.
Features include:
Goals, Reports, Block/Unblocking Card, and Safe-To-Spend
®
(Click or slide down)
How Simflofy Will Utilize This:
In the same sense that Simple has reengineered the way people can, and I believe will, look at banking, Simflofy will make Big Data simple. Simple takes something that could be considered a pain, like disputing a charge with your bank, and makes it easy with an in-app and online customer support channel that actually cares*.
Simflofy will attempt to take a new approach towards big data in a way no other company has. We will provide a toolset that solves the problems that have been only worked around up until now.
*I've contacted Simple support twice, both times through the Android app. I had a response from a REAL person within a half-hour (again through the app) and the topics in question resolved within two support ticket transactions.
(Click or slide down)
Examples of Simple's
Awesome-Sauce:
(They've got quite a bit of it, too)
(Click or slide down)
"The way banking should be"
Not quite three words, but still let's the view (most likely frustrated with another bank) know they've put thought into banking. Even to go as far to add "Banking, but awesome."
(Click or slide down)
"Effortless online checking"
Once again, showing a great example of what Simple is all about and provides. No need for excessive explanations, unless the user wants it. (Click image to view excessive explanations)
(Click or slide down)
Dashboard: Open, detailed transactions. Individual transaction view.
(Click or slide down)
Goals: Colorful & drag-and-drop. Mistakes don't feel like you've ruined anything.
(Click or slide down)
Reports: Doesn't take an accountant to understand or customize/personalize.
(Click or slide right)
BONUS CONTENT!
Although Simple is still invite only, they give members the ability to let ten friends "skip the line" and get invited quicker. I highly recommend Simple*.
If you would like skip the line and get invited to Simple quicker, shoot me an email and I'll forward you the link.
*I don't receive any kind of commission or prize for inviting people. I just really like this platform and would love to share it.
(Click or slide right)
Zapier has taken the highly technical task of connecting API' and made it point-and-shoot allowing nearly anybody to integrate an almost endless amount of systems quickly.
(Click or slide down)
Zapier's Approach:
A true plug-in-play platform, Zapier allows a user to connect a number of third-party apps to one another by simply selecting data-driven options from a set of drop downs.
Zapier has changed the way people build the web and granted the ability to do complex integrations to those who might not have been able to do them in the past.
(Click or slide down)
How Simflofy Will Utilize This:
Like Zapier, Simflofy will build something that has never been built before making big data easier for those familiar, and unfamiliar with current technologies.
Simflofy will make the currently difficult, siloed world of big data a little less scary and a thing of the past.
(Click or slide down)
Examples of Zapier's
Awesome-Sauce:
(They wouldn't be on this list if they didn't have it)
(Click or slide down)
"Connect and Automate..."
(Click or slide down)
Dashboard: Current Zaps, New Zaps, Only shows what is needed.
(Click or slide down)
New Zap: Data-driven, pre-filled drop downs and information
(Click or slide down)
Explore: Intuitive process from any angle.
(Click or slide right)
Duolingo has taken one of the most challenging things to do, learn a new language, and made an interactive, fun game of it.
(Click or slide down)
Duolingo's Approach:
Duolingo has taken something like learning a language, what sometimes seems like a burden, and made it fun and interactive. With a cartoon-ish feel and colorful style guide, the user feels like they're playing a game rather than learning.
The user can test their skills against their friends, or choose to learn alone and shoot for the highest achievements and badges.
(Click or slide down)
How Simflofy Will Utilize This:
Simflofy now has the opportunity to make big data fun. Although the world of big data might not be ready for gamification, that doesn't mean those interacting with it can't have fun.
Taking a page of Duolingo, Simflofy will take steps to help their users enjoy themselves while interacting with our app and data. Instead of thinking of data as a burden, they will look forward to the next time they get to interact with it.
(Click or slide down)
Examples of Duolingo's
Awesome-Sauce
(You guessed it.. They have it, too)
(Click or slide down)
"Free language education..."
(Click or slide down)
Dashboard: Goal-driven, shows user progress, goals and what's next.
(Click or slide down)
Lessons: Distraction-less. Shows current task, making lesson seem less daunting.
(Click or slide down)
(Click or slide right)
Well, that's great, a bunch of screenshots of industry leaders, but what does it mean for Simflofy?
Well, I'm glad you asked.
(Click or slide down)
Everything.
We plan to take Simflofy in the same direction these other companies went. All the companies listed in these slides have done things differently than other companies in their industry.
Some of them created new ways to look at old systems and others created completely new systems never seen before.
That is what we are looking to do with Simflofy.
How will we do that?
Well, I'm glad you asked.
(Click or slide down)
Engineer, Invent.
By learning from each of these systems, we will use revolutionary thoughts from each.
MailChimp: Introduce a platform for enterprise and everyday users.
Simple: Reverse engineer how things are currently done and simplify.
Zapier: Create new technology that's never been seen before.
Duolingo: Make a burdensome task fun and rewarding.
We will change the way people look at working with data.
(Click or slide right)
User Experience Architecture
The Simflofy Experience Technology Stack
To App, or Not To App
Since it is early on, I propose that we decide to split Simflofy into two parts: the *back-end and the **front-end, and communicate over an internal JSON REST API.
Given the complex nature of Simflofy, it seems elegant to architect the new cloud product and resulting service UI this way. Nathan and Mark can focus on writing our back-end framework in Spring and Java, and Tyler and I continue to foray into exploratory front-end tech for the next generation Simflofy Cloud App.
*Back-end = Core VR Product, Page Builder Engine, Data Connectors, API
**Front-end = Public Cloud App (including Page Builder)
, Core VR Service UI, App Connectors
(Click or slide down)
Scalable Front End Stack
(Scroll down through next three slides)
The front-end stack will be developed as a simple, reusable interface stack, independent from the back-end and dependent only on a JSON REST API.
As it will be simple, scalable, secure and reusable, it can be implemented in the cloud app located online (ie - app.simflofy.com), the tablet app, the page builder, and even the core product interface (server package).
Front End Stack Explained
(At least a little bit, scroll down through next two slides)- Angular - Superheroic JavaScript MVW Framework. UI Binding, declarative templates with data-binding, MVW, MVVM, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript.
- Firebase - BaaS with a powerful API to store and sync data in realtime using client-side code. Also helps us to support online/offline syncing, social login & syncing, and integration data security.
- Bootstrap - Superior front-end framework for developing responsive, mobile first projects. Allows us to rapidly build templates and control the entire product's style guide.
- Stylus - Expressive, dynamic, robust CSS for ninjas. Help us turn SASS & LESS into a secure, fast, and easy to manage style framework.
- RequireJS - A JavaScript file and module loader (via jspm.io), helps us improve the speed and quality of our front-end stack code.
Front End Stack Explained
(This is it...you made it!)
- Coffeescript - A little language that compiles into Javascript. It adds syntactic sugar and new grammars to writing pure Javascript. The compiled output is readable and pretty-printed, will work in every JavaScript runtime, and tends to run as fast or faster than the equivalent handwritten JavaScript.
- Jade - A language which compiles to HTML. Like CoffeeScript and Stylus, this language substitutes indentation for noisy characters.
- JSMP - Advanced package management for the browser. Via JSPM, we can run bundled resources (CSS, JS, text, images...) as dependency-managed packages. Even load directly from GitHub, CDNJS, or NPM.
Front-End Application Integration
(The 'magic' is in the details)
It's easier to talk about user experience and customer journey as concepts of a product's or organization's processes. It is, however, all together different to build those processes into a product's journey from those conversations.
Our goal is to intrinsically connect messaging, communications, help, errors, customer service, optimization, user feedback, and marketing directly into the feature set of The Simflofy Experience Technology Stack.
This is how we do it...
(Click or slide down)
Front-End UX Integration - Tier 1
- PhoneGap - Enterprise mobile application development and management across channels and platforms.
- Intercom - A single platform where we can see in real-time who is using our product and send personalized messages to the right users at the right time based on their behavior.
- Mandrill - Transactional email for applications. Mandrill is a scalable and affordable email infrastructure service, with all the marketing-friendly analytics tools you’ve come to expect from MailChimp.
- Mailchimp - Easy to manage campaigns, lists, and subscriber base. Integrates app messaging and marketing messaging into one view.
- Optimizely - Web and mobile application A/B testing....done right. Let's us test new pages, workflows, features, messaging, website integration, and more.
-
Crazy Egg - Visualize user interaction within our applications, C-level snapshots of user behavior, heat map behaviors, and optimize our user experience.
Front-End UX Integration - Tier 2-3
- Tiny Growl - Easy to manage application notification and messaging tier for users, similar to Growl for OS X. Helps us communicate with users from a common tier into the UI tier
- Filament - Drag n Drop tools for integrating the application and website experience together.
-
Qualaroo - Behavior insights and user feedback to better understand and improve our user's experience so we can drive better (data driven) tests and results.
- Wordpress - Popular CMS in all tiers of business (enterprise, SME, startups, personal), easy to integrate through plugins and theming - great platform for Data View integration.
- Drupal - Most popular CMS in enterprise tier of business, easy to integrate through plugins and theming - great platform for Data View integration and dashboarding.
-
Unbounce - Let's users quickly build, publish & A/B test landing pages without I.T. Simflofy can create integration for Data Connectors/View, just like Drupal or Wordpress.
Front-End UX Integration - Tier 4-5
Thank You, from Ya Bois!
We thank you for your time and the opportunity to help create a product that will help people across the world. There is more to flush out and gain traction on, as well as process and required resources, and look forward to a timely and fun ramp up.
If you have any questions, feel free to email Joel or Tyler.
Tyler Goelz
Joel Serino
@thinq4yourself | t4y | Email
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License, until contract and/or employment agreement is executed, whereas the intellectual property and any potential copyright will be transferred to the co-signed Simflofy IP Agreement.
Simflofy User Experience Foundation
By Tyler Goelz
Simflofy User Experience Foundation
Thoughts & concepts articulating a new direction for Simflofy's User Experience in accordance to trends developed by the top-rated, user-focused platforms across the web.
