Visual & User Interface Design

Austin Free-Net

A mobile wrapper for the online AFN knowledge base and website

I briefly worked with local nonprofit Austin Free-Net to provide adapt their proposed mobile app — a wrapper delivering a vast content library — into a usable, navigable experience for their patrons.

  • Outcome

    Documented user journeys, Expanded brands guidelines to mobile platforms, Shipping apps on iOS and Android

  • Company

    Austin Free-Net

  • Period
    April 2015
  • Skills

    UI Design, UX Design, User Research

  • Tools
    • icons/photoshop Created with Sketch. Photoshop
    • icons/xcode Xcode
    • googleFormIcon Google Forms
Before and After

Background

Austin Free-Net strives to provide digital literacy training to those who are otherwise disenfranchised from technology, enabling the underserved to perform better academically, compete in the job market, and live better in our hyper connected world.

Technical Services Manager John Pence was working with a team of student engineers at the University of Texas at Austin to produce a native mobile wrapper for their host of learning resources — and they contracted me to validate user journeys, and supply the final coat of paint on their application.

Challenge

I was provided with a rough but instructive proof of concept that needed to be made easily navigable, as well as easily presenting a host of variable content types drawn from Austin Free Net’s extensive library of educational materials. Additionally, given extensive time constraints, this solution needed to be platform-agnostic, implementable semi-uniformly on both iOS and Android.

Process

I reviewed work with John — each applying a spot treatment on an individual screen — building on AFN’s brand colors while cutting costly bitmaps from the app. We briefly explored alternative and optimized navigational paths, but ultimately decided to only readdress those if later proven necessary.

Round 1

These screen layouts were standard enough to describe color and type choices that would generalize throughout the app.

Round 2

I comped out the distinct screens and pursued a visual treatment from Round 1. Following this review, I isolated and sliced assets for the iOS and Android engineers to start building out the screens.

Round 3

    • System Blue
    • UIColor.systemBlue
    • Brand Blue
      Medium
    • rgb(62, 150, 199)
    • Brand Blue
      Dark
    • rgb(56, 124, 174)
    • Brand Green
      Medium
    • rgb(064, 199, 56)
    • Brand Green
      Dark
    • rgb(38, 173, 30)
    • Slate
      Light
    • rgb(153, 184, 204)
    • Slate
      Dark
    • rgb(64, 102, 128)
    • System Red
    • UIColor.systemRed
    • System Blue
    • UIColor.systemBlue
    • Brand Blue
      Medium
    • rgb(62, 150, 199)
    • Brand Blue
      Dark
    • rgb(56, 124, 174)
    • Brand Green
      Medium
    • rgb(064, 199, 56)
    • Brand Green
      Dark
    • rgb(38, 173, 30)
    • Slate
      Light
    • rgb(153, 184, 204)
    • Slate
      Dark
    • rgb(64, 102, 128)
    • System Red
    • UIColor.systemRed
    • System Blue
    • UIColor.systemBlue

John had received feedback from his AFN colleagues, and we took a single additional round to reintroduce a variant on AFN’s green, after which I handed off newly-exported assets, visual specs, and palette.

Icon/Volunteer Icon/Donate Icon/Connect Icon/Learn
Icon/mediaLink Icon/vid Icon/doc Icon/chat

Problems

The project’s timeline did not allow for revisions to data structure. The app was technically limited to wrapping Austin Free Net’s content library, and likewise, we were unable to structure it to respond to specific user problems.

Future

We planned to analyze the number and frequency of hits that given articles received, so as to better surface relevant material. We also found following early interviews that donor and client parties were largely mutually exclusive, and so I planned to restructure the app around a singular user journey, where clients are profiled through a series of interviews, personally relevant content is surfaced, and users can further search the library through direct string searches and natural language, describing the problem they’re looking to address.