First, if I were to design a bus stop I would prioritize commuter experience. Instead of an overpass I would put the access on street level. So commuters won’t have to walk up a flight of stairs and go back down again when riding on and off the buses. Then the new shorter overpass will be for those who want to cross the other side.

This will make it more accessible for everyone especially the elderly and PWDs.  This will also negate the need for escalators, elevators and long footbridge which also increases the safety of the commuters.

 I would also like to retain the right side doors of the buses so we can still maintain global standards (coz they said that doors will be moved to the left side of the buses).

Basically it would be like an extra wide pedestrian lane in EDSA.

Wait what? But wouldn’t it cause inconvenience for private vehicles? Yes, but that will be solved by the second part of my solution, which is a vehicular underpass or tunnel.

This way private vehicles can pass by under the bus stops unimpeded (Buses will remain on street level). Car users won’t mind going through a few tunnels compared to commuters walking up and down flight of stairs.  This system takes into consideration the balance between different types of users.

Sure, this will be costlier but building an overpass with escalators and factoring in its regular maintenance isn’t necessarily cheap.

I don’t really know the figures yet but the tunnel will also feature two U-turn slots for both north bound and south bound vehicles. Which to me, would make the investment more worth it as it will solve traffic problems caused by the recent closure of U-turn slots in EDSA.

We have already built tunnels like the Quezon boulevard and Lagusnilad tunnels in Manila. The only thing left to do is solve the engineering part of the U-turn slots.  If this is feasible, then we have improved 3 user experiences: We have provided an open space – commuter friendly bus stop, a U-turn slot that won’t interfere with the bus way, a shorter pedestrian overpass for those crossing the other side and an unimpeded private vehicle flow. What do you think, is this even technically possible?

While I congratulate the government for the success of the EDSA bus way itself, much is left to be desired in terms of commuter experience.  I know there is a MOA already for a overpass concourse that features escalators.

I commend the efforts of the government especially the DOTr, MMDA, DPWH, LTFRB in streamlining the bus routes in and around Metro Manila. Finally, after so many years we have designated bus stops. I hope we can improve the system to the point that we have time of arrival and departure for each bus.

The post EDSA U-turn tunnel and street level bus stop with pedestrian overpass; A design solution to improve UX appeared first on Chief of Stack.

I’m going to cite one of our projects Digest.ph as an example throughout the article. Over a month ago, I was tempted to do a full revamp of our design in order to best accommodate recommendations from Works of Heart (WOH; design and branding experts; one of our mentors from AIM-DBI). But given Digest’s limited time and resources, the best decision was to go for a refresh (more on this below).

Struggles of a start-up website

WOH audited the website and among the comments were to make the copy more bespoke and buttons snappy. They want us to tailor fit the homepage for a specific type of customer. All suggestions were geared towards marketing and making the website convert.

With fresh eyes and their comments in mind, I proceeded to revisit our site and found that they were right – it was bad, LOL. Our homepage was uninspired and unorganized, the color palette has 50 shades of blue and the copy didn’t give clear call to action. People were showed a lot of information without any clear direction where to go.

Digest pivoted three times since the project started, more features were added as the business model got finalized. The homepage UI took a back seat and functionality became the priority. Having no full time graphic artist didn’t help either (though I double as the graphic artist when needed), it became visible that our assets were not coordinated.

I recommended to improve the UI and logo while the company finalizes its branding strategy. But it was a though decision for the company because the priority was on product development… not necessarily on marketing or making the site convert yet.

Breakthrough: Going back to the old prototype.

Luckily I was able to remember my original prototype from a year ago, it already had all the pieces that we needed for a quick refresh. I just had to integrate our primary product and the new logo. If you look at the finished homepage it may look like we did a redesign but since we just brought back some elements from the prototype I will consider it a refresh (borderline redesign :D). Anyway, the new graphical assets were quick adjustments.

This time I wanted to answer the 5 W’s and 1 H of our users. The intro section answers ‘what’ the website is all about and “where” to go to continue (See the “Talk to a Lawyer” heading and the “Let’s go” button). The second section explains ‘how’ it works (See the video explainer). The third section answers ‘why’ users would want to use Digest’s services. The fourth section shows ‘who’ the lawyers are. And finally, the fifth section answers ‘when’ to talk with lawyers (See the “Ok find me a lawyer now” call to action button).

When to do a refresh vs redesign

A refresh is pretty much like trying a new paint in your house. Do it if you want a quick way of highlighting new changes to your business.

• If there’s a new company logo, you may want your color palette and typefaces to match it.
• If there’s a new primary product, you should adjust your promotional content, replace outdated copy, set new call to actions and do on page SEO.
• When you want to improve user experience, you have to guide users to go where you want them to go. This may involve updating the navigation, search filters, modal windows and other combination of elements.

A redesign on the other hand is like a home renovation. It’s like starting from scratch while considering all features already on the site.

• If your website looks dated and content has been stagnant for years, if it doesn’t have a friendly user experience, takes too long to load, it’s your cue to do a redesign.
• If the company underwent a rebrand, you may want to keep your media assets, typefaces, colors, UX and copy current to reflect the new brand personality.
• If the website doesn’t use current tech that increases your site’s probability to convert (Ex. Responsiveness, PWA etc..)
• If you want to integrate marketing technology to track and analyze product performance (Ex. Adding shopping experience to sell and track products will drastically change the look of your website)
• If you are incorporating a new digital strategy whether through content marketing, social media, advertising or other SEO practices, it will require a new strategy for your content and design.

Any time a website is set to be updated it’s almost always because of marketing and conversion. It can be that the company may want to prioritize the visibility of one product, selling a new product, doing a rebrand, introducing a new feature or just improving user experience.

A refresh done consistently over time is often a better approach than a full redesign or revamp. A constantly refreshed website means that it is continuously maintained to keep up to date with the company’s offerings.

The post When to do a website refresh vs redesign; A case study of Digest.ph appeared first on Chief of Stack.

1. Fluid grids
2. Media queries
3. Flexible images and media

NOTE: This article was originally posted at iStar’s blog, read the full article here

Fluid Grids – Old websites were based on print media like newspapers and magazines. Columns were positioned and displayed in absolute size and position (pixels). Mobile devices changed all this, instead of solely relying on pixels for measurement, responsive design incorporated percentages to the mix to accommodate the growing number of resolutions. Fluid grids or “flexible grid” is the backbone of responsive design. It uses relative sizing to fit content to the device’s screen size. The grids are based on percentages. By basing text size, widths, and margins on percentages, a fixed size can be turned into a size relative to its display space. The name is a little misleading because a grid is not the only thing that makes it flexible, it relies on CSS to position the content.

Media Queries – Also known as breakpoints, it can be used to apply different styles based on what the screen can handle. The website detects the type of device you’re using (resolution/viewport) and correctly displays the content. This can be observed by resizing your desktop browser to different sizes, you will notice how a responsive site adjusts to best display the content. It can be customized to control the width, height, max-width, max-height, device-height, orientation, aspect ratio, etc.

Flexible images and media – Aside from the layout and text, images also needs to respond correctly. This allows your images and other media to load differently for every resolution. It can be achieved through scaling(CSS max-width) or cropping (CSS overflow property). With scaling the media element’s max width can be set at 100 percent so the browser will make it shrink or expand depending on the container. Cropping on the other hand hides portion of the image and still fit it to the container.

There are other things that come into play with responsive design, the above items will get you started and is enough if you know what you are doing. If you would like assistance regarding responsive design or if you are interested with any of our services, please don’t hesitate to contact us, our programmers are always ready to help.

The post 3 most essential principles of responsive design appeared first on Chief of Stack.

NOTE: This article was originally posted at iStar’s blog, read the full article here

A brief history

Prior to the proliferation of mobile devices, a website only had to display properly on desktop and laptop monitors. Designers only had to worry about a handful of resolutions. More often than not a special script was added to automatically select which predefined template will be rendered based on the screen size. This approach produces themes commonly referred to as ‘adaptive themes’ (where templates adapt rather than respond).  Nowadays, with new smartphones and mobile devices being released almost every day it is simply impractical to develop adaptive templates for each screen size. A responsive theme ensures that your website is somewhat future proof and renders properly on all new screen sizes.

Mobile has taken over

Mobile usage has overtaken desktop these past few years. Industries that were traditionally using desktop have switched to mobile (gaming, business, sports, recreation, etc.). Interestingly, Google is ranking “mobile first” websites higher in their search results. If you are a business owner  in 2018, your target market would have already made some form of switch to mobile or is probably using it exclusively.

There is still hope though if you own a traditional non-responsive website, simple websites can still be converted to responsive (*renovated) using responsive frameworks such as Bootstrap. Responsive websites is achievable if you know what you are doing. See this post to learn more

As with anything built, it is better to start building a website from scratch because there are times that a renovation is costlier. However, there are cases that existing websites contain massive/important data that a renovation is the only option.

The post Why a responsive website is important for your business appeared first on Chief of Stack.