I am looking for ideas on how to bridge the externally facing part of a website with the logged in version.

The externally facing website is fairly regular with a horizontal menu and a number of sub-pages. However, when logged in there is more of a web-application interface (like Google Analytics) with a left-hand navigation.

My concern is that I want logged in users to be able to navigate the external content as well as the web application. At the same time I do not want to clutter the web application with a menu bar for all items pertaining to the regular website.

Any ideas?

  • We might need more information in order to help. Are both sides (internal and external) exclusive in features, or is there overlap?
    – EdGG
    Feb 4, 2014 at 10:27
  • Well, the overlap is that logged in users should have access to the regular website contents while their primary focus is on the web application capabilities in the "logged in" mode. I see a few options: a) keep the website main menu (risks cluttering), b) hide the website main menu (small icon with hover functionality), c) change the main menu and include a new option - Dashboard - indicating logged in mode (External item 1, External item 2, Dashboard). Thanks.
    – dani
    Feb 4, 2014 at 10:36

4 Answers 4


You can think of something similar to the HSBC website. HSBC website shows fewer options to the general visitor and shows more options to the logged in User. i am not sure about your user base and the business..but you can certainly try this.

Example enter image description here


With the information you provide, the answer has to be a bit generic.

Lets call A the site for non logged in and B the logged in site.

The first thing to consider, is position of objects, for instance if you have a left or right menu on B, but there is no need for in on A, then just leave that space white on A. It it's too wide, you can reduce a bit the space since the perception won't be affected and the use of A would be improved.

If you can provide generic information on A, the use it as place holder for the equivalent interaction on B. On A it would just be an image, and on B you provide a way to interact with that image/graph/block.

If there are navigation links that are going to appear on B, as a block, then try to leave that space empty on A. If you can't, make obvious that those links are "new" on B. By that I mean, make them different from the common links. For instance, you can put them on a box on the left or right side, or if they are on the horizontal menu, put them on the right or left, all together.

If there are too many, just create a new bar that goes below the common one and make it visibly different.

If each page is going to have a lot of changes, then there is no way to do it smoothly.


In the interface you describe I imagine that the company logo is in the upper lefthand corner.

What if: When the user clicks on the logo they get the logged out set of links, but stay logged in and have a link back to the web app and an indication that they are still logged in, probably their name and account links in the upper righthand corner.

This way users can toggle between your public facing site and the logged-in functionality without clutter.

(Not sure I've imagined the placement of things right)


Is good idea to use " Drawers " style for internal interface, when user make click in specific menu or admin areas it will display division like Drawers that could be in another color like more dark that the front in order to give the feel that your customer are getting inside something. You can see a good example of drawers in this framework. http://gumbyframework.com/docs/components/#!/intrinsic-ratio-video

Another idea that I like to use inside for admin area is tabs and transitions, see this template http://www.99lime.com/elements/#tabc2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.