edradar

Edradar is an online news organization focused on educational technology and online learning. I worked as project manager and UX designer on a 3-person team to streamline and restructure the site's content, deliver a responsive website design, and visually rebrand it.

Challenge: Edradar has good traffic and an impressive amount of content, but average session length is < 1 minute, and return visitors are few. This is due to known navigation and UX issues.

 
 

Research

Once the project scope and timeline were established, we dove into research. We ran people through the existing site to identify pain points, conducted and analyzed the results of 2 separate surveys (1 for professionals in the education industry, and 1 for the general online news-reading public), interviewed instructors, researched competitors, and used card-sorting and a great deal of user testing to help us determine the site's new structure.

 

 
 
edradar_cardsorting.png

Site structure

The previous site contained 22 total categories. Through card sorting, surveys and testing, we cut this down to just 5: EdTech, Online Learning, Politics & Policy, Opinion & Editorial, and Business & Industry.

 

edradar_personas.png

User personas

Using survey and interview data, we created 2 primary user personas to represent key segments of our target audience: the education professional, and the informed reader. Both access and use the site in different ways.

 
 
edradar_sketches.png

Sketching

Sketching on paper allowed us to quickly work through layouts ideas and figure out how to integrate ads. After working individually on a specific mobile page for several minutes, we regrouped to critique each other's designs, improve and integrate them.

The project scope called for a mobile-first design, so we held off on desktop layouts until we had tested and finalized the mobile layouts.

 

edradar_wireframes.png

Wireframes & prototypes

After working out the main features on paper, we digitized key mobile pages in Axure, printed them out, and ran users through a paper prototype. Once we'd gotten a handle of our main issues, we revised our mockups and threw them into InVision for a clickable iPhone prototype.

My role in this phase was to test and handle the prototype iterations, and interface with our clients. My teammates worked on style tiles and desktop wireframes.

 

edradar_pixels.png

Pushing Pixels

Once the mobile layouts were finalized and our client had signed off on the style tile, we moved on to visually styling the mobile layouts, iterating the desktop wireframes, and revamping the newsletter. I redesigned the newsletter to improve readability, contributed to the desktop wireframes, and worked on specs.

edradar_desktop.jpg

The desktop wireframes used a different layout than the mobile wireframes, of course, but layout priorities remained roughly the same: logo, navigation, 1 featured story followed by 2 supporting stories, etc.

 

edradar_annotations.png

Specs

Because we weren't collaborating with the developer, we had to ensure that they would be able to understand as much as possible without our direct input. To that end I created annotated wireframes, wrote up our design recommendations for items outside the scope of the project, and wrote up our content template for future articles.

 

Edradar is currently in development.

 

next project: omg: td!