GeoAttract Application Design


This is an case study about designing interface and learning fun stuffs

Project Background

Geo Attract Pte Ltd is a Search Marketing Agency in Singapore.GeoAttract focus on Web Marketing & Analytics strategies to help local business owners measure their marketing efforts & understand what is working and what is not.

My company at the time, Pixel Onion, was approached by the client to help develop a web application that track analytics of their mobile site.

The Challenge

To many business owners, Adwords interface is complicated to use with a lot of step to tag your ads to geolocation. The purpose of GeoAttract App is to simplify this process by providing effective interface and experience for those business owners who are not tech-savvy.

Design Objectives

The designed layout of data is to provide better data scanning for users that manage a long list of location tagging.

The Process

I worked in this project as both front-end developer and designer, together with a back-end developer. This project followed Agile framework. In the end of every 2 weeks, we had a demo run, review our progress and discussed our plan for the next 2 weeks.

Understand Business Objectives

Since I was not familiar with Google Adwords and web analytics in general, which is closely related to the product, I worked closely with client to understand which aspect of Adwords is related to product. The main interface will involve displaying a lot of data, therefore, I also looked into the meaning of different metrics in Adwords and to see which one matter the most to people.

Build User Stories

As part of the product development process, after understanding the objectives of products, we started generating user stories.

Mockup and Prototype

There are a few important pages to be designed in GeoAttract app. They are Login, Dashboard and Edit Pages Based on user stories, I created mockup of these page, then showed them to a few users to receive early feedbacks. After this, I discussed with client on the design. As the deadline of project was near and we all understood that there would still have improvements on design after this, we decided to quickly move to development phase with the backend developer.

When working on the front-end development of the project, I worked on prototype of the app with mock data. Having a prototype, it was easier for me to test with user and receive a more accurate feedback than the first round with mockup. An usability test was created containing different type of tasks for users to complete. I observed how participant do in this test and noted down key points for improvements.

In this project, a challenge in designing interface is to layout the data in a structured layout in Dashboard so that users can manage list of entries well. This is why in usability testing, I also measured how fast the participants finished the task or what they pay attention to the screen. Learning about data visualisation is one of the new knowledge domain I explored in this project.

Doing 2 rounds of user testing, I also realised that there was a need to have feedback guidance for different type of user testing. With mockups, user only need to provide feedback on visual elements of the deign such as layout, colour, typography. With prototypes,user will need to comment of the flow, the usability of elements such as select box, text field, geo map, instruction text, which are also valuable to the product. The benefit of changing front-end element right in HTML, CSS of prototype is faster and more convenient in feedback gathering than the mockup.

Communication between Developer and Designer

One of the obstacle I noticed in previous projects is the delay in communication between designers and developers. Designers need developers to assess the feasibility of design while developers need designers to make changes in design. In a small team like in my company where people have different projects to work on, asking for someone’s opinion, though take shorter time than in other companies, but is still not quick enough to avoid frustration sometimes. For me, It is very frequent that the questions are on small details and co-related so it is more convenient for me as a designer that those questions can be answered within 1-2 hours.

In GeoAttract project, I worked as front-end developer and designer and, therefore, appreciate the understanding of both technical and design aspect of interface. Seeing some points need to change the interface due to technical constraint, I researched and drew out a few alternatives that serve the same purpose but are easier to implement, present to clients and suggested preferred one, get approved then implement after that. This whole process of any change was done within 2-3 hours. I realised that understanding the objective of the design also helped me avoid being a technician in the project since I have the flexibility of changing the interface without compromising functionality. During the development process, I learnt a lot from Joe Chin, a Drupal expert that teach me a lot about Drupal customisation.

Communication with Client

This is my first time using Trello as a project management tool to communicate with clients and gather feedback on the project’s progress.

There is one thing I really like about Agile is that it advocates frequent communication with stakeholders. When working in the project, it is beneficial for clients, developers, and designers to provide feedback to each other, recognise problems, and quickly work on solution. In GeoAttract project, I liked to discuss with client face-to-face,on Trello and Skype, show him my suggestion on certain feature or design aspect. Smooth communication is significant factor in contributing to the success of project.

Project's Trello board'

Result

After completing all the features in product backlog and the last round of User Acceptance Test, we delivered the application to the client.

Login screen

Dashboard

Create new location

Lessons Learnt

There is no deadline for design. We design, build prototype and test. Even after we finish development, there is still design changes. We keep seeing a need for design improvement in the application.

Talk with client. Client are willing to answer question as long as the purpose is to clear roadblock and speedup the progress of project. Putting myself in the shoes of my clients allows me to construct the right questions and complete our tasks faster than expected.

Front-end Development is part of Design process. The more structured design is, the easier the front-end implementation is.


This case study is published with permission from Melvin Yeo, founder of GeoAttract Pte Ltd