Design projects using HTML/CSS

Training: HTML/CSS

Working for K2 has inspired me to focus on designing for the web. In late 2016, I enrolled in the Web Design track on Treehouse Learning. This curriculum teaches the fundamentals of HTML, CSS and web-based animation. The examples shown were designs built after completing online courses for this track.

Mobile File Sharing Ideation

UX Learnings & Explorations

In 2014, I began educating myself on the importance of User Experience and it’s role in software design.  The work samples in this section are original ideas inspired from books, online resources and apps.  This is a work in progress page where new additions will be posted when completed.

Reading List

Thoughts On Interaction Design | Jon Kolko

Designing with the Mind in Mind | Jeff Johnson

Sketching User Experiences | Saul Greenberg, Bill Buxton, +2

Wireframing Essentials, An Introduction to User Experience Design | Matthew Hamm

Case Study: Words On Tap

Words on Tap was an iPhone word based game in the prototype/design phase by Creativity on Tap, LLC.  The company wanted to build a server based tournament style word game for users who wanted to play quick matches. This was an early stage company looking for a candidate who could own responsibility for UI/UX model.

Objective: Complete UI/UX test to be considered for position. Once hired, create user interaction model and visual design of product.

Role

UI/UX Designer

Self Employed

Tasks

  • Information Architecture
  • Wireframing
  • Visual Design
  • Useability

Tools

  • Photoshop
  • Illustrator
  • Powerpoint
  • Visio

Workflow and Stages of UI/UX Process

Client Meetings and Competitive Analysis

The first stage was to meet with the client to discuss and project opportunities and product direction. I became immersed in competitive analysis and returned with research and ideas based on my user experience.

  1. Met with client and took notes on project role and product direction.
  2. Downloaded and played 10+ word based games to analyze market and competitive products.
  3. Documented likes/dislikes and create feature list based on my experience.
  4. Create initial Visio high level user flow of product.
User Segmentation Personas

The second stage was to identify customer and how they use competitive products. I spoke with potential users who would play our game and created personas to give us context with our customers. This was not requested by the client but something I provided as an useful piece of information.

  1. Met with potential users and gathered information about lifestyle, phone use and gaming habits .
  2. Created personas and delivered as an additional piece of information to client.
Wireframe Test

The third stage was to return to the client with a test deliverable of a wireframe that displayed the UI flow which enables a user to sign in with multiple options. The deliverable met the clients request and was used as a foundation for the next stages of product development.

  1. Created wireframe user flow and walked through useability with client .
  2. Documented our experiences and made changes to flow based on feedback.
Game User Flow and Walkthrough

The fourth stage was to expand the user flow and incorporate the entire game experience based on feature specs and product documents. In my previous experiences with game development, I learned some fast and effective ways to test initial useability walkthroughs. I wanted to deliver a working user flow that allowed the client to try the product on their own. This would help flesh out and prioritize the product feature list without the need of a developers time.

  1. Met with client and discussed product documents and feature priorities.
  2. Expanded user flow and incorporated entire game based on discussions.
  3. Created animated walk-through in Powerpoint that allowed client to use on their own.
  4. Gathered feedback based on client user experience and incorporated into document for next iteration.
Concept Visual Targets

The fifth stage was to create several visual concepts for one screen including layout, type treatment color theme and logo design. This would give visual identity to the product and create a foundation for all other screens.

  1. Developed several visual concepts and walked through aesthetics with client.
  2. Incorporated feedback and created next iteration of artwork.
  3. Sold client on ideas and selected visual target for Landing Screen.
Project Outcome

Although feedback about the product was positive, Words on Tap was put on hold after 10 weeks of conceptual prototyping. Funding requirements and new competitors in the market played a large role in deciding to not move ahead with development. Words on Tap served as a rewarding learning experience and one that expanded my knowledge in the UI/UX creation process.

Project: fanQuest

FanQuest is a utility app designed to provide sports fans with useful information such as concession locations and stadium services.  Unlike other stadium apps, fanQuest will serve as a one stop information source for all professional sports arenas.  This project is in the early stages of development with user stories and experience flows coming next.