Web & UI Design for Yatown
Yatown is a social network for neighbours, enabling them to connect and interact in various ways. My job was to design the website & UI for the iOS app.
Christopher Nguyen contacted me one day, asking for design services for his project called Yatown. At that time it was a locally well known social network for neighbours.
“Matej is a key member of our project team.”
Christopher Nguyen
It was featured in Business Journal, Social Times, the San Francisco Chronicle and some other media sources.
When I began working on this project, Yatown was a simple web application, produced without any focus on design. It was actually a beta version. So we started working on a whole new version of Yatown.
Yatown Design Concept
We tried a few concepts, but the main idea was to produce an online cork board where the posts would appear. The first version had a sidebar on the left that could be closed.
We decided later that it didn’t work or look good so we decided to make a header with all the functions and action buttons. We came up with something similar to Pinterest.
Yatown Landing Page & Main Screen
After the main board was designed I had to design some other details, including the pop-up boxes for detailed post view and the sign up & landing page.
Focused on Details
After the main design was ready, we focused on some details and features, that would make it easier to use Yatown. That’s why we added accomplished drop down menus. This way a user could have a lot of actions and info available without any clicks. These menus were later replaced with a simplified version.
I produced a lot of designs for various pages and features, but not all of them were used. These designs took a lot of time to produce because they were very detailed. Here are some pixel perfect details.
Yatown On Mobile Devices
After a while, the Yatown team decided that we should also produce an application for smart phones. The main purpose was to give the users the ability to post at any time, from anywhere. This way a user can really know what’s going on in his neighbourhood.
I started off with the welcome and login screen, which are really simple, but accomplished. The sky blue colour was now already a trademark colour for Yatown.
Yatown iPhone App Welcome Screen
Here is how the main screen would look like. We had to abandon the idea of a grid of posts on mobile devices. There’s simply not enough space. So we decided to add a map view, where all the posts would appear on the map (square), the user is currently viewing.
Main Screen & Map View
Here are examples of the main menu, that could be accessed very quickly by touching the main menu icon on the top left side of the screen, and the post detail view.
Main Menu & Post Detail View
Design Integration Issues
The work progressed very quickly and we even had trouble with different time zones. The team that was responsible for the design integration didn’t focus on details and that’s why some of the designs I produced were never used or were simply poorly integrated.
Well, we’re still working on these applications, so maybe we’ll be able to focus on details later.