Harbor
Shores Life
A centerpiece for Harbor Shore’s core businesses and customers.
Harbor Shores is a premium development company along the Southwestern coast of Lake Michigan that offers real estate, an 18-hole Jack Nicklaus signature golf course, public walking trails, marina, hotel, restaurant, and more.


My Role
After working on a project for Numbers & Logic. They reached out to lead the design of their client’s upcoming application.
I WAS REQUIRED TO:


Lead the user experience as well as visual design, from beginning to end.


Work within the company’s current visual brand language.


Work closely with a developer to provide assets and help translate the design into code.
AND DELIVER:
High fidelity mockups for different portions of the app.


Various page templates to be used by the client in many ways.


Iconography


Visual Design Documentation


A look at
the interface.
Home
Home provides quick access to a variety of features from the main menu. The large blocks provide flexibility for various types of content. This also makes it easy for the developer and client to make updates later if needed.




The icons created were designed to be sharp and square to match the home screen blocks.
Trails
The trails portion of the application can be used as an exercise companion. The application keeps track of times, helps navigate, and also gives you information about the various trails.


Golf
Golf features detailed information about each hole on the course such as layout par, handicap, distance, and photos. It also features a scorecard that can be used to track your score while playing. The scores can also be saved for later review or to see progress over time.


Templates
A series of templates were created for common types of pages that could be implemented in various ways by the developers.
Some of these included templates for photo galleries, photo albums, text based pages, and image description overlays.


Touching on the visual details.
Typography
Abel was used for most of the interactive portions, as well as headings. Maven Pro was used for body copy to improve legibility.
Color
In order for the application to fit their current brand, I created a color palette that expanded on their visual style—often dominated by orange. I wanted the color be present, but not overwhelming.



