About Me
Just a little bit
Hi, I'm Cameron.
I'm a Devsigner.
Dev•sign•er (n)
One who is skilled in the art of design as well as the science of development.
Cameron Gaut
Portland based devsigner & professional freelancer
At your service! www.seegodesign.com
I've been developing & designing websites for 15 years.
And I've never stopped learning.
Every new project is a
new opportunity for
growth.
My Process
Let's talk about
The Elements of User Experience
- Discover user needs
- Gather requirements
- Structure the flow
- Design wireframes
- Apply visual design
In a nutshell:
Step One:
Empathize
“Be someone else. It takes great empathy to create a good experience. To create relevant experiences, you have to forget everything you know and design for others. Align with the expected patience, level of interest, and depth of knowledge of your users. Talk in the users’ language.”
– Niko Nyman
Who are the users?
How do their habits, attitudes, beliefs, and past experiences shape their interactions with the website?
Audience Definition
What do they need to accomplish?
These goals form our use cases.
Instead of asking what features should be included, ask:
-
Who are the actors? Actors can represent multiple personas
e.g. Joe Smith is a Student and Researcher - What are the goals (use cases) of the actors in using the site?
- How will the actors interact with the site to achieve their goals?
User Scenarios
User Personas
- Age & Gender
- Education
- Computer/smartphone comfort level
- Business background
- Interests
- Income
- Occupation
- Goals/Tasks
- Users Journey
To narrow the focus to the key user types for our site, we craft 3 or 4 user personas that include information such as:
- What tasks do the users want to complete on our website?
- What are the users' ultimate goals?
- What other interactions to the users have with us beyond the website?
Takeaway Questions:
User Card Example
As a _________________, I want to ____________________
so that I can ____________________
[persona type]
[immediate goal]
[ultimate goal]
Step Two:
Ideate
“Design supports an open approach in which anyone in the organization can participate to generate solutions, make insightful and meaningful decisions”
– Peter Merholz
Information Architecture
Flow Diagrams
Wireframes
Mind-Mapping
Card-Sorting
Sketching
Collaboration is Key
- Anyone involved in the project has a unique perspective with inherent value.
- My goal is to synthesize collaborator input into a coherent structure
Step Three:
Iterate
“I have not failed 10,000 times. I have not failed once. I have succeeded in proving that those 10,000 ways will not work. When I have eliminated the ways that will not work, I will find the way that will work.”
- Thomas Edison
Step Four:
Prototype
“Any design based on a written spec is a design based on theory. A design based on a prototype is a design based on experience and practice… Prototyping has given us the power to show and tell the story of our design solutions to any given problem rather than just tell the story waving our hands in the air to describe the magic.”
– Todd Zaki Warfel
- Wireframes with Balsamiq
- Clickable Wireframe Prototypes with Axure RP
- Live HTML Prototypes with UXPin
See It To Believe It
Wireframes and mockups help us decide if a design idea works or not. Clickable prototypes are even better!
Step Five:
Validate
We have to arm ourselves with data, research, design patterns, and a clear understanding of our users and our content so our decisions are not made out of fear but out of real, actionable information.
– Debra Levin Gelman
Test often & early
Using interactive prototypes, we can let stakeholders and end-users get a feel for how the site will work before we spend too much time setting it in stone.
My Tools
Strategy & Scope
Structure
Great for creating anything from flow diagrams to clickable prototypes
Skeleton
Nice lo-fidelity mockups
Clickable prototypes
Surface
Development
For authoring PHP, JS, CSS, HTML5, etc...
That's it for now!
Thank you!
Seego Design, an Introduction
By seegodesign
