In recent years, I’ve done a considerable amount of user experience design work. Below are several wireframes I created while at EnviroMedia. More info about each can be found in the captions. Please keep in mind that wireframes are not intended to convey information like colors, fonts, graphical assets, final content, or precise layout. Instead, their purpose is to determine the overall layout and user flow.
Wireframe for home page of the EnviroMedia website. I developed this layout after much discussion with the executives and other employees.
A page in the "About Us" section. The wireframes were created with responsive design in mind.
The "Team" page in the "About Us" section. This page uses an accordion menu.
The main page of the Portfolio section. This was based on feedback and discussion with the Creative Director, who wanted a better way to showcase the agency's work.
An individual campaign page in the Portfolio section. The puzzle-piece layout allows for a variety of images and videos to be displayed.
The "Approach" page. In mobile view, the images and text would stack in a single column.
The news page, which follows a basic blog-style layout.
The mobile layout of the home page.
Wireframe for the home page of a website promoting environmental preservation of Galveston Bay.
An individual article on the same site. I suggested that the site use content marketing techniques for audience engagement (hence the "listicle" seen here).
A full-width article page. This was necessary for certain content (like the old Flash-based interactive tour) that required a larger page width.
The mobile view of the home page. The box-based layout was a natural fit for responsive behavior.
An individual article page in mobile view.
Home page wireframe created for a proposal (for a site focused on healthy babies through better maternal health).
Main page of the "Women" section of the site. Both this and the previous page use a portal-style layout to highlight a range of articles and content.
An individual article in the "Women" section. The content is near the top, and links to related articles and news items are below that.
The mobile view of the home page.
The mobile layout of an individual article page.
Below are some wireframes I built for Appconomy. These were part of a project to create an iPhone app, iPad app, and website that provided different methods of viewing a single rich set of content (including articles, videos, and podcasts). The apps and website were also designed to include a vibrant community component, featuring a range of social interactions both within groups and around content. In the course of building these wireframes, I conducted extensive research on similar apps to determine best practices. I also met with supervisors on many occasions to present my work and receive feedback, which I incorporated into the final layout.
The home screen of the iPhone app. It's designed to provide easy access to different sections of the app.
A standard blog-style list of recent articles, with tabs to select categories on the bottom.
An individual article (with the option to 'like' it, share it, or comment on it).
Part of the community section that allows users to view forums they already belong to or join additional discussion groups.
The contents of an individual forum. Posts are sorted reverse chronologically and those with comments have a red marker.
An individual message within a forum, including comments at the bottom. This incorporates elements of a messaging-focused app built by another team at the same company.
Upcoming events (with separators for time period and category tabs at the bottom).
An individual event listing with the option to 'like' it, view the location on a map, or read more details below.
The home screen of the iPad app, which contains a quick overview of the latest content in different sections. Each section can scroll up/down independently, and the entire view can scroll left/right to reveal more sections.
The article section (with category tabs at the bottom and an option for advanced filters at the top).
The filters panel allows users to select articles within a specific category, thus making the content a valuable reference tool.
An individual article, with quick access to the main menu and additional articles in the left panel.
An activity feed of the latest social updates in the community section of the app. The focus here is on user interaction with content, as well user discussions around groups/topics.
The video section, which is similar to the articles category.
The events section, which functions similarly to the articles and videos.
An individual event selected, with quick access to the main menu and other events in the left pane.
The Apps section, where users can browse a curated list of apps, read more info about individual apps, and link to the App Store to purchase them.
An individual app, again listed in a similar 2-pane fashion as in previous sections.
Below are several wireframes I created for Enspire. They were made to accompany a proposal, so they only show the app’s suggested functionality at a very high level. The app is designed to guide users through an existing set of steps to aid in problem solving and decision making. In order to keep development costs down, the features and layout of the app are intentionally very basic (and the tablet and phone versions share many components).
Home screen of the iPhone app, where the user selects the desired problem-solving method. (Colors are based on existing brand identity.)
Main menu of the "Decision Analysis" problem-solving method. Users can select any step (not necessarily in order) for maximum flexibility.
Sub-menu of the "Decision Analysis" method.
Questions that the user must answer within the problem-solving sub-step they selected.
Answer field revealed, along with buttons to see examples and more info.
Home screen of tablet app, where users may select the desired problem-solving method.
Sub-menu of Decision Analysis method. The 2-pane layout allows easier navigation of the multi-step process.
Questions and answer field for the problem-solving sub-step selected by the user.
Below are wireframes I created for FanTrail several years ago. FanTrail was a company that generated mobile apps for bands using an automated process. In order to generate an app, new users had to fill out a lengthy form and supply various details about their band. The company had difficulty getting users to complete this process, so they asked me to create a more user-friendly online form. In response, I created these wireframes and wrote the accompanying “tips” text (shown in the wireframes).