contact ME

 

 

         

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

Petrolhead

Petrolhead Banner- REDESIGN.png
 


Purpose & Goals

Petrolhead is a curated car discovery app catered towards the affluent, not-so-informed car enthusiast.

Currently, to research buying options, you go online and browse through the hundreds of automobile choices on large and complicated websites. Petrolhead helps users find or discover new cars and create lists for potential purchases without being bogged down by an overabundance of choices.  This is done by cutting the list of choices to small batches of hand-picked, top-of-the-line cars in an organized, easy-to-use interface. 

 

 
 

Problems & Solutions

The greatest challenge was designing an information architecture model that promotes browsing and exploration without the user getting lost or overwhelmed with information. The flow I eventually came up with utilizes swiping interactions on all four axis to allow multiple paths to key locations.

Another design problem was deciding how much information to give the user as well as when and where to present it or allow access. For example, I wanted to give enough information in the feed to increase the number of tap-throughs. My solution for this problem was a minimalistic approach emphasizing visual appeal over statistical or narrative information. 

 

 

Version 3 Preview

The app is currently being redesigned for the iPhone 6 with a new information architecture model and a minimalist visual discipline.

 

 
  Click for real pixels

Click for real pixels

  Click for real pixels

Click for real pixels

 

PREVIOUS VERSIONS

Below I'll go over two previous iterations, explaining the advantages, disadvantages and trade-offs of each. Also, the reason I ultimately made a decision to change, remove, or keep certain solutions. Pixate prototypes were made for each iteration including transitional animations.

To skip Version 1, click here.

 

Version 1

The initial version came from a pile of snowballed ideas. The purpose of creating this IA model was to preview as many cars in as many categories as possible. This very one-directional goal ended up not being the best solution for the app's goal.

 

Information Architecture

Both versions include a highlight screen that displays trending cars. Users can swipe through, or allow the auto-timer to switch the car every seven seconds.

Below the highlight section are the categories/classes for all the cars. In this case, I included four categories: Supercars, Sports Coupes, Luxury Sedans, and SUVs & Estates. Within each category, a user swipes left or right on the four car previews to view the next four previews. In addition, the user can expand one category revealing more options and an edge-to-edge view of individual cars. The advantage of this layout is the ability to preview multiple categories without jumping screens. 

 
 
  Click for real pixels

Click for real pixels

 
 

Browsing Feed

I created some simple animations to show the type of transitions I had in mind for the transition between collapsed and expanded viewing in the browsing feed. 

The difference in order between the expanded and collapsed view reveals a mental speed-bump. The advantage of four equally spaced and equally aligned squares is the ability to jump squares with no particular order. Scanning distance is essentially the same for all four items with no need for scrolling. With the expanded view, a strict order is introduced. To help the user understand the change in presentation, a stacking transition can give context to this new order. 

 
 


Stacking Transitions

 
  CLICK FOR REAL PIXELS
 

Car Details & Specifications

I tried to introduce a diagonal line to push the directional flow downwards where I hid the car's specifications. 

 
 Click for real pixels

Click for real pixels

 Click for real pixels

Click for real pixels

 

I cut the amount of information you would normally find on a website to the bare minimum. Six key facts in a block format, icon-based fact sheet, and a short paragraph (with options to view more). 

 
 

Why It Was Replaced

The disadvantage of this initial version is that access to most categories requires users to scroll past a lot of information. Not only is this a distraction, but it slows a key step in finding a car - choosing the type of car. This problem would be even more exaggerated with more than four categories - a problem I found when trying to combine categories in an effort to keep the total number of categories low. 


Version 2

 
 

Many things were changed on a macro, and micro level. I cut features and simplified processes in an effort to promote focus on the app's purpose. I also tried to tie the app tighter together to give it a more complete feel. This included changes to typography, icons, and more.

 

Petrolhead Icon - Large.png
 
  Click for real pixels

Click for real pixels

Information Architecture

Version 2.X ditched the separate category headers and subtext in favor of a list style category bank. Users can toggle between Sports and Luxury vehicles. 

 
 
  Click for real pixels

Click for real pixels

I simplified the "Most Popular" slider to only include the make and model. The Sports/Luxury toggle integrates a new wax seal motif logo that better aligns with the luxury theme of Petrolhead.

Categories now extend the width of the screen and are significantly shorter stacked. This should be an improvement in scanning speed and directional flow as the eye isn't jumping from left to right.

 
 

Browsing Feed

I decided to ditch the expand/collapse feature completely - dismissing it as an unnecessary feature that only gets in the way. Instead, I chose to retain more real estate for actual viewing - integrating the category title into the top bar. Instead of a drop down menu, users can swipe left or right to view other categories, or by using the filter feature to view more than one. 

Car preview features have been cut to only include the car make, model, and price. I cut the other features out to focus the user on the visual appeal of the photography. The manufacturer text has also been enlarged, as that is also a major deciding factor.

 
 
  Click for real pixels

Click for real pixels

 
 

By minimizing the information and features available, browsing is expedited by reducing distraction against downwards flow. 

 
 

Car Details & Specifications

The car details screen was also minimized. The info icon is replaced by a plain-word button that activates the info popup. Vertical swiping scrolls through additional photos. Swiping left and right now lets you scroll through other cars in the category. This use of swiping lets users access more information while wasting less time navigating.

The back arrow is replaced by an X, as the transition between browsing and details, is a popup. Closing the box is better aligned with this transition. It is also differentiating itself from the previous forwards and backwards transition between the home category page, and browsing page. This aids the user in presenting a pattern that pertains to their location in the flow. 

 
 
  Click for real pixels

Click for real pixels

 
 

I ditched the block format, icon-based fact sheet in favor of a simple list. Maintaining a simple, refined, almost restrained style and feel was my motivation for this decision.

I also integrated a tab feature with options to share and find a dealer to schedule a test drive.

User Onboarding

While most of the interactions in this app are simple and lack complexity, some are not obvious. During user testing, vertical swiping to view additional photos in the car detail view were easily discoverable due to the navigation circles. However, horizontal swiping to view other cars, as well as other categories while browsing, was rarely discovered. Users who were asked to view another car or another category, more times than not, tried to navigate backwards. The swiping function was added to negate this.

There are three options to help users with this problem: a walkthrough before use, tips to prompt user action, or popups after user action. For the purpose of this discussion, I will lump the latter two together under "coach marks".

I believe coach marks are much more effective than walkthroughs. Walkthroughs are like sitting a person down into a classroom to be instructed on the whiteboard. Coach marks are like letting a person learn by getting their hands dirty. Learning by doing is not only more effective, but saves time. The best example of this type of onboarding is done by Secret.

The next question to ask myself is how to apply this onboarding method to Petrolhead. Tips to prompt user action can be used to help users discover the swipe function to view more cars/categories. Popups after user action can be used after favoriting a car to let them know it has been added to their favorites list (and possibly where to find this list). 


Moving Forward

As always, this is a work in progress. I would like to add some more personality to this app, as I've kept things fairly restrained to follow the high-end, luxury theme. Personality can come from more than just styling, of course. Language and delivery could give a humanizing characteristic - something I feel this app could really benefit from.

Stay tuned!