Mike Standeven

American Medical Association Home Page Redesign

Role: User Experience | Wireframes | UI Design | HTML/CSS styleguide

Goal: Improve the organization of content and the user engagement of the AMA Home Page while allocating areas for dynamic content from various departments within the AMA.

This project included cross-department brainstorm sessions, requirements gathering from multiple shareholders, and a short timeline to complete. The first step of my process was to create wireframes to block out the regions of priority. This step required several conversations with the departments to discover the priority of each section respectively.

The design departed from the narrow / non-scrolling original page to an easy-to-read page designed to focus the user's eye from the recent headlines and blog posts to the more static popular content links. I used large blocks of color and precise font sizes to allow a user to skim the page quickly, yet be able to read detail when desired. All of the business requirements were met with the design.

I provided a static HTML/CSS mockup to the developers that was easily implemented into the content management system. I also created a responsive style guide complete with HTML examples and CSS snippets that could be easily referenced by developers. The style guide was referred to as a 'living document' because style updates could be edited or added quickly.

American Medical Association Sign On Application

Role: User Experience | Wireframes | Prototype | UI Design | HTML/CSS Style guide

Goal: Improve the user-experience of the Sign-on and New-user Registration application.

The requirements gathering process of this project found that this application will be incorporated by all departments and external entities surrounding the brand. I designed the interface and user flows to be very intuitive and as minimal as possible. I planned for the interface to be adaptive/responsive, though the shareholders did not allocate the time to fully realize the responsive/adaptive aspect.

I built an Axure prototype that was used by an external consultant for the usability tests. The prototype could be quickly changed based on feedback from test users. The user feedback guided some additional design iterations.

I provided the developers a responsive semantic HTML/CSS mockup of how I envisioned the ideal final code. I find that it is most efficient to separate the design from function.

Mobile Application Concept: BikeSocial

Role: Concept | Wireframes | User Tests | Prototypes | UX & UI Designs | Video presentation

Goal: To design a mobile application concept with a user survey, user testing and an iterative design process.

I first created a survey to gauge my understanding of potential users and further develop the application concept and social features. With the survey feedback, I was able to loosely conceptualize some initial requirements for the application such as ride logging, rider communication, and a heat map of routes nearby. I created a few main user flows and detailed the requirements further. I created a series of rough wireframe sketches of the initial screens based on my requirements. The wireframes guided a lo-fi interactive prototype. The early prototype was used with test users to find design deficiencies or successes.

After testing the lo-fi prototype, digital designs were created based on the initial sketches and user feedback. I then flushed out some of the high-level functionality by creating and testing a mid-fi prototype, then tested a second mid-fi prototype after the feedback. I wanted to get some of the main features locked down, and also test out some of the more complex social flows. Instead of the usual explicit instructions, I created loose hypothetical suggestions for users to navigate the prototype.

Some of the updates included an improved navigation structure, a deeper level of interaction with more features, and simplifying the interface. I added several visual improvements as well as modifying the main navigation interface.

Princeton University Public Events Calendar

Role: Requirements gathering | Wireframes | UX & UI Design | CSS

Goal: Create a single interface for all public events to be aggregated and displayed using existing data. Utilize a calendar and list view in one interface.

I first skimmed through the database output to find patterns and to see what data would be most useful for the end user. I found examples of the 'worst-case scenario' so I could get a sense of how much data will be displayed. I have seen designers create mock-ups that use clean and concise data, only to have the design fall apart when real data appears. I wanted to avoid that by allowing a flexible layout for nearly unlimited data to be displayed.

The stakeholders wanted a calendar view and a list view. I have rarely seen full page calendar designs that clearly show useful data, so I concepted the use of a small calendar thumbnail to indicate which day(s) have events. Four simple icons with text change the date range. All of the events show up in a list column. I vary the font sizes for headers and pertinent details so the end user can skim easily.

Mobile Application Concept: WeCycle

Role: Concept | User testing | User flows | UI Designs | Video presentation

Goal: Concept a mobile application for urban bicyclists to track their rides and report hazards to other users.

In this team-based project, I concepted the initial idea, the wireframes and UI elements. We created personas of potential users based on our requirements gathering. A great deal of time was spent creating user flows. As the team held brainstorms, we often had to scale back the ideas to keep the application simple and on topic.

We created several rounds of paper prototypes and held initial usability tests against our user flows to find gaps and get feedback. With feedback we created mid-fidelity prototypes and ran additional user tests.

It was a great experience to learn how trying to pack too many ideas into a simple application can greatly diminish the user experience. It was difficult to keep things simple and functional.