The Evolution of GreekRide

GreekRide is a company that I have been working on for about a year now, and in the next couple days we are going to announce the largest re-design of the app since its inception. The new design takes a whole new perspective on showing affordances and displaying the important actions a user would most likely take, but the design came from countless iterations and critical thinking to see if certain things distracted the user or complimented their interaction. Motion played an important role, as well as color and iconography, but before discussing the design, it’s important to see where GreekRide came from.

When GreekRide was first created, I’ll admit that it looked and felt like a template-designed website. The initial version that I created using a bootstrap like feel, was literally an HTML document on a server, but this was before I even knew how to create a user interface for apps. The framework of the functionality was there, but the methods in which they worked weren’t fully formed. It was extremely basic, but I soon realized I had to take design more seriously.

After fully converting the website that I initially created into a JavaScript local web app, I started to look into how interfaces currently work, but was narrowly focused on making sure the experience was different compared to other apps. This was the single most major flaw in this version of the app because I cared more about making the interface different, rather than better.

An example was approaching the tab bar at the bottom, which I made colorful, and contained rounded icons that would fill in when the user was focused on that view. I found that it was pleasant to look after the app was initially designed, but after a short period of time the overuse of color drew the users attention away from the core function of the app. The use of color is meant to assist the user in understanding where they should go next, not to distract and confuse them.

It was overly designed, and my interest in the use of circles and rounded edges took away from the functionality and simplicity of the interface. When requesting a ride, I created a circular animation that showed the user I was getting their location and sending their information to the server, but it took up the whole screen and I felt it would be confusing to a user when using the app for the first time.

It took some attention to detail and perspective thinking, but I eventually took this out and extended the length of the splash screen to compensate for the ramping of the location accuracy, which also lead to removing the circular animation entirely. It wasn’t simplicity for simplicities sake, it was understanding that the animation didn’t have to be there to afford the user of what was happening. When sending for a ride, the user doesn’t need to know the extremely complicated technologies that were working behind the scenes; they just want to confirm it was sent.

Making buttons and actions easily identifiable.

The next revision of GreekRide’s interface was based more around the idea of making buttons and actions easily identifiable, while also making the hard decision of removing the bottom tab bar. I added space, added shadows, as well as made the buttons certain colors based on the reversibility of the action the user is about to take. For example, a red button signified that the user could not undo the action they were about to perform, while a green button meant that it was a positive action that could be reversed.

The removal of the bottom tab bar was a difficult one because at first, I believed users would become confused considering this design layout is extremely prevalent in the iOS ecosystem, but when letting people attempt to use the revised app, it focused the users attention to the most important button that was visible; sending a ride. For this version, there also was a completely separate view that contained any administrative fields, as well as the basic profile page, but as time went on, this new profile view began to show its age.

With a plethora of views and colorful buttons, I began to run into a problem where I felt the user could potentially become lost inside the application. Also, I felt that the app relied too heavily on shadows and buttons to navigate through basic functionality. The animations were out of context and didn’t afford to where the user was navigating to and, honestly, it was just not visually pleasing the more I looked at it. It had to be re-designed to look beautiful, as well as functional, and take affordance seriously by using motion and a mature use of color.

This is where the final design of GreekRide was born. I stripped every button, view, and broke it down to what action was most important to the user based on their intention at that given moment. When sending a ride, the user should see a bold and obvious method for doing so. If the user wants to see where their location is after manipulating a map, a location button appears to bring the user back to where they came from. If the user is at their current location, this location button disappears because it no longer has a purpose.

The experience is simple and comes down to focusing on the most important action, which resides in a bold multi-colored button that constantly sits at the bottom of the view. The interface is elegant, clean, and ergonomically focused based on some research I conducted.

The decision to go with a menu bar that only covered a portion of the right hand side of the screen was another difficult one. It was based off of realizing that the profile view did not have enough information to require an entire screen, and the user was taken out of context when they went to their profile. With the menu bar, the user knows exactly where they are and that by tapping on the dark opaque background, they can get back to where they were before. This small adjustment, which doesn’t remove or degrade any functionality, assists the user in knowing where they are and how to get where they want to go.

It isn’t simple to design something elegant.

It isn’t simple to design something elegant. It takes months to truly understand the best way to do something, and extreme courage to completely remove a button or view that was considered to be the foundation of a product. I look at Dieter Ram’s guide to good design every day and it doesn’t make designing something beautiful any easier than before, but the only aspect that I can confidently say I will never be confused by is that design should consist of as little design as possible. That specific rule supersedes any other and iterating on design to simplify an idea to a beautiful, yet simple product is eminently important.

Designing and programming are two jobs that will always be inextricably linked to each other, and the companies that get the marriage between the two correctly will prevail simply because users will subconsciously understand the care and emotion that was put into the formation of the product. I hope that people enjoy seeing how GreekRide has progressed, but I hope they enjoy even more, the incredible future that this product holds. It’s like how Steve used to say, “Design is everything”.

Read the original article on Liam Bolling’s Website.