UX Design
Please click on an image to view the case study.
Please click on an image to view the case study.
Thinking about the interests and psyche of selected individuals lead to creating some fun characters. The process begins with examining a human existence and breaking apart. Sorting and highlighting lead to identifying playful data points to build from. True personas they are not, but of a similar data driven process.
Compliance Dashboard
What is it?
The SES dashboard was designed as a central location for visual up-to-date metrics showing compliance conditions within several functions of the org. Users were identified as program managers, engineers, and cross company compliance teams.
Scope: Discovery to Development
Client: Microsoft Advertising
My Role: Lead User Research / Lead UX Design / Lead Visual Design / Lead Usability Testing
Team: Alan (Program Manager), James (Developer)
Primary Use Cases
Getting Started / Research
To sort through the ambiguity that usually begins with most projects, I started by having open and informal conversations with stakeholders and users. From these early discussions, I collected significant data regarding the requirements for generating reports within the dashboard system.
In this early discovery phase, an affinity map exercise to some degree is helpful. A concept map is always beneficial to help me understand the collected data in a contextual format.
Ideation / Design
While data synthesis is starting to take some form, I try to keep early designs very rough and informal. Quick sketching and whiteboarding sessions allowed me to explore various possibilities with the data visualizations. Sharing these early ideas with team members helped us reach a mutual understanding early in the process.
Iterative Design
Following the philosophy of “failing fast”, design ideas were continually put out to the group for feedback. Metric indicators evolved from squares to ellipses. Metric circles being out of compliance were represented as larger ellipses. User feedback reacted negatively to this.
Wireframes and Prototyping
By creating wireframes and building some prototypes in Axure, the team was able to discuss and iterate different ways of drilling down for more detailed analytics.
Redlines
A key requirement of the program manager was to have a flexible system, allowing for various size visual analytics. I created a grid, allowing for a single tile to represent a simple analytic like a number, while also allowing for more complex visual analytics to occupy several tiles.
Final Designs
Responsive Design
While talking with various users of the dashboard system, I learned they would not be drilling down into granular data with a mobile device. The the mobile environment, a user would simply want to see quickly if there were any metric spaces out of compliance. Therefore, the mobile environment was designed to hide the complex data visualizations.
Microsoft Innovation Center
What is it?
The Microsoft Innovation Center was designed to highlight and promote the activities taking place at locations throughout the world. The primary audience is the MICs themselves with the secondary audience defined as the general public.
Scope: Discovery to Development
Client: Microsoft Innovation Center
My Role: Lead User Research / Lead UX Design / Lead Visual Design
Team: Ariella (Project Manager), Darek (Creative Consultant), Bill (Developer), Ed (Program Manager), Jes (Content Developer)
Primary Use Cases
Research
In discussions with the team, I learned it was highly important to represent the site as very dynamic and collaging different types of content. This would allow for the Opportunity to aggregate best items across the entire MIC landscape, like tweets, events, posts, and videos. For my comparative analysis, I looked at a few storytelling based Microsoft sites to evaluate their feature sets.
Wireframes and Prototyping
Time constraints prevented me from working on the whiteboard and in a notebook to establish initial design sketches. I went straight into Axure to draw up some wireframes to initially present to the client. The feedback from two iterations of the prototype was minimal.
Final Designs
A twelve column grid was used for the layout of these screens, accommodating a design solution to work across multiple devices.
Responsive Design
The landing page, illustrating the breaking points of the 12 column grid system on a mobile device.
City of Seattle Intranet, InWeb
What is it?
The City of Seattle had a need to redesign and rebuild their intranet website, InWeb. The current site has a poor user experience and lacks flexibility to support dynamic content changes.
Scope: Discovery, Taxonomy, Wireframes
Client: City of Seattle
My Role: Lead User Research / Lead UX Design
Team: Ariella (Project Manager), Mike (Developer)
Primary Use Cases
Getting Started / Research
I initially analyzed the existing InWeb intranet, existing brand guidelines and assets, 36 creative brief questionnaires, user research from various departments, areas of ownership, overview of departments, and unique goals and needs.
Current Pain Points: The existing intranet system revealed disorganized content, a broken search functionality, difficult navigation, lack of department cohesiveness, and out of date content.
Users: The City of Seattle employs a diverse group of users. Education spans from a high school education to PhDs. Job titles cover Line staff to Deputy Director and age ranges from early 20’s to mid to late 60’s. Most intranet access is through a desktop.
Taxonomy
I conducted a card sort exercise and analyzed the results to validate my theories of organization.
Wireframes and Prototyping
.
Landing Page Iteration One
Department Page Iteration One
Landing Page Iteration Two
Department Page Iteration Two
Simple Content Page
Digital Sports Marketing Playbooks
What is it?
Sponsorship is big business at sporting events. This project was a proof of concept in presenting visual data analytics providing ROI information.
Scope: Visual Exploration
Client: Sports One Marketing
My Role: Lead Visual Design
Primary Use Cases
Hi Fidelity Designs
Mobile Gardening
What is it?
The American Horticultural Society wants to get young adults ages 18 - 35 involved in their Master Gardener programs, by raising awareness through a gardening-oriented lifestyle application. WeFlourish was designed to give users daily advice on growing gardens at home and connecting with Master Gardeners in their communities. The application provides a calendar for planting and harvesting with access to a database of seed information and notifications for local events.
Client: American Horticultural Society
My Role: Domain Research / User Research / UX Design / Visual Design / Usability Study
Team: Justine and Alex
Research
We started by learning about the master gardener program and collecting data points. Master gardeners are typically older people who appear at workshops and community events. With this information, we were able to post a screener and lined up six people to interview. With all of our collected data points, we put together an Affinity and Concept Map, and learned who our users were. We narrowed our feature list to providing a calendar to local master gardener events, and a system to help gardeners reach their full potential in the garden.
User Flow
A User Flow was developed to create a clear path for an onboarding process, planning a garden, and connecting with a Master Gardener.
Early Sketches
As a team, we worked together on whiteboard and sketched ideas with timed iterations.
Wireframes and Prototyping
Final Designs
Online Reservation System
Research
Early Sketches
Final Designs
Microsft LCAWeb
Client: Microsft
My Role: UX Design / Visual Design / Usability Study
Team: Large Development team
Wireframes and Prototyping
Content Page Types
Home Screen Designs
Responsive Design
900 Breaking Point
660 Breaking Point
320 Breaking Point
Promotional Presentation
Axure Prototypes and Design Specification
Social Media Management System
Design
Our team followed some of the basic principles of Design Studio and collaborated with the initial Sketches, and timeboxed each iteration. We discussed the rough designs and continued with this process until we came to mutual agreement.
High Fidelity Designs
Windows Phone 7.0
Windows Phone 8.0
Windows Phone 8.5
Client: UnifyCloud
Client: Microsoft
Client: Washington State Office
Client: AMD
Client: AMD
Client: AMD
Client: AMD
Comprehensive Reel
Click here to open PDF
LCAWeb Design Spec
