Planning the main screen of your application
Dec 23, 2013
Table of contents:
The ‘User Dashboard’ is going to be the main screen where users of Cribbb will be spending the majority of their time. Nailing this single most important screen is a major step in defining what your product is about and articulating how it should be used by a first-time user.
I see a lot of new applications that have multiple ‘main screens’. This is a clear sign that the product is confusing because it is trying to be everything to everyone.
Over the next couple of weeks I’m going to be going through how I think about creating the main screen of the application, designing it in photoshop, making static HTML files to play with and then building out the Laravel components to make the static files come to life with dynamic content.
This is a very important process to go through as this main screen can make or break your product.
What do you want to achieve?
Before getting into the nitty gritty of design and implementation of your main screen, first you need to think about what you are trying to achieve and what experience you are trying to create for the user.
This is going to be quite considerably different depending on the type of application you are creating. For example, a consumer application might be used many times of day for only a couple of minutes, whereas an enterprise application might be used consistently for 8 hours every single day.
To start to create a more concrete idea of what you are hoping to achieve, first answer the following three questions.
What are the “jobs to be done”?
Your application will be used primarily to get one job done, so what is that job?
For example, an application like Facebook aims to show you relevant and timely updates from your friends and family, whereas an application like GMail allows you to read and reply to email.
For Cribbb, I want to allow a user to be able to read and participate in group discussions around certain topics. So the “job to be done” is to facilitate this interaction.
What do I want to make easy for the user?
When you focus your application on a single “job to be done” you can begin to optimise the design and functionality to make the application as easy to use as possible for completing that job.
Again going back to the previous examples, Facebook automatically curates a feed of status updates, pictures and videos that have been shared by your friends. GMail presents your email front and centre and allows you to quickly and easily read and reply to your email from a single screen.
With Cribbb, I want to make reading updates as easy as possible. I don’t think that the generic social application design patterns really facilitate consuming a great deal of content as they are usually focused around a single feed, rather than many.
What kind of experience do I want to create?
And finally, the experience you are able to create around using your product will often be the quality that encourages users to choose your product over a substitute.
Facebook was able to win out the early social network battle because it offered a completely different experience to MySpace. Facebook was clean and simple whereas MySpace was busy and erratic. GMail was able to beat out entrenched competition like Hotmail and Yahoo because it offered a cleaner and quicker experience. You could use Gmail’s powerful search and tagging features and they prioritised never having to delete email.
For Cribbb I want to create an experience that encourages consumption and contribution through an easy to use interface. I think Facebook, Google and LinkedIn groups do this particularly poorly as each group is separated into a neglected separate product.
Inspiration
Once you have the goals of what you are trying to achieve sorted, you can start thinking about how you are going to facilitate those goals through the User Experience.
By this point you should have a clear goal, you should know what you want to make frictionless and what kind of experience you want your users to enjoy.
In the case of Cribbb, I want my users to be able to consume threads of content from multiple different groups all in one place. I then want to facilitate interaction by making it as simple as possible to reply to a thread.
Instead of going down the normal “social network” design pattern, I’m instead going to be focusing my attention on the higher productivity design patterns of email or RSS readers. I believe that the early adopters of Cribbb will likely be those who enjoy regularly consuming a great deal of content, and therefore require the design pattern of an application that is able to handle that job.
Conclusion
Planning your main screen, the job-to-be-done and focusing on creating a simple and frictionless experience is incredibly important process to go through before you jump into code or design. Without this clearly defined scope, you will end up creating something that is confusing and tries to do everything rather than doing one thing really well.
As someone who loves to design and develop stuff on the Internet, I often have to reign myself in when I feel like I’m jumping into a project without doing the groundwork first. This might seem like an unnecessary task, but believe me, it will make the rest of the project flow much easier.
This is a series of posts on building an entire Open Source application called Cribbb. All of the tutorials will be free to web, and all of the code is available on GitHub.
