The document provides details about a UX designer and their experience and design process. It then summarizes two projects the designer worked on:
1) A redesign of MSN's "My MSN" portal website. The goal was to update the look and improve usability. Wireframes and mockups were created and modules were developed.
2) Redesigning the signup process for Microsoft Online Services trials. The original process took over 70 clicks to complete. The redesign simplified the process and provided immediate access to services.
About four years ago, I wrote a blog post about Web flowcharts design. It was, and still is, very popular. Today, I'm thrilled to publish the long-waited follow-up article: The definitive guide to Web flowcharts.
The new guide is pretty comprehensive. It covers the most common topics about flowcharts design, from basic ideas to visual vocabulary, from examples to suggestions and tips, from tools for drawing flowcharts to templates and stencils.
Find more information at http://dingyu.me/blog/the-definitive-guide-to-web-flowcharts
About four years ago, I wrote a blog post about Web flowcharts design. It was, and still is, very popular. Today, I'm thrilled to publish the long-waited follow-up article: The definitive guide to Web flowcharts.
The new guide is pretty comprehensive. It covers the most common topics about flowcharts design, from basic ideas to visual vocabulary, from examples to suggestions and tips, from tools for drawing flowcharts to templates and stencils.
Find more information at http://dingyu.me/blog/the-definitive-guide-to-web-flowcharts
UX is way more than most people think. I believe that UX is a mindset that everyone should carry. This is how I approach UX, and think it's beneficial for everyone to know a process that works.
NOTE: This represents a talk I gave to some students embarking on a career in the UX field.
Are you about to start work on a new Web project? Have you planned the project accurately and completely? Thorough planning can avoid so many issues later in the project, but yet it is often ignored or done hastily. In this white paper you'll get a detailed look at the planning process that CommonPlaces employs. With documents such as site maps, site wireframes, content type descriptions, and technology assessments, you can give your project a much higher chance of success.
User Experience Design Fundamentals - Part 1: Users & GoalsLaura B
Â
#1 in a 3-part series on UX Fundamentals: Users & Goals
* Value & Process
* Goal-directed design
* Users and their goals
* Learn how to articulate the goals of your productâs users
* Learn how to use user goals to assess a website or product
Content-Centric Design The Future of Online User AssistanceEdward Galore
Â
Content accessed online is often stripped of its hierarchical relationship to related content. Help articles must be encapsulated with metadata so that they can be understood when discovered or accessed out their original content repository. By embedding context within the the content object, the content will remain comprehensible even when accessed without the original information structure.
My final deliverable for the Moodle redesign project - a (3,000 word) report detailing all the proposed changes for the existing Moodle system.
The report goes through all the details, large and small, going through my motivations, inspiration and intentions of the whole project. There are visual depictions inserted to aid the points made, and in-depth written analyses of current features, alongside changes that are to be made.
UX is way more than most people think. I believe that UX is a mindset that everyone should carry. This is how I approach UX, and think it's beneficial for everyone to know a process that works.
NOTE: This represents a talk I gave to some students embarking on a career in the UX field.
Are you about to start work on a new Web project? Have you planned the project accurately and completely? Thorough planning can avoid so many issues later in the project, but yet it is often ignored or done hastily. In this white paper you'll get a detailed look at the planning process that CommonPlaces employs. With documents such as site maps, site wireframes, content type descriptions, and technology assessments, you can give your project a much higher chance of success.
User Experience Design Fundamentals - Part 1: Users & GoalsLaura B
Â
#1 in a 3-part series on UX Fundamentals: Users & Goals
* Value & Process
* Goal-directed design
* Users and their goals
* Learn how to articulate the goals of your productâs users
* Learn how to use user goals to assess a website or product
Content-Centric Design The Future of Online User AssistanceEdward Galore
Â
Content accessed online is often stripped of its hierarchical relationship to related content. Help articles must be encapsulated with metadata so that they can be understood when discovered or accessed out their original content repository. By embedding context within the the content object, the content will remain comprehensible even when accessed without the original information structure.
My final deliverable for the Moodle redesign project - a (3,000 word) report detailing all the proposed changes for the existing Moodle system.
The report goes through all the details, large and small, going through my motivations, inspiration and intentions of the whole project. There are visual depictions inserted to aid the points made, and in-depth written analyses of current features, alongside changes that are to be made.
UX BASIS is a process and a set of tools to help your organization engage with your users through the online products that you develop. By building an experience around the user, it will enable you to answer their needs whilst ensuring the needs of your business are also fulfilled.
Evidence based design creates a greater value for your business and also encourages collaboration between your teams and results in knowledge sharing between individuals.
This talk was given at a meeting of web project managers (organised by J.Boye) in May 2010.
Planning more effective milestones in web design projects it-toolkitsIT-Toolkits.org
Â
Most successful web design projects are organised into a system of milestones with each one representing a critical piece of the project. Milestones are simple in concept, but they can be tricky to nail down.
For example, how specific should we get with the milestones? If we get too specific, we risk breaking the project down into a chaotic mess of little chunks. However, if we arenât specific enough, the deliverables become unknown and nothing gets done.
Plug your own content in to this presentation in order to present your ideas clearly to remote clients, save time, apply to more projects quicker and ultimately win more pitches.
Download the template at:
http://startloaded.com/resources-for-digital-nomads/presentation-template-for-remote-web-design-projects/
Editable contents of the template
1. Project overview
2. Project features
3. Proposed website structure
4. Mood-board
5. Web development process
6. Project time-line
7. Pricing
8. Contact details
Get hands-on advice for rapid Agile prototyping in a product team.
You'll learn:
- How to determine the right depth and breadth for MVP prototypes.
- How to prioritize use cases for prototyping.
- How to elicit the right stakeholder and user feedback.
- How to correctly annotate prototypes for dev and QA.
Scripted navigation ideas for Oracle Service CloudMark Kehoe
Â
A series of examples on how to use Agent Scripting within Oracle Service Cloud in new and inventive ways. The document covers three examples on how to improve the experience within the agent desktop.
Information architecture for websites and intranetsContent Formula
Â
A quick introduction to the art and science of information architecture and how we apply it at Content Formula to build effective websites and intranets
In this session we'll discuss how agile analysis and project management processes can be applied to Drupal implementation. We'll discuss the setting of expectations for stakeholders when planning and executing a Drupal project, and how to avoid the typical pitfalls. You'll also learn how a multi-disciplined project team can smooth your project execution, and increase your chance for overall success.
2. About me I have been in the design industry for over 15 years and have a great deal of diverse experience: Microsoft Freelance positions through Filter Microsoft Studios Started and run my own photography business Jack Morton Worldwide Imagio Sitewerks Boeing Asymetrix Starwave Real World studios, England Various freelance projects for small businesses and individuals Custom Jewelry design My areas of expertise include visual design, interaction design, information architecture, motion design. I also do pottery, jewelry, photography and love snowboarding, spending time with my son, and being outdoors.
3. Design process Here is a rough outline of my basic design process. This of course can vary a little from project to project but the basic principals and steps remain. Information gathering: First I gather information, ask a lot of questions and get an overall scope of the project. Read a spec document if available. Find out what are the business goals and what are the scenarios for the project: who is the user? Research: I usually do some research and competitive analysis of similar companies and/or products to get a sense of whatâs out there, what is working well and why Brainstorming: Then comes brainstorming and sketching. I usually have an idea brewing by now and getting together with others and talking about the project gets the juices flowing and gives me a lot of ideas to work from Wireframes: Next comes grey-boxing or wire framing to get the rough idea down on paper and start work through some of the designs, interactions, and scenarios. I usually try to pick 2 or maybe 3 designs to show initially and after deciding on one, move forward flushing that design out in itâs entirety Revisions: Now comes the time for revisions and changes. I review the designs with my client or team and gather input and feedback, and based upon that feedback make changes to the designs. This process can go on for a few iterations depending upon the scope and depth of the project Usability: somewhere in this timeframe usually comes usability studies to get some user feedback and incorporate any changes needed based upon that feedback. High fidelity: Then itâs high fidelity â or perhaps handoff to development to begin coding. Or even prototyping. Each project is different! Integration: I then work with development or whoever is building the site/project to ensure that the design I created is the one implemented. This part of the process is essential to getting the design you want out the door.
12. Examples of current site Going through the current website allowed me to see what features were being used and how. This overview also provided me the opportunity to asses the overall user experience of the site, helping define what needed improving or added.
13. Research After a thorough competitive analysis of similar sites and analyzing the user experiences, I made some basic recommendations as a starting point for moving forward in our redesign. These recommendations acted more as a spring board rather than the definitive outcome. Below are the top personalized portals being used today. PageFlakes My AOL iGoogle My Yahoo NetVibes
14. Sketches/Wireframes After numerous designs, here is the basic homepage default layout I designed after making my recommendations. It shows a very basic layout but includes many of the key features we wanted to include. This also gives a sense of how clean and simplified the homepage would look.
15. Sketches/Wireframes Hereâs how drag and drop would work with modules. The cursor would change into the 4 grab arrow icon and you would grab/drag the module and depending upon where you move it, you would see a preview outline appear where it would land.
16. Sketches/Wireframes There were many different features that needed to be designed. From changing your theme to emailing your page to a friend.
17. Sketches/Wireframes The Add Content Gallery â a new section of the site where you can go research and add content to your page. This was a preliminary design, but the overall functionality and design stayed relatively the same in the final build.
18. Sketches/Wireframes Add Content Gallery â module details page had many purposes: to give module preview and information, to give data on how many users etc. , allow people to share modules, allow users to rate and read comments on modules, and to give recommendations of modules based upon what you were viewing at the time. None of these features made it into the new version.
19. Sketches/Wireframes Add Content Gallery â Search results page was just one take on how we could display search results from searching the content gallery. The final result can be seen later in the slides.
20. Mockups After the team reviewed and I made multiple changes to the layout, it was time to do high fidelity mockups of the site. The default color was easy to decide upon since the mandate for this was to match closely to the msn.com homepage, this tied my msn into the homepage much more closely than before and gave users a sense of familiarity The changes that were made to the UI for the mockups were minor. One hurdle was the âadd content galleryâ and how we would display the module previews within the gallery. Specifically how to separate the msn content from content from the web content. An illustrator was brought on board to help with the theme graphics; this is a significant part of the new look of my msn.
21. Mockups Here is a first mock up of the default homepage and another showing new user info balloons to show here new content will appear and where to add content and change your theme and layout
23. Mockups The add gallery page showing a search result separating MSN content and content from the web. Also a module preview pop-over box which the user gets when they rollover a module thumbnail and click on a âpreviewâ button.
24. Module Development As soon as the style layout and basic functionality were decided upon, module development began. The basic module interaction changed from having inline dialog boxes and input to having edit menus The basic module edit menu remains the same for each module except the input itself can vary for different modules Each module and itâs interaction were designed by myself and finalized upon by the team
25. Modules MSNBC News module is an RSS Feed and only has one change item. This is the traffic module and did not require much change. Movie times module had inline options and one in the edit menu as well. Fox Sports Scoreboard was one of the more complex modules. The horoscopes module did not change in functionality. eBay Auctions was very straightforward.
26. Final Site After months of conceptual work, design and prototyping the beta build is nearly done The final beta site is a vast improvement upon the current version of my msn There are still many bugs in the beta build that have not been corrected Many of the features I proposed did not make it into the new version: Dynamic themes Unlimited new content and gadgets Module reviews and comments from users Module recommendations Module detail pages Full scalability of site
50. Information about the specific offer, price and terms is provided. This helps reinforce user selection from the presales marketing site.
51.
52. The Domain name field does not accept special characters including âhyphenâ âampersandâ or âunderscoreâ, however the current BPOS 9.X experience accepts them.
53. Microsoft Online Services ID: This is a New concept to users. Business decision to use this versus WLID.
54. Captcha screenshot is complex to read because we have to use the WLID CAPTCHA which has tested very poorly.
55. 9.X parity: we had to use the existing BPOS 9.X sign up as a design model however if we were to do this differently ideally would reduce the amount of required fields on this form.
78. Administrative services getting started Many different iterations done with many challenges and continually changing goals and priorities: Getting started Migration Coexistence Task-based UX vs. Scenario based UX Parity with the IW homepage Constantly changing visual design and nomenclature
113. For more examples of previous work see www.jeanninefrazier.com Photography business www.delphenadigital.com Jewelry and other creative work www.delphena.com The End
Editor's Notes
Without WLID, we need to add ~ 3 clicks and 9 fields.