Once again it’s been a while since I’ve written anything, I think saying to myself that I’m gonna write a post every week or something is just pointless. I’ve decided to call this what it is. It’s a place where I store projects and posts when I feel it’s worthwhile to write something about them. Generally speaking I’ll play around with some design projects in my spare time, usually evenings and/or weekends so it can be quite some time between having an idea and producing the finished result.
Today I’ve got something to write a post about. I want to go into some detail about the design of a concept I’ve been messing around with for the past week or so. The concept is a MyColorScreen app.
MyColorScreen is a website where people can create a profile and showcase their android/ios homescreen designs. It’s got a pretty strong social element to it with people commenting, providing tutorials, ‘loving’ screens to show their admiration of particular designs etc as well as forums (which tbh I rarely actually use). Oh yeah its also made and run by the same people who created Themer, the hugely popular and successful one-click homescreen replacement launcher.
So MyColorScreen built and released Themer as an open beta, and its great fun to use and design for, I totally get why that’s where they’re focusing their efforts at the moment, but I can’t help but feel they’ve missed a trick with MyColorScreen. This awesome social site based entirely around mobile customization is a broken experience when viewed on a mobile device!
OK, Perhaps ‘broken’ is a little strong. You can get to the content, but it’s not fun.
This is what I see when I go to a homescreen page on my Nexus 5:
Mycolorscreen viewed from a mobile device
Needless to say, I never go to MCS if I’m on a mobile.
So for a while I’ve been toying with an idea in my head of an app that can allow users to access the content on the MCS website in a way that’s really enjoyable and that also harnesses the social aspect that’s integral to the experience of the site. It’s still kind of unfinished and not totally polished yet, but I’m going to post it now since it might be a while before I have time to give it the attention it needs.
Layer 1 – Login
First I figured you need login screens, this is the top layer of the app.
Login screens – Click for a nice big super hi-res version!
As you can see here, there is the default screen with an anonymous profile icon, input fields for Username and Password, a nice big Login button as well as options for remembering login details and a link for recovering your password. The idea here is that you can choose to remember details for the future, in which case you are presented with your profile image when logging in.
There are some problems that I can see with this layer so far:
- You’ll only be presented with the second screen after logging out intentionally by hitting ‘Log Out’ in menus. If this is the case, what’s the point of logging out at all?
- If your phone is stolen you’ll have to change your login details to prevent access via the app.
- The hamburger menu icon in the action bar seems redundant, I don’t think there would need to be a menu at this point.
Onto the next layer then!
Layer 2 – The Content
This is the juiciest, most important and social part of the app. It’s where you can browse other people’s screens, leave comments and find out more info about your own profile.
The good stuff, you should click on this one to see more detail ;)
So this is where it’s all going on.
The middle screen would be the default landing screen after logging in. It’s got tabs for ‘Screen of the day’, ‘Recent’ and ‘Following’ categories. It’s got the screens of the chosen category displayed on a card with a little section at the bottom showing the number of ‘loves’, views and comments, as well as an icon on the right indicating the OS. There’s also a search icon at the right end of the action bar. One thing I should mention is about the holo blue indicator bar. I did consider using the modern, less abrasive colours that Google have implemented in KitKat, but the blue actually worked really well in terms giving the options some visual emphasis. Basically it helps make it obvious that the options are there.
The left screen is the menu that is revealed when the hamburger icon in the action bar is pressed. It gives you the ability to access areas of the MCS site that aren’t accessible via the tabs on the main screen, it’s also where you can get to the app settings and allows you to log out. At the top is a little area that displays your important profile information in a nice succinct way. You can see your profile picture, no. of followers, no. of screens and the number of people you have followed. The background of this area is a texture with teeny tiny grey squares that I found on ‘Subtle Patterns‘ which is an amazing resource if you’re a web designer, can’t recommend it enough. I think if I had an issue with this menu it’s that it’s perhaps a bit ‘over designed’. A simpler solution might work better here.
The right screen is the page for individual themes. It displays the same info you get on the image card, as well as a bar showing the designer of the screen, date posted and a button to follow the designer. Underneath this is the comments section. It’s pretty simple, just the pic and name of the commenter and their comment. The action bar on this page displays the themes title.
Single page with comments
Layer 3 – The Uploads
The third and final layer I’m really not sure about, but here it is anyway:
As you can see this part is still more of a wireframe than a finished design. The idea behind it is to allow users to upload new screens to their MCS profile directly through the app, so they can do it without needing to be at home or with a computer.
The left screen is simply where you specify your OS, the middle screen is where you pick your device and upload your images, and the final screen is where you add the information, wallpapers, etc.
The action bar includes an indicator to show what stage of the upload process you are at.
I’m not sure about the idea of uploading new themes from the app. There’s quite a lot of information that you often want to include with a new theme and it might not be ideal to do it from your phone. But then again I suppose it could be an option to just upload from your phone with the minimal amount of required information and add more when you get to a computer.
So anyway there it is. This is in no way a dig at the people at MyColorScreen, I love their website and I know they’re (rightfully) hard at work with Themer at the moment.
Hope you like, leave a comment with your thoughts! Any constructive criticism is greatly appreciated, you can also find me on Google+ or Twitter, but I mainly use G+ ;)