UX | UI Strategies Work

Having a well planned out UX strategy, can make for a wonderfully executed responsive website.

My Approach

Blue Chip Marketing needed a quick mockup and design for a clinical study website, that absolutely needed to be responsive.

I designed 3 different layouts, landing on this version as the final approved design. When it came time to present these mockups, I introduced using a prototyping tool, called InVision App, to present the final pieces. The link can be seen here.

With this software I was able to add quick links (hotspots) that acted like real functioning buttons. I added menu items that would jump to the corresponding areas on the page, and even prototyped a mobile version with a drop down mobile menu, which again jumped to the particular area of the page in which the nav item was selected.

Blue Chip loved this method, and has since implemented presentations in this fashion, rather than endless pdfs that have to be scrolled around and moved around the flat image during presentations.

A Responsive Web Design

Having a well planned out UX strategy, can make for a wonderfully executed responsive website.

Keeping that in mind, I built both a desktop version and a mobile version of this website straight from a single wireframe of an “endless scrolly site” in a span of 2 days.

Take a look at the live site here. www.ascentcopdstudy.com

Wireframing

UX Pin was used to create the original wireframe. The template had a sticky header, endless scroll type design, and quick nav links to the sections to which they select.

High Fidelity Mockups

I used photoshop to create both the desktop and mobile versions of these site. The plan was the for the front-end developers to take these files and convert them to html and css.

User Experience Design

The user experience was developed and tested in a great app called “InVision App“. Here you can create links, buttons and pages without even creating code.

Responsive Web Design

Below you’ll see both a desktop version as well as a mobile version of the clinical study website. I designed both so that each piece of content would be viewable on all devices.

SmallerIpadShot-crop-v2

1
Team Members
10
Days to make
5
Review Process Meetings
1
Front End Developers

If you like this project, please take a second to share with the world
so others can see what we can do for their mobile friendly web projects!