How we redesigned Payfine.co.za - Tech4Africa

3,066
-1

Published on

The slides for our redesign panel at Tech4Africa. Panel members: @allankent, @rianvdm, @bash, @originsa.

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,066
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • An example of bad content – technical jargon that doesn’t mean much to the user. “Turnkey aggregated standardized branded end-to-end store.”
  • Another example of bad content – this time closer to home, and how it can make UX very difficult. Why user number? Why the message about your PIN? What does “Reset” do – isit even necessary? Logon should be two words… Log in. “click here” doesn’t look clickable, and it is no longer a standard to link “click here” anyway.
  • Simple content that matches the design. Focused on what they do, in language the user can understand.
  • Another site often shown as an example of good content. It’s financial software, but the language is not jargony at all, and explains what they do in simple language from the user’s perspective.
  • So many things wrong with this… Fake excitement, as if this is one of the best things you can find on the Internet Bad punctuation (Why all the exclamation points? Why hyphens on “ticket number” and “notice number”?) Rhetorical questions (question-talkers!): Already registered? New user? Red text that draws the eye (danger, danger!), but so long that very few visitors will read it Jargon (what’s AARTO, and why would users care?) Logout/login/Log In (innit caps)
  • How we redesigned Payfine.co.za - Tech4Africa

    1. How we redesigned payfine.co.za Basheera Khan @bash Mike Lewis @originsa Rian van der Merwe @rianvdm Allan Kent @allankent
    2.  
    3. User research Interaction design Visual design Content strategy The elements of user experience: User research
    4. User-centred design User-centred design (UCD) is a process in which the needs , wants , and objective s of the end user of an interface are given extensive attention at each stage of the design process. This approach produces only the features and solutions that directly meet the user’s needs in a usable manner.
    5. Content Strategy Rian van der Merwe @RianVDM
    6. What happens when words and images are separated ?
    7. You cannot design without content
    8. Content strategy plans for the creation, delivery, and governance of content. Better content. Content people care about. Content that supports your business objectives and meets your users' goals. It's a long-term fix for content problems of all sizes. - Kristina Halvorson (@halvorson)
    9. Some examples of bad content
    10.  
    11.  
    12.  
    13. Some examples of good content
    14.  
    15.  
    16. What is payfine’s content strategy?
    17. They don’t have one
    18. A better way For Payfine
    19. Payfine is a website that lets its customers pay their traffic fines online.  We are a government website, but we don't sound like one.  We realize that people hate paying traffic fines, so they come to our site because they have to, not because they want to.  We talk to our customers in a way that communicates that we understand this.  Our manner is friendly, straightforward, and conversational, and always with the goal of helping our customers get through the process as quickly and easily as possible so that they can get on with their lives. Product Voice Statement
    20. Understanding We all know how much it sucks to pay traffic fines, so we will show our customers that we know what they're going through. Friendly We are always open, casual, and speak in a conversational, everyday language. Helpful We always guide users towards the goal of paying their fines - no distractions along the way Dependable Our products and services are solid, reliable, and secure. Personality traits
    21. We use natural, everyday language to evoke a conversational feel. This means we strive to create the impression we are having a one-on-one conversation with our audience. In conversational language, we don’t use internal jargon, overly promotional phrases, or tech-speak. Copy and design decisions should support this method, including sentence casing for headers, use of contractions, and simple, uncluttered language. Method
    22. The content
    23. <ul><li>Pay your traffic fines.  Get on with your life. </li></ul><ul><li>We know paying a traffic fine isn't fun.  We're here to make it easy for you so you can move on to more important things, like watching that one YouTube video with the cat, or checking Facebook. </li></ul><ul><li>Enter your notice number </li></ul><ul><li>View the details of your fine </li></ul><ul><li>Pay your fine securely </li></ul><ul><li>(Optional) Register for a free account. (Because, let's face it, you're probably going to have to come back here at some point). </li></ul><ul><li>Now slow down so you don't have to come back here any time soon. </li></ul>
    24. Interaction Design Basheera Khan @bash
    25. Initial wireframes
    26.  
    27.  
    28.  
    29. Round 2 wireframes
    30.  
    31.  
    32.  
    33.  
    34.  
    35.  
    36.  
    37.  
    38.  
    39.  
    40. Visual Design Mike Lewis @originsa
    41.  
    42.  
    43.  
    44.  
    45.  
    46.  
    47.  
    48.  
    49.  
    50. How we redesigned payfine.co.za Basheera Khan @bash Mike Lewis @originsa Rian van der Merwe @rianvdm Allan Kent @allankent

    ×