At Divio we do Communication. Creativity. Ideas.

We build big brands and deep relationships.

And we love to code with Python

This is our vision of the new Python.org

Goals

Goals

After reading the brief it was clear to us the site needed restructuring, rejuvenation and revitalization

For internal use only

Goals

Four core principles were defined

For internal use only

Goals

EASY TO NAVIGATE

ENGAGE USERS

MODERN DESIGN

EASY TO UPDATE
For internal use only 9

Goals

Therefore, understanding the audience and determining the workflow was vital to achieve the objectives

For internal use only

10

The audience

The audience

Let us introduce the audience

For internal use only

12

The audience

Christian Bertschy
CEO at Divio AG
Choosing the right programming language is at the base of a successful web agency

Opportunities

Reliable programming language that has been there for some time Its important that code is easily understandable and sharing code with other developers is possible Interested in success stories, and the markets that Python is reaching

Outcomes

Confidence in Python as a product for my clients Confident in hiring Python professional developers

Entry points

Google Python.org

Sharing points

Twitter Django CMS community Divio

For internal use only

13

The audience

Matteo Larghi
Creative Director at Divio AG
Understanding the basics allows me to interact closely with development team and exceed design boundaries

Opportunities

Need to read and watch tutorials to understand the capabilities of Python Interested in an active community Interested in success stories and what kind of companies are using Python

Outcomes

Better relations with the developers Need to be able to advise clients on what exciting things are happening and how it helps them Confidence in a beautiful language that is associated with great quality and professional work

Entry points

Google Python.org

Sharing points

Twitter Divio

For internal use only

14

The audience

Stefan Foulis
Senior Web Developer at Divio AG
I am very passionate about developing in Python. Being part of its community and giving back to it makes me proud

Opportunities

Needs to be able to troubleshoot coding issues quickly and efficiently Interested in release updates and its impact Wants to be able to join sprint events and conferences in Switzerland Interested to get in touch with fellow developers to discuss issues, bugs and happenings in the community

Outcomes

Increased development knowledge of Python Able to get actively involved with sprint events Quickly able to access documentation specific to the release version required Able to report bugs in efficient and accurate manner

Entry points

Google Python.org

Sharing points

Twitter Django CMS community Divio

For internal use only

15

The audience

Vanessa Tay
Senior Project Manager at Divio AG
Obtaining key information about successful implementations and benefits of Python enables me to win and deliver projects

Opportunities

Needs to be able to advise clients of other companies that have successfully implemented projects using Python Wants to know the competitive advantage that Python has in relation to other programming languages Wants to assist team members by understanding the core principles of Python Interested in the next exciting developments to Python

Outcomes

Able to quickly access success stories about companies Able to understand technical issues and bugs to better advise clients and actively support team Able to direct clients and team members alike to the relevant documentation

Entry points

Google Python.org

Sharing points

Divio Project Management communities

For internal use only

16

The audience

Angela Dannhorn
UX and UI designer at Divio AG
The simplicity and elegance of the language makes my work stand out even more

Opportunities

Need to read and watch tutorials to understand the capabilities of Python Interested in success stories and what kind of company are using Python Interested in the community and how they interact with each other

Outcomes

Better relations with the developers Confidence in a beautiful language that is associated with great quality and professional work

Entry points

Google Python.org

Sharing points

Twitter Django CMS community Divio

For internal use only

17

The audience

The people at Divio formed the perfect user personas for Python

For internal use only

18

The audience

Furthermore, we engaged two of our clients to brainstorm in the analysis and conceptual phases

For internal use only

19

The audience

Mathieu Meylan
Senior Web Developer/Architect at Orange Switzerland
Making strategic decisions to provide Orange the edge is crucial, Python is a great fit for both the company and myself

Opportunities

Interested to get started quickly by understanding Python functions and capabilities Wants to know there are support groups on hand to assist when trouble arises Interested to know if Python has an implementation of a tool that exists or does not exist in my language Interested to know if Python can be easily integrated with other languages

Outcomes

Confident in Pythons capabilities as language Confident in other Python developers

Entry points

Google via recommendation

Sharing points

Twitter Orange

For internal use only

20

The audience

Rafael Schenker
Digital Marketing Manager at Marionnaud
Striving to obtain a competitive advantage by staying at the forefront of technology is key for me

Opportunities

Likes to know what the latest technologies are and why to use them Needs to be able to advise of other companies that have successfully implemented projects using Python Wants to know the competitive advantage that Python has in relation to other programming languages Wants to assist team members by understanding the core principles of Python

Outcomes

Confident in Pythons capabilities as language Able to utilise success stories to present internally the benefits Python can bring

Entry points

Google Via recommendation

Sharing points

Marionnaud

For internal use only

21

Workflow

Workflow

Our workflow is based on four key steps

For internal use only

23

Workflow

Analysis of Python competitors websites

Reorganize pages and define new sitemap

Wireframes for key pages

Homepage design

For internal use only

24

Workflow

By following these steps, we can cover all phases necessary to achieve our goals

For internal use only

25

Workflow

UI - User Interface UX - User Experience IA - Information Architecture

C
Context

U
Users

C
Content

D
Design

For internal use only

26

Analysis of Python competitors

Analysis of Python competitors websites

Consider

Clear navigation menu Try Ruby feature is a plus

Avoid

Old layout, design is not sexy Content is sometimes hidden in long pages and not easy to find Pages are all the same

For internal use only

28

Analysis of Python competitors websites

Consider

Clear navigation Minimized amount of content

Avoid

Old layout and content structure Design style not beautiful Overall boring experience Usage of typography

For internal use only

29

Analysis of Python competitors websites

Consider

Nice use of colors Good headline, straight to the point Minimized information Fluid layout makes the website responsive

Avoid

Navigation not clear Old layout, design is not sexy Content is sometimes hidden in long pages and not easy to find Content bad organized

For internal use only

30

Reorganize pages and define new sitemap

Reorganize pages and define new sitemap

Sticky-notes were used to start the analysis of current pages and contents.

Key features and functionality were established by the audience.

For internal use only

32

Reorganize pages and define new sitemap

After long discussions, we were able to make bold decisions, move contents, add and delete pages

For internal use only

33

Reorganize pages and define new sitemap

Clear distinctions between Python.org and third level websites

This will be the new meta-navigation positioned at the top of each page
python.org foundation.python.org pypi.python.org docs.python.org wiki.python.org

jobs.python.org

shop.python.org

Current situation

New page

For internal use only

34

Reorganize pages and define new sitemap

We designed a new main navigation menu

About Community Success Stories Security Downloads Blog Documentation Events

Current situation

New page or moved here from another section

For internal use only

35

Reorganize pages and define new sitemap

About
Applications Statistics Quotes Media/CI Getting Started Website Help
Page to keep New page to highlight numbers about Python e.g. downloads, community members, fans and so on Page to keep, but some of the quotes will be also in success stories. A summary page about what they say All Python corporate files and information e.g. logos and guidelines

This page has been deleted and its content moved in the Documentation landing page Moved in the footer, name changed to Website credits

Moved in the footer

For internal use only

37

Reorganize pages and define new sitemap

Success Stories
Software Development Arts Business Education Government Scientific Engineering

This page has been moved to the main navigation menu to get more visibility and to add category sub-pages without losing the 3-click rule

Category landing pages will help the users to better navigate through our success stories improving their experience. Each success story has its own detail page.

For internal use only

38

Reorganize pages and define new sitemap

Downloads
Releases Mac OSX Windows Others Source License
Page to keep, each release is detailed under this page

Page to keep

Page to keep

Page to keep

This page has been deleted and its content moved in the Downloads landing page This page leads to docs.python.org therefore a main link in the downloads sub-menu is no longer required.

For internal use only

39

Reorganize pages and define new sitemap

Documentation
Audio/Visual talks PEP index Current docs FAQ Help Wiki Beginners guide New-Style classes
Page to keep, content needs to be updated

Page to keep

License Regular expressions

Moved in the footer

This pages all lead to docs.python.org therefore a main link in the documentation sub-menu is no longer required.

This link will have a dedicated spot in the new meta-nav positioned at the top of each new page (see wireframe). This page leads to wiki.python.org therefore a main link in the documentation sub-menu is no longer required. This page has been deleted and its content moved in the Documentation landing page

For internal use only

40

Reorganize pages and define new sitemap

Community
Mailing list Special int. groups IRC Polls Python Conferences Diversity Logos Jobs Python merchandise Awards
For internal use only
Page to keep

Page to keep

Page to keep New page with current poll and archive of past results

This page has been deleted and its content moved in the Events page Moved in the footer This page has been deleted and its content moved in the Media/CI page in the About section This page has been deleted and instead this link will have a dedicated spot in the new meta-nav positioned at the top of each new page (see wireframe). This page has been deleted and instead this link will have a dedicated spot in the new meta-nav positioned at the top of each new page (see wireframe). This page has been deleted and its content moved to the new Foundation website

41

Reorganize pages and define new sitemap

Security

Blog

Events

This page has been moved from the News section and added to the main navigation

This is a combination of the blog and the former News page that has been deleted

This page has been added to the main navigation menu to get more visibility as a new section

For internal use only

42

Reorganize pages and define new sitemap

These links will be the footer

Help Diversity
Non-English resources

Website credits

Legal statement

For internal use only

43

Reorganize pages and define new sitemap

What happened to the Foundation?

For internal use only

44

Reorganize pages and define new sitemap

Due to the scale of PSF section, we separated it giving it the importance it deserved
foundation.python.org

For internal use only

46

Reorganize pages and define new sitemap

We divided the website by categories for a better user experience and content placement.
foundation.python.org

About
Executive summary Mission statement Public records Committees Miscellaneous rep. Coop. organizations

Membership
Sponsor Membership Membership FAQ Membership roster League Membership forms

Donations
Volunteer Contribution forms Grants program Suspicious checks

Legal
Bylaws Trademark policy Weblog policy Licence

Media
Press releases Awards Logo

PSF blog

For internal use only

47

Reorganize pages and define new sitemap

Special attention was given to Jobs and Shop to encourage revenue generation
jobs.python.org shop.python.org

For internal use only

48

Wireframes for key pages

Wireframes for key pages

Based on the new structure needed to make Python.org successful, we designed wireframes for key pages. This is an important step to define user paths, page content and design layout.

For internal use only

50

Wireframes for key pages - Python.org homepage part 1

For full size wireframes please see wireframes_design.pdf document

Meta Navigation for third level url websites

Main navigation featuring drop downs menus

This space is dedicated to cool engaging features like try Python now
(more on page 54)

Headline/statement Important to keep this in a high position

Documentation for current and potential users, links to docs.python.org

For new users willing to learn Python Newest releases for current and potential users

For internal use only

51

Wireframes for key pages - Python.org homepage part 2

For full size wireframes please see wireframes_design.pdf document

Four or five different most representative success stories to load randomly on the homepage

Statistics directly connected to each success story shown in the box on the left

Online polls, easily updatable and giving the page a fresh look Space used to advertise the Python Foundation, its membership, donations and sponsorships

For internal use only

52

Wireframes for key pages - Python.org homepage part 3

For full size wireframes please see wireframes_design.pdf document

Latest events displayed with dates

Connect with Python: latest tweets from Twitter and main Freenode IRC channel Latest articles and stories from the blog

The footer works like a sitemap, all links in the main navigation go here Footer bottom links and copyright information

For internal use only

53

Wireframes for key pages - Python.org homepage: Try tool

For full size wireframes please see wireframes_design.pdf document

Say welcome to a fun and easy way to getting started

blinking cursor, attract yes and engage users

Devs natural reaction is to type in, follow the instruction...

press enter to getting started

For internal use only

54

Wireframes for key pages - Success stories landing page

For full size wireframes please see wireframes_design.pdf document

Active section highlighted in the main navigation

Highlighted success story

Next three important success stories highlighted

Introduction to each category

For internal use only

55

Wireframes for key pages - Downloads landing page

For full size wireframes please see wireframes_design.pdf document

Recognition of current system setup Free search of specific release numbers

Help choosing between Python 2 and 3, link to wiki

Tool for quickly browsing through releases

Quick info about source code

Landing for requirements with direct links to Mac, Windows or others

Landing point for Licenses, leads to docs.python.org

Release schedule calendar

For internal use only

56

Wireframes for key pages - Documentation landing page

For full size wireframes please see wireframes_design.pdf document

Entry points to documentations 2.x and 3.x Getting started video, introduction to Python Getting started area, lots of content to show here, suggested use of accordions to display and hide sections

Introductions to Audio/Visual talks and PEP Index sections

Download documentation copies, links to docs.python.org

Landing points for Beginners guide, FAQ and Core development, all links lead to docs.python.org

For internal use only

57

Wireframes for key pages - Foundation homepage

For full size wireframes please see wireframes_design.pdf document

Python Foundation selected in the meta navigation

Updated main navigation menu

Introduction information about the Foundation The impact of this page should be more human related

Become a member entry point

Introduction to About section

Donate to Python entry point

Supporters and league of awesome entry point

Awards entry point

Same footer concept as Python.org but with updated links related to PSF

Introduction to the PSF wiki, leads to wiki.python.org

For internal use only

58

Wireframes for key pages - Jobs homepage

For full size wireframes please see wireframes_design.pdf document

The logo has jobs to easily identify the URL visited

Active section highlighted in the main navigation

Jobs list results with filters to help the users navigation experience

Button for posting a job on the website, the idea is to get revenues

Top employers, possibly advert spot to sell to companies

Jobs list with position, category, location and date

Link to Python.org

Possibility of stay updated with RSS and Twitter

For internal use only

59

Wireframes for key pages

The sitemap and wireframes establish a go-to reference for page design and content prioritization. Additionally, annotated wireframes are very important to define a clear understanding of page elements and their functions.

For internal use only

60

Homepage design

Homepage design

Transforming this experience and making it visually stunning, easy to use and engaging is the key to a well designed website

For internal use only

62

Homepage design
For full size design please see wireframes_design.pdf document

Please check out the document wireframe_design.pdf for big size

For internal use only

63

Homepage design
For full size design please see wireframes_design.pdf document

Header and Try Python tool

For internal use only

64

Homepage design
For full size design please see wireframes_design.pdf document

Drop down menu in action

For internal use only

65

Homepage design
For full size design please see wireframes_design.pdf document

Headline, Getting started, Newest releases and Documentation

For internal use only

66

Homepage design
For full size design please see wireframes_design.pdf document

Success stories, Statistics and current Poll

For internal use only

67

Homepage design
For full size design please see wireframes_design.pdf document

Python Foundation, become a member and donate now

For internal use only

68

Homepage design
For full size design please see wireframes_design.pdf document

Blog latest, Events calendar and Connect with Python

For internal use only

69

Homepage design
For full size design please see wireframes_design.pdf document

Footer with sitemap, copyrights and additional links

For internal use only

70

Thank you!