Zizim – UI Re-design

TL;DR The design can be viewed on my Behance Profile.

Zizim is a project I originally started back in University. I rebuilt it using OOP principles a few weeks back, but the generic interface has been bugging me ever since. So I’ve spent some time working on a new interface, which I think works well.

The homepage is now, essentially, a full screen textfield. A URL is pasted into this field, and when the form is submitted it generates and returns your short URL. There’ll be the option to login using Twitter, which allows the saving of shortened URLs; tracking statistics and the option to add an alias to the URL.

From Zizim HQ, which is accessible when logged in, you’re given an overview of all of the shortened URL’s which have been generated and some basic information, including the number of times the link has been clicked.

Click on one of these rows will take you to a page with some more comprehensive usage metrics, and graphs, which I haven’t built yet. That’s next on the list. I’ll probably re-launch the service with the basic click tracking initially, and add the comprehensive metric later.

Now all I have to do is build this in the existing backend, which I’ll be doing over the weekend.

Designs visible on my Behance Profile, here.

Personal Blog – UI Concept

TL;DR An initial UI concept for a personal blog. View here.

I had some free time this evening, so I thought I’d have a go at mocking up a concept I thought of this morning.┬áThis is an initial attempt at creating a clean, and simple, UI for a personal blog.

The focus is on the article titles, rather than clogging up the view with large snippets of each article. You could argue that this may affect the number of people clicking through to read the articles, if they can’t read a little about them first. However, if the focus is made on making article titles engaging and inviting, as they should already be, this shouldn’t be an issue. Mobile screen real estate isn’t as plentiful as their desktop counterparts, so it makes sense to focus on the important information, in this instance it’s the article titles.

As our eyes head for the top of the screen, why waste that space with the navigation bar. I think the navigation bar would not only look better, but logically it could serve a better function at the bottom of the page. People are fairly familiar with seeing things like tab bars on the bottom of the screen in mobile applications, so it’s a fairly safe bet they’ll be able to use it despite it’s relocation. When the ‘hamburger’ menu icon is activated, the full-height menu slides up from the bottom, taking the navigation bar with it.

At the bottom of the menu view, we have a search input. When this search field is targeted, the other menu items are hidden and the search input field takes pride of place at the top of the menu view. Live search results are shown as the user types, with the matched keyword emboldened in the results.

I’m personally a big fan of navigations at the bottom of the page, I think it works well and certainly breaks from the generic visual mould which a lot of the web seems to be pressed from these days. If only to collect some metrics, a variant on this design could be created with the navigation at the top of the screen. These two designs could then be A/B tested to see whether or not the navigation position does have a bearing on the level of user interaction.

This project is visible on my Behance profile, here.

MPG (Fuel Economy Tracking) App

UI Design isn’t something I’ve had a lot of experience with, but as I’m experimenting with Cordova it seemed like the perfect opportunity to practice some UI design.

The first app I intend to create is one for logging and tracking fuel economy in vehicles. The initial concepts for this app can be seen on my Behance profile.

My intention is to release the application on Android, iOS and Firefox OS. I will also be building an accompanying API to allow the syncing of data to the “cloud”, allowing the viewing of statistics via a website if desired.