Wireframes

Wireframes

This is a revised product for an Ecommerce website for a cable television company. I was asked to create this purchase flow as a responsive interface, so while designing the desktop UI, I showed how the mobile view would appear side by side.  Rather than produce a clickable prototype, a front end developer worked closely with me and we applied the visual style guide that had been established by the client.  The client had new features and functionality to add to the responsive design and we worked with the client’s UX team to assist in that effort.

View Ecommerce wireframes

I was responsible for the UI of the Website Builder Tool for an Ecommerce company that sells domains and website products. Through wireframe design, I worked with Engineers and Visual Design/HTML experts to produce an easy to use tool for small business owners. We conducted usability research on the tool to ensure its effectiveness for the target audience.

View Website Builder wireframes

Usually when I design for the web, I include a mobile version of that design that is responsive to the device. The second example shows a side by site view of the mobile, large and small tablet and desktop versions of a website.

View Member Profile wireframes

The fourth example shows a mobile storefront set of wireframes I created on the left, and the final design is shown on the right.

View Mobile storefront wireframes

 

In the last example, a former employer needed a sophisticated Access database that tracked all of their client meetings, employees assigned to each meeting, equipment and materials to be delivered, cost, and feedback for each meeting. With the technical team, I designed the interface screen wireframes along with functional and business requirements, all used by the developers and quality assurance staff to roll out the database. I also wrote the training manual for this system and trained staff to use it.

View Database Application wireframes


Client               Ecommerce, Cable Television and Healthcare companies, Corporate Association
Tools Used     Visio, Omnigraffle, Illustrator

Additional higher fidelity wireframes     DN-higher fidelity examples