The AKArchy - UI/UX

Other Portfolios: Print • Illustration

Here are some sites designed by Aubry Kae Andersen.

Click the picture below to view slideshow.

Loading screen when ADAPT app is initializing. I also designed the logo.
Self-service page for customers to manage their dealerships.
Dialog on self-service page.
Dialog to search for a dealership on self-service page.
Dialog to search for a dealership on self-service page.
Dialog to search for a dealership on self-service page.
Dialog to search for a dealership on self-service page, showing a map of the found dealership.
Dealership successfully added on self-service page.

ADAPT

Images • Prototype • Mockups (PDF) • Wireframes (PDF)

I created the functional prototypes of this tool for Authenticom, Inc., and created the overall style and feel. ADAPT manages and configures complicated automotive data feeds, used both internally by agents and externally by customers. The various prototypes use AngularJS and Angular 2.0/4.0 front-end, implemented with a backend API in C#, hosted on Azure.

Features: Single page design using Angular framework and Typescript, decoupled from C# backend via JSON API. Response design, HTML5, CSS3, and Bootstrap.

Click the picture below to view slideshow.

Homepage for Road to Success, featuring responsive sizes and a fun star trail animation on the mouse pointer
Login for students to access Road to Success program
The bookshelf of books students have recorded for Road to Success, featuring AJAX loading and integration with Bowker for book images
Widget for students to enter reading time for a specific book
Widget for students to search for specific books they have read
Students can win badges for reading through a gamification system, and this page shows all their badges rendered with dynamic SVG images
The login page for the admin portal of the Road to Success program
One of the admin management data tables for managing the program, heavily using Bootstrap
One of the admin management forms for editing data, heavily using Bootstrap
The homepage for Road to Success when accessed by mobile phone, with login screen, using jQuery mobile engine
The mobile version of the Reading Summary page
The mobile version of the Enter Time flow, step 1 - student searches for a book
The mobile version of the Enter Time flow, step 2 - student selects a matching book
The mobile version of the Enter Time flow, step 3 - student enters time readon book

Road to Success

Images • Mockups (PDF) • Demo (Mobile) • Demo (Prize Wheel)

I created the frontend for this site. My client, RyanTech, Inc., implemented the backend through .NET/C# and Windows Azure. It's currently used by thousands of school children in Utah to record their reading and win prizes for their goals.

Features: JQuery and CSS3 animations, multi-layered layout, cross-browser compatible, dedicated mobile site, dedicated admin portal (built around Bootstrap), responsive design. Mockups from Balsamiq.

Click the picture below to view slideshow.

The homepage and login page for Carpod, using a simple, elegant design
The admin pop out navigation (left) and vehicle management data table, heavily using Bootstrap
A page for editing images of vehicles in the inventory
One of the Bootstrap based forms for editing account data
The homepage and login page for Carpod on mobile, using only responsive CSS/JS to serve a smaller screen
The mobile version of the edit account data page, with the navigation now in a cheeseburger menu at the top

Carpod

View Images • Live Site • Mockups (PDF)

I amped up the visual style for this website's frontend, a vehicle inventory management UI owned by Authenticom. The backend was implemented through .NET/C# and Windows Azure. Simple customization of Bootstrap for a clean, straight-forward interface.

Features: JQuery and CSS3 animations, Bootstrap customization,cross-browser compatible, responsive design. Mockups in Illustrator.

Click the picture below to view slideshow.

Homepage for Keys to Success, featuring compact, responsive layout; a photo slideshow; and an Instagram feed
Content page for Keys to Success featuring a photo feed from Flickr

Keys to Success

View Images • Live Site

Another website through my client, RyanTech, Inc., who implemented the backend through .NET/C# and Windows Azure. I did the frontend design. It's currently used by high schoolers in Utah to incentivize academic achievements.

Features: JQuery and CSS3 animations, multi-layered layout, cross-browser compatible (including IE 8 and higher), responsive design, picture gallery (Flickr integration through Juicebox).

Click the picture below to view slideshow.

Isaac the Fortunate Promotional Site

View Images • Live Site

Fun website for Isaac the Fortunate, implemented through pure HTML/CSS/JS (no backend logic).

Features: JQuery animations, cross-browser compatible (including IE 8 and higher), responsive design, images loaded based on window size multi-layered layout.

Click the picture below to view slideshow.

Homepage for Park City Direct Shuttle, featuring a large image slideshow and responsive, collapsing layout
One of the content pages for the site

Park City Direct Shuttle

View Images

A content website for a shuttle company in Utah, implemented through .NET/C# and Windows Azure. It showcases large images of Park City with an automatic slideshow, while the layout is very clean and responsive.

Features: JQuery, cross-browser compatible (including IE 8 and higher), responsive design with dynamic image sizing through CSS/JS.

Click the picture below to view slideshow.

Splash screen to introduce the company and its accolades
Question and answer content page with links to PDF viewer
Modal screen for viewing embedded PDFs (can also email the PDFs)

Ryantech Marketing Site

View Images • Demo

A content site made for RyanTech, using a splash page and a QA section that connects to a PDF viewer.

Features: JQuery, cross-browser compatible (including IE 8 and higher), responsive design, modal PDF integration, email integration.

Click the picture below to view slideshow.

Top of a one page layout content site marketing Carpod's inventory management, with links that auto scroll down the page
Contact form found at the bottom of the one page design
The mobile version of the same page, shown only on smaller screens with abbreviated information

Carpod Marketing Site

View Images • Demo

A content site made for Authenticom, featuring a one page layout with auto-scrolling for links, a contact form, and a mobile version.

Features: Cross-browser compatible (including IE 8 and higher), responsive design, special mobile layout, email integration.

Click the picture below to view slideshow.

One page design, fully collapsed
One page design, Products expanded
One page design, About Us expanded

Ryantech Web Site

View Images • Demo

A content site made for RyanTech, using a single page layout with collapsible sections and animations.

Features: JQuery, cross-browser compatible (including IE 8 and higher), responsive design.

Click the picture below to view slideshow.

Art/Not Terminal Gallery Site

View Images

Content website for non-profit A/NT Gallery, implemented through Joomla 3 with custom template and modules.

Features: JQuery slideshow module, cross-browser compatible (including IE 8 and higher), responsive design, Joomla CMS.

Click the picture below to view slideshow.

Dashboard for users to view and monitor their guests.
Login page for associates.
Dashboard for monitoring associates and their statuses.
Drilldown to guest information and the forms/info to guide the deal.
Adding a note to a deal.
Login page for the mobile version.
Associate's dashboard on mobile site.
Drilldown for the guest/deal on mobile.
Pop out menu for changing an associate's status.

Guest Tracking Application

View Images • Mockups (PDF) • Demo (Desktop) • Demo (Mobile)

I created the frontend for this site for eLeaderTech and RyanTech, Inc. Unfortunately the final product never shipped with my design for reasons out of my control, but this prototype was shown at the NADA conference to much excitement. The concept of this software was to track guests for car dealerships and guide associates through their sales, targeted for use on iPads.

Features: JQuery and CSS3 animations, jQuery Mobile, cross-browser compatible (including IE 8 and higher), responsive design. Mockups made in Balsamiq.

Click the picture below to view slideshow.

Indie Book Fair Promotional Site

View Images • Live Site

Fun website for Indie Book Fair, implemented through pure HTML/CSS/JS (no backend logic). Mobile version of site, which surfaces based on window size.

Features: JQuery animations, cross-browser compatible (including IE 8 and higher), responsive design, images loaded based on window size, mobile version.

UI/UX Design and Development Portfolio

ADAPT

Road to Success

Carpod

Keys to Success

Isaac the Fortunate Promotional Site

Park City Direct Shuttle

Ryantech Marketing Site

Carpod Marketing Site

Ryantech Web Site

Art/Not Terminal Gallery Site

Guest Tracking Application

Indie Book Fair Promotional Site