ravelry mobile mockup

Concept

This project is a mockup created for my prototyping class. We were asked to choose a website and redesign it for a mobile device. I chose to design an iPhone application for Ravelry.com, a website that I use frequently and is not mobile-friendly yet.

The click-through prototype (the interactive areas are highlighted with a pink outline).

 

Design Process

Ravelry.com is a large social networking site with a LOT of functionality. To help me narrow down the interactions that would be most appropriate to include in a mobile app, I turned to the Ravelry community. I asked them to tell me when they’ve ever needed to pull up Ravelry on their phone, what task they were trying to accomplish, and for what other purposes they might use a Raverly app.

To simulate scrolling in a Fireworks / HTML prototype for an iPhone application, I gave each scrollable screen three “hotspots” that, when clicked, would move the displayed screen to the top, center, or bottom of that particular screen. This helped me create a prototype that could still feel like an iPhone application, even though it is just rendered in the browser.

Project Timeline

1 week. September 12, 2011 to September 19, 2011

Attributions

The idea to use tiles in my design came from Springpadit.com’s iPhone application. Coincidentally, the background I used in this prototype is the same one that Springpadit uses too, but it is a standard background for IOS devices (and the closest I could find to a knitted texture). The “information infrastructure” is pulled from the functionality of Ravelry.com.

Interview involved asking questions of my Ravelry friends on facebook. Participants included Maurizio Odermatt, Kasey Butcher, Krista Cloud, Elizabeth Kendall, Abby Tohline, and Samantha Tilmans.

Images used in this prototype come from Ravelry.com and Ravelry.com users listed below. I have received permission to use each of these images (funnily enough, that was probably the most time consuming part of the entire process).

Patterns

  • http://www.ravelry.com/patterns/library/cotyledon
  • http://www.ravelry.com/patterns/library/ishbel
  • http://www.ravelry.com/patterns/library/chevron-baby-blanket
  • http://www.ravelry.com/patterns/library/saroyan
  • http://www.ravelry.com/patterns/library/holden-shawlette
  • http://www.ravelry.com/patterns/library/summer-mystery-shawlette
  • http://www.ravelry.com/patterns/library/french-press-felted-slippers

Queued Patterns

  • http://www.ravelry.com/projects/artohline/print-o-the-wave-stole
  • http://www.ravelry.com/projects/artohline/bayerische-socks-2
  • http://www.ravelry.com/projects/artohline/burberry-inspired-cowl-neck-scarf
  • http://www.ravelry.com/projects/artohline/on-the-side-2
  • http://www.ravelry.com/projects/artohline/11-eyelet-front-vest

Finished Patterns

  • http://www.ravelry.com/projects/austintoombs/gregs-scarf
  • http://www.ravelry.com/projects/austintoombs/reversible-cabled-brioche-stitch-scarf-2

Leah’s Scarf Project

  • http://www.ravelry.com/projects/austintoombs/reversible-cabled-brioche-stitch-scarf-2 (3 pics from here)

Friends

  • http://www.ravelry.com/people/montypy88
  • http://www.ravelry.com/people/swervinjervy
  • http://www.ravelry.com/people/deitscherbauer
  • http://www.ravelry.com/people/Bookworm09
  • http://www.ravelry.com/people/BeccaBear
  • http://www.ravelry.com/people/bebrilliantgo
  • http://www.ravelry.com/people/artohline

Groups

  • http://www.ravelry.com/groups/ux-ravelers
  • http://www.ravelry.com/groups/software-engineers-and-computer-scientists
  • http://www.ravelry.com/groups/men-who-knit

Recent Friend Activity

  • http://www.ravelry.com/patterns/library/on-the-side
  • http://www.ravelry.com/projects/koolaidkills/knitting-the-periodic-table
  • http://www.ravelry.com/projects/tedberlin/hat-and-statistical-scarf
  • http://www.ravelry.com/projects/Lily-Harlequin/giant-squid-hat-archive-2
  • http://www.ravelry.com/projects/artohline/27-buttoned-lace-vest

Reversible Cabled Brioche Stich Scarf

  • http://www.ravelry.com/patterns/library/reversible-cabled-brioche-stitch-scarf

Yarn for Stash

  • http://www.ravelry.com/yarns/library/hampton-artistic-yarns-snorgle-sock-yarn
  • http://www.ravelry.com/yarns/library/schmutzerella-yarns-yummy
  • http://www.ravelry.com/yarns/library/a-to-z-alpacas-royal-baby-alpaca-roving
  • http://www.ravelry.com/yarns/library/yummy-yarns-uk-punta-mona–sparkle-merino-handpainted-fibre
  • http://www.ravelry.com/yarns/library/coolclimates-sea-of-roses-handspun-art-yarn
  • http://www.ravelry.com/yarns/library/vickevira-bounce
  • http://www.ravelry.com/yarns/library/nooch-fiber-betty-draper
  • http://www.ravelry.com/yarns/library/edgewood-garden-studio-dusty-rose—handspun-merino-wool-yarn