Swift Mobile-first
Redesign

Project Overview

The Problem

Swift communications is a family-operated media company that owns 20+ online media/print publications across niche rural areas. Swift wanted to enhance the visibility of sponsored/banner ads on their website and improve the UX for readers by adopting a mobile-first approach. My team's goals were to develop a mobile-first and user-centric design system that supports current and future business objectives while enabling a delightful experience for end-users.  

Approach

We started off in the discovery phase by doing a heuristic evaluation and design audit of their present websites and online brand presence. From there we conducted a competitive assessment of other online publishers to evaluates their features, brand positioning, and design patterns. I was primarily responsible for evaluative research, developing design recommendations, delivering wireframes, and defining the visual direction in collaboration with my boss, a creative director and team, a visual designer.   

My Role

UX Designer - Interaction Designer 

Client

Swift Communications

Duration

Sept - Oct. 2016 (2 months)

Methods & Techniques Applied

Competitive Evaluation - Design Audit - Adhoc Persona Creation - Heuristic Evaluation - Wireframes - Visual Design 

Tools

Sketch - Keynote 

Project Type

Team 

Stakeholder Interviews

To begin, my team sent out a questionnaire to our key point of contact at Swift so he can share it with internal stakeholders and we could get a clearer definition of the requirements, goals, needs, and concerns of the business. The questionnaire was shared with employees across Swift, stretching from the customer support team to the exec team. We wanted to get a robust view from different vantage points of what internal stakeholders perceived the problem to be and how we can align our design strategy to address the needs of the business while delivering an exceptional experience to the end-user. We received feedback from over 20+ employees and synthesized into one document and partitioned it by how Swift perceives its relationship to advertisers who want to run ads on their proprietary ad-platform and their responsibility to their users. The feedback allowed us to identify and summarize clear business goals that we can be aligned on moving forward and have a better picture of what "success" would look like.

Heuristic Analysis / Design Audit

Early on in the project, I was responsible for looking at Swift's online portfolio of web properties holistically and evaluating them based on Nielsen's Heuristics and how they can incorporate brand consistency across all of their publications and improve the site experience. During the analysis, I discovered that Swift had the opportunity to improve user experience by adopting mobile-first responsive design conventions when it comes to layout, establishing a cohesive UI library, improve accessibility by making text more readable, applying proper contrast ratios, clear hierarchy when displaying content, and encourage content discovery by consolidating the nav/IA in areas where there's redundancy or confusion. Our team provided a detailed and exhaustive recommendations list to Swift detailing opportunities where design can be improved in the following areas: Content, Visual Design, Functionality, Layout, IA, and Brand. By doing this, I was able to establish design principles for our team that we would adhere to as we transitioned into the design phase and began developing a blueprint of what the new site experience can be.

Competitive Evaluation

From there, we conducted a competitive landscape audit to understand better how other online publications were embracing mobile-first design conventions and see what we can apply to the redesign of Swift's online presence. To get a broad vantage point, we sourced out a range of online publishers, stretching from publications and apps that had mass appeal (The New York Times, Quartz. Apple News) to publishers that serve more niche audiences (Buzzfeed, The New Business Journal, The Huffington Post). We wanted to identify how these brands were catering to a mobile-first audience and what features/style changes have they incorporated to remain competitive and improve ad visibility without affecting user experience. Our biggest takeaways were the following:

  • All publishers prioritize the visibility social sharing options for content across all platforms, web, iOS, Android. Sharing must be visually prominent because the more users that share content with their networks, the more traffic a publisher gets to its website where users can discover more content and can yield increased ad impressions for advertisers. 
  • An emphasis on reductive/minimalist UI styles that prioritizes content and legibility to allow for more ad visibility
  • All publications adhere to IAB standard ad conventions instead of disruptive ad types (e.g., pop-up) and incorporate sponsored content as an ad format that feels organic to the user's reading experience and provides increased flexibility in ad placement.
  • Personalization features (e.g. being able to bookmark content) is a good way to enable vested interest and recurring engagement. 

Design Process 

After we defined the experience strategy, it then came time to design a product that aligned with the experience principles we had established:

Clarity:

User's should be able to easily discover relevant content and navigate through the site experience without confusion. The new UI library/design should have clear affordances and indicators that can guide user's and propel the intent of their goals. 

Consistency + Efficiency:

Responsive mobile-first design conventions and a cohesive UI library will factor into an improved mental model of how users navigate and interact with the site experience, avoiding unnecessary learning curves and user frustration over time. 

Contextual:

The new design should provide personalization capabilities to users and embrace how most readers consume content today, on the go, in varying contexts. 

I was responsible for establishing the foundation of the experience and creating a blueprint for where/how content will be placed, delivering an IA structure/scheme that can be adopted across all their online publications to improve navigation,  proposing a re-design of internal classified ad-types,  and classifying the necessary components/modules  for the UI library,

Initial Rough Sketches

 

  • gallery-image
  • gallery-image

Mid-Fi Wireframes & Restructured IA Sitemap

 

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

UI Pattern Library

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Hi-Fi Mockups

 

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
[unex_ce_button id="content_8omrianra" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#000000" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="https://gsdm.invisionapp.com/share/EQA333YN9#/screens/222792529" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VISIT PROTOTYPE[/ce_button]