Capitol Standard
Online Magazine- Website Redesign
Project Summary
Client: Capitol Standard is an online magazine, meant to guide millennials to DC's work and play hot spots.
Role: Lead UX Designer of a team of 5, including two UX Designers, a Data Scientist, and Web Developer
Problem: The content is hard to find. It does not utilize design patterns and charting. The brand's touchpoints for the user are inconsistent with the brand. In addition, there is a lack of revenue sources and a lack of successful advertising.
Impact: Due to these design issues, the user finds the site difficult to navigate, and unclear as to its use.
Solution: Through user-focused research, I was able to provide information architecture to make the product more accessible, provide a consistent branding process to make sure all touchpoints were complementary to the brand, while also designing a space for advertising and/or some form of profitable product can be found on every page of the site.
Assessing the Current Product
Usability Test: My first step was to assess the usefulness of the original site. I wanted to hear from the users what their pain points were while navigating the site, and completing simple tasks. I wanted to make sure that we were conscious of what was working for Capitol Standard readers and what was not. In addition, I did a competitive analysis seeing were the company stood in comparison to the industry standard.
Discovery: So many rich discoveries were made through these usability tests. Mainly I discovered that users were unaware of what the website's intent was, how to find articles that interest them, and were irritated with the lack of navigation and organization, due to it being subpar to the industry standard.
click image to play usability test clip
Quotes: "This is horrible." "I click on events and it takes me back to the home page." "I don't know what this site is for."
User Analytics
User Research
User Interviews: I chose Union Market for it's attractiveness to our demographic to conduct our User Interviews. I presented two art boards and two website layouts. I asked which website is easiest to read, and which board is the most visually appealing, in addition to other questions, including which board they felt conveyed DC more convincingly.
 |  |  |
|---|---|---|
 |  |  |
 |
Discovery: With each interview, I discovered the great duality that is Washington DC. The creative and the political/business. However, these two scenes frequently intermingle and boost one another. This is what makes DC such a unique city. I learned from the user's they want clear layouts that also appeal to their creative sides. From these discoveries, I was able to create authentic user persona's from a combination of user data and user research.
Quote: "This brighter board is where DC is going. The other is where DC has been."
Survey: In order to understand Capitol's target demographic more, I sent out a survey to our potential and current readership. Based on those results I constructed a research dashboard of my findings.
Discovery: I found that most of our population was in Virginia and Northern DC, mostly women between the ages of 18-30. Their occupations were mainly in the creative, legal, or government fields.
Information Architecture
Card Sorting: After our User was made clear, I began to tackle the issue of Capitol Standard's navigation issues. I used an opened card sorting activity on 10 users.
Discovery: Out of those ten, 8/10 listed Community, Events, and City Guide as their top categories. The users showed me how they instinctively would organize our categories quite clearly. This made building the navigation simple and direct.
 IMG_0048 |
|---|
 IMG_0077 |
 IMG_0043 |
 IMG_0026 |
 IMG_0086 |
 IMG_0083 |
 IMG_0079 |
 IMG_0037 |
User Flows & Journeys
User Journey: Using this insight, I created the informational architecture and our user's journeys through the site, keeping in mind what each of their motives would be, and what touchpoints they would interact with while on the site.
Discovery: With the restructured site, articles are more clearly displayed, and the intention of the magazine is at the forefront.
Annotated Wireframes
Discovery: As an online magazine, my client is constantly updating the page. With the design clearly laid out for the client, there needs to be no guesswork as to which article goes in what category, or where to place ads on each page.
Wire Frames: With the information structured, I began front end development. I combined the information I gathered through user research, as well as discussions with our client, and developed easy to read, intuitive layouts for their product. The designs were annotated so that all future designers understand the wireframes. After building out the wireframes, usability tests were conducted to ensure the pages were easy to use and instinctive.
Usability Testing
Usability Test: Our usability tests confirmed that the designs were affective and achieved our desired result.
Quote: “Clean, professional, inviting, chic, modern, minimalist yet functional, easy to navigate, trendy, organized, classy”
Discovery: Our first iteration had the subcategories first followed by our banner. We discovered many of our users were finding it difficult to have navigation on navigation. We iterated and reversed it, solving the issue and producing a beautiful, clean product.
Revenue Recommendations
Revenue Recommendations: My client had expressed difficulty bringing in any revenue from this product. She also was unprepared to approach investors about the Magazine. To assist her I created a list of revenue recommendations, and a new business model taking into consideration those revenue possibilities, so that she could, in turn, present to those ideas to investors
Gamification- In addition to these recommendations, I also suggested a way to add Gamification to the site, allowing the magazine's users to gain more from the experience of the site, as well as draw them into the new revenue recommendations.
