Vincent Ritter

← back to projects

Simple Schedule

A simple way to manage bookings, appointments and gatherings on the web. Although, now it's over and there won't be anymore parties. Thank you to everyone that has been along for the ride.

Thank you, it's been a journey!

After many years, we've closed our doors. The party is over.

From meet-ups, multi day events to pyjama parties. Simple!

Simple Schedule was a new and simple way to manage bookings, appointments and gatherings. Even superhero dress up parties!

Born from a 'scratch your own itch' idea to learn more and broadening my skills. Which I then took with me on my new ventures and projects.

Thank you, Simple Schedule, for being a light in my exhausting few months of complete and utter stress during a dark time in my life.

Project posts JSON/RSS Feed...

One last push to get Simple Schedule frontend to a 95% done state. With that I can then start the actual build. I'm expecting things to change, hence the percentage. Super excited!

Worked on a simple 'attendee' detail view for events. Think it's simple enough with inline editing (that is the plan anyway). Also worked on an 'add' section, if you want to add someone.

Only one page to go until I can comfortably start my code base for my code challenge. Pretty excited! Loads of functionality, that I didn't think about, holding me up a bit though...

Code Challenge - Day 11. New logo, further changes to event details and a tiny tweak.

They say that design is never actually done… or that is what it feels like. Even though I’m counting the days I’m working on this project, it feels like many months in the work, finding more and more areas I haven't thought about.

I am happy with the way things are going though which, to be honest, is surprising me considering some strange health events with family and on top loosing my biggest client that provided a large proportion of my income (nothing I did). Was out the blue as a happy new year kind of thing. Life is interesting for sure!

I was actually planning to diversify income end of last year… but it seems I was not thinking about it early enough.

Anyway, moving swiftly on! (I feel better just by writing the above)

A new logo

This morning I sat down and worked on a new logo. It’s nothing concrete and will change. So here it is…

Nothing eye popping but far better what I had… The idea is to use the double S on smaller screens and the favicon. Perhaps I’ll stick to the double S in the header area too, no matter the size.

Anyway, just experimenting. I am no brand or logo designer…

I used Sketch, a pretty snazzy app! In fact, I have an iOS app completely designed in it… which I’ll hopefully work on after this project is live (not related).

Also, Eddie Hinkle over at Micro.blog mentioned the below:

Looks interesting! just a thought (this might look horrible) what if you changed the kerning (the empty space between the letters) so that the h and m still connect but also the d and the L connect as well.

I've added that to my todo list to try out. Thanks Eddie!

Event Details - Attendees & Search

For this one, I had the page open and looked at it for at least an hour. Clicking around… trying to figure out how it might work best. This is something you couldn’t really do with an image of the design… ok, maybe you can… but you know what I mean. There is always added value when you can click around and work out what seems natural. Then again… it really requires testing and feedback from a wider audience to really nail it.

I wasn’t sure if I needed an 'all attendees' page, but decided it would be for the best. However, I have a search and filter on both the events details page (the first page you see when clicking on an event) and on the all attendees page.

The all attendee page might show just a bit too much information for my liking, but I’ll stick to it for now and let beta users decide.

You can see the hidden “description” of the event on the All Attendees page for the event. Don’t really need it there. I may also remove the date and just keep a few more “actions” at the top.

For a multi day event, you’ll have a dropdown with dates - for filtering purpose. Every attendee will also show which date they are booked in on. This will eventually also allow time slots to be added. Something I’ll work on closer to launch I hope.

With a search in place, you can also clear the filter which shows you all results again.

Hey… new logo right there!

One more notable thing here is that I also hide the “Edit” and “Public URL” link at the top right. I might add them, but don’t want to throw too many options at people.

Tweaks and next steps

If you’ve noticed… the background grey is slightly lighter…

Next step is to work on the attendee detail page for an event, this will include some controls to remove them, change details and/or change the event date for multi day events. With that done, I can re-use pretty much that and use it for the ‘My attendees’ section… hopefully. That should be the last of the pages that need doing.

Depending how it goes tomorrow (today… as it’s approaching 01:20 AM), I’m hopefully going to be in a position to start the actual codebase. I’m pretty excited about that!

Another thing I’ll work on separately is the public facing section for events. I didn’t have any visions on how that should look just yet… although minimalism is going to be a must for this one.

Oh... and I forgot the links for the pages:


I wrote this article mainly for myself to follow along when I look back at it at some stage. If you like to contribute, please email me or let me know via Micro.blog. There is also the Simple Schedule holding site where you can sign up for a beta.

For other posts on the challenge, check out the links below:

  1. Code challenge - from zero to web app in 60 days
  2. Code challenge - Prelude and Day 1 - Setting things up
  3. Code challenge - Day 2
  4. Code challenge - Day 3. Holding page.
  5. Code Challenge - Day 4. A login page and a few tweaks.
  6. Code Challenge - Day 5. Registration page and preliminary app navigation.
  7. Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.
  8. Code Challenge - Day 7. 'My Events' view.
  9. Code Challenge - Day 8. Burning the midnight oil, loud music and good progress.
  10. Code Challenge - Day 9. Progress, changes and regrets.
  11. Code Challenge - Day 10. There are no events, pricing thoughts and badges

Experimenting with a new logo for Simple Schedule (I am not a brand designer haha). Have used it on my frontend build of the project.


For reading at the moment I'm starting again with 📚 Getting Real by Basecamp as I work through my code challenge. Should have probably read it before I started, but good to revisit.

Code Challenge - Day 10. There are no events, pricing thoughts and badges.

Yesterday night I sat down on the sofa and started watching Wonder Woman. Great movie! That also meant I didn’t really do anything to help push this along.

It’s just past lunchtime and had a productive morning.

No data

Everything I designed includes data. But we all know that when you first register, there will be no data on any of the pages. Whilst I’m planning to improve on the on-boarding process a little, I decided that I will just show a little bit of information on the dashboard when you first register. On top, when you navigate to ‘My Events’ or ‘My Attendees’ this will also show a info section so you can get creating straight away.

They all look the same with variation of text throughout. Text is not final.

Nothing too exciting. A necessary step though.

Thoughts on pricing

I had the following plan for the app:

  1. $2 per event
  2. 5 or 10 credit package, with an option to auto top-up when low.

I didn’t want to add a subscription model, which automatically takes payment every month. However, I had another think about it… In order not to offer too many options for customers, just to keep things simple, I thought of the following:

  1. Get rid of the $2 per event option.
  2. Keep the 5 credits package, with optional automatic top-up.
  3. Offer a PRO subscription, which automatically renews, that allows unlimited events during subscription.

Although I wasn’t comfortable to take peoples money automatically, I wanted something to offer for larger organisations or perhaps agencies that do this sort of thing for other clients. On top, I want to offer the PRO plan for beta subscribers and contributors.

When you first register, as a normal subscriber, the plan is to give one credit for them to try out. Another thought about the PRO plan is to allow a bit more customisation.

The pricing and billing won’t be in place until I’m close to finishing the app. However, I have a clear picture how I want to handle this, so hopefully won’t require much database work… if I change my mind.

Credit and PRO badges

With the pricing stuff out the way, I worked on showing credits on the page. As usual, this is not final, but close to where I want it.

There is now a little badge on the top right, next to ‘My Account’ that either shows you how many credits you have left or just “PRO”. When credits are low, the idea is that the color here changes from green to red.

On top, there is a dropdown that explains what it is… thought this is necessary not to confuse anyone.

Here are the different states:

PRO level. Enough said.

5 credits left on this one, with a simple explanation. I’ll have to explore some info section when creating an event too.

Uh oh! No credits left so here it turns red.

If you’re running low, I’ll also show a small warning under the ‘My Account’ dropdown… might change my mind on that though.

Next steps

The closer I get to a complete design the more I seem to still have to do… The three big areas I need to concentrate on before the weekend are:

  1. Finish Events details page (multiple pages and designs).
  2. Add event public url page.
  3. Add attendee details page.

Probably more as I go. The billing page I’ll tackle towards the end of the beta as everyone will be PRO during that phase (and stay that way) - however, I’ll give anyone the option to buy credits or subscribe to support me (won’t push it though and will be totally optional with no hard feelings at all).

Anyway, with those 3 areas done I think I have done enough to move along to app build. Quite excited about that. Still aiming for the weekend…

Links to the design points:

Throughout you’ll be able to see the badges too, but for specific ones:


I wrote this article mainly for myself to follow along when I look back at it at some stage. If you like to contribute, please email me or let me know via Micro.blog. There is also the Simple Schedule holding site where you can sign up for a beta.

For other posts on the challenge, check out the links below:

  1. Code challenge - from zero to web app in 60 days
  2. Code challenge - Prelude and Day 1 - Setting things up
  3. Code challenge - Day 2
  4. Code challenge - Day 3. Holding page.
  5. Code Challenge - Day 4. A login page and a few tweaks.
  6. Code Challenge - Day 5. Registration page and preliminary app navigation.
  7. Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.
  8. Code Challenge - Day 7. 'My Events' view.
  9. Code Challenge - Day 8. Burning the midnight oil, loud music and good progress.
  10. Code Challenge - Day 9. Progress, changes and regrets.

Code Challenge - Day 9. Progress, changes and regrets.

I seem to find myself more productive in the evenings, so once again a slightly delayed post. I’ll be working on Day 10 already after this one.

Dashboard

Link: https://frontend.dev.simpleschedule.net/app/dashboard/index/

It was time to add to the dashboard. So, using the already designed sections, I added upcoming and current events including the latest entries (attendees) for the events in question.

I’ll be expanding this over the course of the week to also show a “welcome” section for when you first log in to get you started. Data, even when fake, looks OK… but what do you show when there is no data? Also, real data will be king here so will be good to see user feedback too. I did sketch out what I had in mind but won’t tackle it just yet.

I don’t want to add too much to this area just yet. You can also see I added some color to the attendees section, just to move away from all this blue.

In a way, I’m still not happy with the events list… but I’m moving along and will revisit that at some later stage. The data I want to show is there, just not decided how to show it just yet.

Event Detail View

Link: https://frontend.dev.simpleschedule.net/app/events/details/

To be honest, this isn’t finished yet… but it’s at a good stage to show already. I’m going to keep it relatively easy without too much information overflow. Showing the details of the event, latest attendees with option to show all of them and also a CSV download. That might be useful for getting it into a mailing list or so.

There are still many sections to make for this… as came apparent when I was working on it - sort of daunting at first until I processed it and wrote it all down.

Still to do:

  1. All attendees view for the event.
  2. Date filter and view (for multi day events).
  3. Work out a way to include ‘booking slots’, say for a specific time.
  4. Add an attendee to an event/date within an event (without leaving the event screen - if that makes sense).

The 3rd point brings me to my regret… I should have designed the Attendees list in an easier way by using a table, as I could easily add a few columns and it would just adjust. Although, I will probably use ‘flex’ or something to do the same thing for me… actually… I think I’ll do exactly that. I’m not a huge fan of tables, but they are great for big data. Looking at extra fields like time slots and dates at the same time, without breaking everything.

Other tweaks

Some icons were changed around for attendees and some added for events. On top, a few color changes here and there just to separate out that blue a little more. I really like to add a bit of yellow too, they go well together.

I also added some info bubble messages when you click on delete event or create an event. I welcome you to try it, or you can see them here:

  1. Delete event: https://frontend.dev.simpleschedule.net/app/events/deleted/
  2. Create event: https://frontend.dev.simpleschedule.net/app/events/created/

Closing thoughts and next steps

I found myself reading my past posts, just to remind myself of where I want to take it. It’s been invaluable sharing all this. If I wouldn’t have written all this down, even though it takes time, I would not think this app would have a clear focus of its direction, nor would it motivate me to keep going and eventually just sink into the black hole which is my 'idea book of the forgotten'. (Yes, I have an idea book folder in Notes with 43 ideas… one of which is this).

For the next steps I’ll be looking at adding some info towards the “paid” tiers and continue with the event view page. I’ll also look at the attendees list in a bit more detail so I can add more data.

I do see myself starting the actual app build by the weekend and will continue to push as best as I can to achieve that. Thinking of a good way to share that as I build it... would be a bit boring not to see it come to actual life... in an app way...


I wrote this article mainly for myself to follow along when I look back at it at some stage. If you like to contribute, please email me or let me know via Micro.blog. There is also the Simple Schedule holding site where you can sign up for a beta.

For other posts on the challenge, check out the links below:

  1. Code challenge - from zero to web app in 60 days
  2. Code challenge - Prelude and Day 1 - Setting things up
  3. Code challenge - Day 2
  4. Code challenge - Day 3. Holding page.
  5. Code Challenge - Day 4. A login page and a few tweaks.
  6. Code Challenge - Day 5. Registration page and preliminary app navigation.
  7. Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.
  8. Code Challenge - Day 7. 'My Events' view.
  9. Code Challenge - Day 8. Burning the midnight oil, loud music and good progress.

Won't have time to write up today's Code Challenge blog post. Too tired. Worked on the Dashboard, Event Detail screen (not done yet) and other tweaks here and there - like adding color to some of the links for My Attendees and changing icons.

I was thinking how I go about sharing the web app of what I'm building for my code challenge. The app that includes the logic... not the static design.

Code Challenge - Day 8. Burning the midnight oil, loud music and good progress.

I didn’t get the chance to write this up earlier, it was 02:00 AM by the time I finished and decided to call it a day. Since the past year or so I try not to stay awake too late, although… I like the peace and quiet so I can concentrate.

Friday wasn’t a good day to be productive, aimlessly clicking around and reading some articles. However, I feel I made good progress yesterday (and this morning) to make up for it.

My Attendees page

I wanted a simple list view for all attendees. Not like the ‘My Events’ page, which has a big and bold look, as I knew that there will be many entries. So I created a condensed list showing basic details - Name, Email and events they are part of. There will also be a search bar, so you can look up details.

This is what I came up with:

I’m planning to add some controls to the top right that will allow you to sort the display of the results. Either by name or events.

There are a few things I want to tweak especially when the screen size gets smaller, but that is something I’ll tackle a little later on in the project. I’m OK to go into beta with rough edges, as it should be, and want to make sure what I code meets my expectations and keeps true what I’m designing here. There will be areas that will probably change along the way as I find better ways to do things.

Create a new attendee

This one was simple and that is the way I wanted it. Down the line I want to add the feature to book people/clients directly to a time slot or just enter their details directly to an event. Adding them here is just one way to do exactly that. Perhaps not a feature that is required just yet, but good to have. Not to mention, being able to use the design on other parts of the site.

I’ll show a list of events that are upcoming or current if you wanted to add them directly to one or more events. Useful when someone emails you asking to be put on the list.

The edit page for these will look slightly different, but I haven’t decided on the best way to display this yet. I have an idea though.

Account Profile & Settings

Didn’t think I would work on these but here we are. I’m yet to decide if I should have a profile page or not and perhaps just merge it to ‘Settings’. Nice to have separate though.

The idea of the profile page is to enter a ‘display name’ that people can see when they load up the public URL for the event, including showing a small profile image of the organiser. This could be an individual or a business… or whatever. It’s optional at this stage so not required as such. I’m also planning to make a feature where you can hide these details on the public URL on an event by event basis - or perhaps override it if with different details.

Couldn’t resist that image!

The settings page will only contain an ‘email’ box and some other settings that are yet to be added.

I think that’s easy to follow.

Planning to add a ‘Date Format’ section here too… I know that people like their dates differently, so good to have that as a setting. I do want to add an on-boarding process that will set this as you first log in after registering.

I didn’t touch billing yet.

If you change the email address and hit save, you’ll see a how I plan to display a success message… try it.

Closing notes

Whilst I was working on it, it became apparent how more complex everything is becoming in terms of making sure that all the correct pages are there and that I don’t miss anything. On top, I’m getting ideas for features… which is good and bad. For now though, I write them down in TaskPaper to keep track. I’m still pushing for beta by day 30 or 40 so I don’t want to add too much workload at this stage… the only downside that I can see is huge database changes. Hope to mitigate that a little though by keeping conservative with features and true to ‘simple’.

I already sketched out the ‘Event View’ page that will give you a breakdown of the event so I hope to work on that next.

Seeing the attendee list makes me want to redo the events list a little, but not too sure yet.

Another thing I need to think about now is adding the view for ‘Credits’ you have on the account when creating events (the paid feature). Not sure why I haven’t thought of it earlier… but it needs to be there for launch. Beta users and early supporters will have a lifetime free account.

Hope to have another big push the next few days and get it as close to “design” complete over the course of the week.

Also forgot that I need to work on email templates… arrrgghhh!

As always you can view the above pages here:


I wrote this article mainly for myself to follow along when I look back at it at some stage. If you like to contribute, please email me or let me know via Micro.blog. There is also the Simple Schedule holding site where you can sign up for a beta.

For other posts on the challenge, check out the links below:

  1. Code challenge - from zero to web app in 60 days
  2. Code challenge - Prelude and Day 1 - Setting things up
  3. Code challenge - Day 2
  4. Code challenge - Day 3. Holding page.
  5. Code Challenge - Day 4. A login page and a few tweaks.
  6. Code Challenge - Day 5. Registration page and preliminary app navigation.
  7. Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.
  8. Code Challenge - Day 7. 'My Events' view.

Been trucking along with my Code Challenge tonight. It's now 02:03AM and won't have time to write up a blog post, will do that tomorrow. Worked on 'My Attendees', 'Create an Attendee', 'My Profile' and 'Settings' pages. Also some other tweaks here and there.

Working on 'My Attendees' list view at the moment... loud music, pretzels and midnight oil on the go. You can see a preview here...

Might try a card based events list... now that I wrote my blog post haha. Had a brainwave about that.

Code Challenge - Day 7. 'My Events' view.

Today I solely worked on the events list that you see under ‘My Events’. Didn’t have too much time today but feel I achieved what I wanted. Plus, it gives me a bit of time tonight to figure out what I want to move along tomorrow.

Thoughts on bad actors

Before I get into it, I was thinking how I can keep my paid model for ‘credits’ of events viable and stop people from abusing the ‘Edit’ feature on an event. So let’s say someone would create an event, publish it, spend one credit on it and then after it is done… they go ahead and edit the event and just change the dates and rename it. I am unsure how I best can handle this.

For now, I think I will trust the user first most. If the event is in the past, mark it “past” in the database and don’t allow any edits on it. Cloning the event will not be a problem.

I understand that people will make mistakes hence I’ll enable the edit feature. Another thing I could do is keep it editable until there are certain amount of ‘attendees’ registered for the event. Disabling the event name and dates to be edited at this stage would be good. In rare cases I will of course accept emails to change it - if it was a genuine mistake.

Hopefully that is a good compromise of potentially pissing off clients and keeping it fair.

My Events View

For this round I made a sketch, but I’ll spare the embarrassment. I wanted a super simple and clean overview of all events, with the latest/upcoming events showing at the top, with past events in their own little section at the bottom (like an archive).

I didn’t want anything over the top or fancy either - just focus on events and make it a nice and simple experience for everyone. There are many apps with fancy graphics and fancy animations… true they are nice… but at the end of the day, it’s the app and the functionality that matters. Not only that, it would take time to build that all in. I’m aiming for an MVP and a learning experience and not a beauty contest.

So this is what I came up with:

To break it down I wanted to show every event with a nice big font as most people can relate to the event name more than a date. Although… maybe they can remember the dates better. A list view may have been good also but I would feel it would be too compressed and perhaps a bit too corporate… time will tell. Although, I’m planning a more condensed list for ‘attendees’ as that might get huge.

The event name is clickable and will at some stage, in the next few days, take you to the event overview page. Attendees will show you how many RSVP’s there are and that is also clickable - this will go to the attendees section of the event page.

'Edit' is self explanatory and will look similar to what we have for ‘Create new Event’. ‘View’ will also take you to the overview page for the event.

'Public link' will open a special page that is viewable by the public where people can register themselves for the event. Thought this might be useful to have so clients can get there quickly. I may look at marking events as private, but we’ll see.

On a different note to myself, I must remember to allow adding attendees manually to an event.

As usual, I made a few tweaks here and there - boring stuff like adding a border radius (curved corners) to the calendar picker, stopped the keyboard from popping up on iOS devices for the date picker… just to name a few.

The site is also adaptable to smaller screens (responsive), so you can see it here for the event page as below:

Still loads to do with tweaking this.

The blue is totally overpowering in my eyes. Perhaps I’ll explore different shades and mix it up a little. TBC.

You can find the page here.

Thanks for reading. I'm pretty excited...


I wrote this article mainly for myself to follow along when I look back at it at some stage. If you like to contribute, please email me or let me know via Micro.blog. There is also the Simple Schedule holding site where you can sign up for a beta.

For other posts on the challenge, check out the links below:

  1. Code challenge - from zero to web app in 60 days
  2. Code challenge - Prelude and Day 1 - Setting things up
  3. Code challenge - Day 2
  4. Code challenge - Day 3. Holding page.
  5. Code Challenge - Day 4. A login page and a few tweaks.
  6. Code Challenge - Day 5. Registration page and preliminary app navigation.
  7. Code Challenge - Day 6. Getting in the groove, new events, MVP considerations.