Over the last couple of weeks I have been working on scaffolding the key features of my simple article publishing project, while trying to actively avoid getting distracted by constant fiddling with the fine details of UX. As a reminder, I am trying to create a very simple, but feature complete SAAS website so that I can build a better understanding of how to integrate the back-end services like Auth, Database, Payments, Helpdesk for a real SAAS site.
In my previous post I detailed how I am using a services pattern and in-memory repositories to separate the front-end UI from these back-end concerns, to avoid having to solve too many problems at once. This also allows me to focus on making sure that the key features of the site - which in general are the features that will attract paying customers - are valid, working and stable. This prevents losing time implementing back-end integrations for features that are in flux, or which are poorly thought out.
As a case in point, one of the key features for an article editing an publishing site is actually being able to create and edit an article. My initial idea here was to use a markdown style approach - users would enter wiki-style markdown which would get transformed into a page when the article was previewed or published.
By implementing the UI first, it quickly became apparent that this approach was clumsy, overly technical and would turn off a lot of prospective customers. Instead I opted to implement a rich text editor based on VueQuill, and this greatly streamlined the user experience for creating articles - which is one of the core features of the site. Focusing on the core UI enabled me to make this switch with minimal impact - as no backend changes needed to be made.
Rule of thumb for future SAAS work: scaffold the core features first. Focus on getting the stuff that users are gong to pay for working before worrying about pesky details like security, db schema, payments etc.
Anyway, here is the list of features that are more or less working:
(remember, the UX here is a work-in-progress!)
The site is a responsive layout, with a fixed width for user interaction and fluid gutters. This may change in future, but it seems to make sense for now.
It has a dedicated members/dashboard area that supports navigation, managing articles, managing the user's account and getting help/support
Each member page is an 'invisible scroller', enabling the user to scroll content vertically without requiring browser scroll bars. Each page also has built-in feedback features, providing common notification and dialog services for page actions:
The article management features are implemented using a master/detail list pattern, where the user can create, edit, delete, publish, unpublish and view their articles
Article creation or editing uses VueQuill as a WYSIWYG rich text editor:
and a scaffolded support page, using a hosted support form from FreshDesk (more about this in future posts)
Published articles are available for viewing by the public:
Obviously the site is by no means complete, but the core UI features are mostly there.
The main outstanding feature is implementing the business model for the site - adding (or restricting!) features based on user payments. This will be my next focus, and I'll try and report progress in the next post.
