https://tarifanderclai.com/about daily 0.75 2020-02-27 https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e321f9858164e71d2630dcd/1580343209698/headshot.jpg About https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e457ec205a58164346cf2bc/1581612750757/artifacts.jpg About https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e31c1611daeb45c49c0b4b0/1580319086794/67478196_10216313994815282_4080513905258921984_n.jpg About https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e30726987c8e752f5fd3e89/1580233337425/11745877_10205343857248699_825749925311787950_n.jpg About https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e3042a887c8e752f5f1a9cf/1580221123790/IMG_5950.jpeg About https://tarifanderclai.com/contact daily 0.75 2020-02-18 https://tarifanderclai.com/work daily 1.0 2020-02-13 https://tarifanderclai.com/work/news-site-8cpeg monthly 0.5 2020-01-29 https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f5306d2397103d32094ae/1580153489868/KP+Before.png Work - Information architecture, content strategy, and responsive design for a large news site - Problem The client outgrew their news website. Users couldn’t find what they wanted. No up-to-date content management system meant maintenance was laborious. The site no longer told a coherent story about the company’s mission. The site was not responsive. Approach Develop a content strategy and information architecture to reflect the company’s mission. Inventory and assess existing content. Provide new page templates and a fresh design. Build the new site on a modern CMS. https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f5306d2397103d32094b1/1580153553039/ Work - Information architecture, content strategy, and responsive design for a large news site - Users The client did not have a research budget, and their requirements were largely around creating the site they wanted to present to the world. Still, I interviewed stakeholders and looked at competitor sites to get what insight I could into how people would use the site. https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f5306d2397103d32094b7/1580091895057/info+architecture+example.png Work - Information architecture, content strategy, and responsive design for a large news site - Demonstration of the relationships among content on the site https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f5306d2397103d32094b4/1580091103156/KP+nav.png Work - Information architecture, content strategy, and responsive design for a large news site - Content strategy The content director and I ultimately identified four main categories of content: Explanations of mission and core values Articles and resources that reflected those values Initiatives that grew out of core values News about the company The site’s architecture and content strategy grew from the relationships among those four categories of content. (The names of the categories evolved throughout the project.) https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f5306d2397103d32094ba/1580156666534/KP+Article+example.png Work - Information architecture, content strategy, and responsive design for a large news site - Initial concept of article page Article pages would link dynamically to related topics from all categories https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f5306d2397103d32094bd/1580159694825/Screen+Shot+2020-01-27+at+4.13.51+PM.png Work - Information architecture, content strategy, and responsive design for a large news site - Information architecture and page templates Once the top level structure was in place, I developed more detailed sitemaps, page templates, and the basic navigation structure. I then worked with the developers to implement the architecture and content types in the new CMS, and with the visual designer to bring the pages to life. https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f5306d2397103d32094c0/1580329214227/KP+After.png Work - Information architecture, content strategy, and responsive design for a large news site - Released state https://tarifanderclai.com/work/loan-repayment-plan-52rk6 monthly 0.5 2020-01-27 https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f58b90b0a552baa527e5a/1580160464377/Original+UI.png Work - Simplifying repayment plan selection in a student loan application - Problem Users approved for student loans had to choose a repayment plan and a type of interest rate from the page shown at right. Customer surveys, call center records, and usability lab research showed that users were intimidated by this page. did not read/understand info in the right rail. made choices they didn’t intend to make. Approach Iterated through 3 ideas stakeholders asked us to test. Although none solved the problem, we gained a lot of insights. Applied those insights to arrive at a design that worked well for users and satisfied stakeholders. https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f58b90b0a552baa527e5d/1580160500082/Simple+table+test.png Work - Simplifying repayment plan selection in a student loan application - Test 1: Better table design Could we improve the page by improving the readability of the table? Users said: How to make a choice is clear. All these terms are overwhelming. We don’t know how to decide what to choose. https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f58b90b0a552baa527e60/1580160806621/Sorting.png Work - Simplifying repayment plan selection in a student loan application - Test 2: Sorting What if users can sort options based on their most important consideration, such as monthly payment or total cost? Users said: We can’t take in all that info up top. The ways this information can be sorted don’t help us. For example, lowest total loan cost requires payments many of us can’t make. https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f605ff4c11141d607541b/1580163202362/Filtering.png Work - Simplifying repayment plan selection in a student loan application - Test 3: Filtering Sorting asks only one question; does it help to show that there are two decisions? I also tried putting info popups inline. Users said: We see there are two decisions to make. That helps. Tying definitions to terms helps. But info popups are awkward. This is still hard. https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f608f8c68967c72c2af9c/1580163222630/Interest+first+final+state.png Work - Simplifying repayment plan selection in a student loan application - Test 4: Separate the decisions Users needed to see that they had two decisions to make. From interviews, I knew most users came in with strong preferences about interest types, so I put that question first. I also designed to get definitions on screen in context. This design disclosed the questions one at a time. Once the user answered both questions, they saw the resulting loan. Users said: This makes sense, but we have some objections. It’s not helpful to answer fixed/variable first. We want to see numbers sooner. We’re suspicious of being narrowed to one option: is it best for us or for your company? https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f58b90b0a552baa527e63/1580070675059/Screen+Shot+2020-01-26+at+3.08.01+PM.png Work - Simplifying repayment plan selection in a student loan application - Test 5: The one that worked In this version, I started with the payment plan decision and tried to make clear that you’re basically deciding whether and how much you can pay while you’re still in school. I also included a Benefit statement for each plan to help make the results of the choice more obvious. https://static1.squarespace.com/static/5e220a2e529b1d0f058017ed/t/5e2f58b90b0a552baa527e66/1580073711760/Screen+Shot+2020-01-26+at+3.07.35+PM.png Work - Simplifying repayment plan selection in a student loan application - Once the user chose a payment plan, they saw estimates for that plan with both fixed and variable interest. Users said: The plan options make sense. We like seeing numbers after answering only one question. We might use the ability to make changes or to view all plans at once to look at all the possibilities, but we still like this breakdown of the decision.