- Point Spring & Driveshaft Co. (Neville Island, PA)
Problem: Website needed a new look & feel, a more complete offering of services, and an overhaul of the product search and checkout process.
Screenshots of current company home page—middle section of website is abridged—and eCommerce system with blurred pricing and availability.
Conducted survey to learn more about typical users of this website, e.g. their needs, features of the website to focus on, and how best to use technology to promote a healthy customer-supplier relationship.
- Conducted Google Analytics review of current website.
Conducted secondary research from others on customers in this industry.
- Generated customer work flow from research.
Sketched 4 alternative versions of home page layout.
Created wireframes of home page, search, shopping cart, and checkout in Illustrator and imported into interactive Flash prototype (incorporating changes proposed to sketches by client).
Two different alternatives for website designs including home page (and on first sketch) the top of the rest of the pages.
Sample annotated wireframes for the locations overview page, a blog article template, and a help center page.
Solution: The design included all of the original content, but also includes a new page documenting services provided by the company, expanded (though relocated) section describing the company, expanded section to contact Point Spring and get help, and a revamped, open-access online store. An additional element of a fleet management system was well-received by the customer and is being incorporated into the final design.
As for page layout, I opened the space up more by using horizontal rows of content instead of sneaking everything into boxes as the original website has done. On subsequent pages, I have used a primary content area/modeless dialog box relationship to layout content.
Interactive prototype of website. Functional pages include home page, air brakes category page under products, search, services, cart, and checkout.
Click here to try the prototype
Outcomes: Fully functional front end for website redesign. Completed December 2015, still being applied to website by other back end web developers as of August 2016.
All aspects of this responsive system represented including login and registration, product listing, purchasing, blogging, and corporate description.
* You can click through other aspects of the homepage, but links to page types are provided below.*
Dates of Project: July 2014-December 2015
UX Methods Used: Survey, Work Flow Analysis, Sketching, Wireframing, Prototyping
My Roles: Development, Design, Research
- Yoyochimp.com (Fremont, CA)
- Brought on as UI/UX Designer
Problem: Homepage needed to improve its value proposition to users and demonstrate the content of the website at a glance.
This is a screenshot of the yoyochimp homepage. (Some of the middle categories are not shown).
Conducted heuristic evaluation/competitive review of website according to usability, information architecture, communication design, and visual design standards.
Brainstormed and organized priorities for home page features working with CEO.
Sketched 3 versions of home page modifying features included, layout and spacing, home page state, and organization of features.
Created wireframe in iterative process between CEO and PM using Inkscape (Illustrator equivalent).
Transformed wireframe into Flash prototype to answer questions about interaction of site.
These were the final sketches before wireframing a design.
Solution: Final web page includes simplified, benefit-centric, and welcoming text on home page, 960 grid system layout, explanation of locations served, browsing system for activities, promotional video, blog feed, newsletter signup, and additional social media links asked for by the CEO. Branding elements, originally added added to fit with a conversational system of interacting with the website, were removed for a larger branding discussion. More functionality was proposed in prototype including adding number of search results for each term in search autocomplete suggestions and providing notification indicators (how many notifications are there since last checked).
Wireframe of homepage for someone logged into website.
Wireframe of homepage for someone not logged into website (e.g., users first view of the website).
Interactive prototype of homepage based on wireframes includes animations and interactivity built in.
Click here to try it
(Recommended: Try it in full screen mode)
Outcomes: Yoyochimp is in the process of developing the web design.
Dates of Project: May 2014-July 2014
UX Methods Used: Heuristic Evaluation, Competitor Analysis, Prioritization, Personas, Sketching, Wireframing, Prototyping
My Roles: Design, Research
- IUPUI (Indianapolis, IN)
- Lead Designer
Problem: We were looking for ways to engage students on topics related to Informatics outside the classroom. We wanted to create a serious game that embedded course topics for networks and security.
- Led brainstorming session with co-designer.
- Created design brief, documenting project requirements.
- Sketched basic game interface to provide foundation for team’s graphic designer.
- Supervised the work of the team’s programmer to ensure experience was meaningful, pleasurable, and usable.
- Wrote and programmed in-game manual into finished product.
Solution: We inverted the relationship between administrator and play. Here the player’s job was to look for vulnerabilities in the network and infect the entire network to win the game.
A few strategies that tied well into course concepts:
- Hubs do the most damage to the network as its effects are felt throughout each of their connections.
- The most vulnerable areas were the areas furthest away from where administrators attention was.
- The most effective strategy was divide and conquer—a tried-and-true algorithm students need to know.
Network nightmares game based on Angry Birds model with network admins that try to heal viruses.
Click here to play it
Outcomes: Game was developed and shared with students in the course we taught in. The game was also accepted into a game design festival at FDG 2013 in Chania, Greece.
Dates of Project: Jan 2011-Jan 2012
UX Methods Used: Sketching, Task Flow, Requirements, Priorization
My Roles: Design, Research, Writing, Programming
- Indiana University (Bloomington, IN)
- Ph.D. project (co-creator)
Problem: Our school had students and faculty spread out across campus. We needed a way to share information with everyone and at the same time help them feel connected.
- Brainstormed/sketched the design of the system
- Observed the environment in which it was placed
- Created a series of wireframes/experiments comparing the experience of various sounds and animations
- Introduced a living prototype to our community
- Evaluated through surveys, interviews, and observation
This was an early sketch of the system.
This was an alternative sketch that was explored.
Solution: Our design used Twitter data displayed on public monitors in our school’s building with a slow animation of tweets across the screen.
Outcomes: The Twitterspace display was deployed for our school as well as 3 academic conferences and 3 other organizations.
This image shows Twitterspace in use.
Dates of Project: Jan 2007-Dec 2010
UX Methods Used: Contextual Inquiry, Sketching, Wireframing, Prototyping
My Roles: Research, Design, Writing, Programming, Artistry
- Indiana University (Bloomington, IN)
- Ph.D. project (I was primary designer)
Problem: We needed a way to capture data about the devices people own that is clear and easy to use. We also needed to find a way to do it in an automated way to collect a massive amount of data related to it.
This is an affinity diagramming session we did to work toward ecology mapping.
- Using affinity diagramming, participants mapped their device ecologies with post-it notes and a whiteboard
- Concept generation and sketching to explore representations for digital, automated system
- Paper prototype of the agreed upon best idea informally tested with participants
- Flash prototype with improvements from past test with formal usability test
The chosen design idea with two variations: one more normal graph with nodes and edges and a second more relaxed version.
This was an alternative idea where connections were made like puzzle connections. Puzzle pieces would morph to fit parts of the ecology already mapped.
These are all the components of the paper prototype.
Solution: We created a digital, Flash-based prototype based on a metaphor of pinning things to a corkboard. There were plans for a system for displaying the collected data, but it was not completed.
Outcomes: The data recording portion of the prototype was completed. It never was deployed, but it is ready for that purpose.
Dates of Project: Jan 2008-Mar 2012
UX Methods Used: Affinity Diagramming, Sketching, Paper Prototyping, Flash Prototyping
My Roles: Research, Writing, Artistry, Programming, Design
- Indiana University (Bloomington, IN)
- Ph.D. project (primary designer)
Problem: We wanted to learn about people’s emotion of Internet videos/animation. We wanted an application that could allow users to select a video from a selection of videos and record their emotional experience in 4 different ways.
- I sketched some initial ideas
- I created a wireframe/storyboard to show the flow of the application
- Download a wide range of videos from YouTube from various categories
- Created a digital prototype to collect data based on the storyboard
These are two steps in a multi-step exercise blending task flows with wireframes. The top image demonstrates the evolution in terms of the overall flow and change in overall screens.
The tool worked as follows:
- Users logged in (they could finish at another time).
- Users recorded their initial emotional state.
- They selected and watched a video, recording their emotional state after, rating, and creating a photomontage based on their emotional state.
- After 6 videos, users filled out a survey.
This is a screenshot of the application. You can try it yourself below using the username “test” and password “test.”
Click here to see the working wireframe. (Be aware all videos play Numa Numa video. Please allow 1-2 minutes for the application to load.)
Outcomes: The prototype was completed, and I helped used the tool for initial data collection.
Dates: Dec 2006-Jul 2007
UX Design Methods: Sketching, Storyboarding and wireframing, Task flows, Prototyping, Visual design
My Roles: Design, Writing, Programming, Artistry