RAVELRY CRAFT SITE REDESIGN
UX Design, RMITO
The design brief for this RMITO project was to choose a 3 page user-flow in an existing website, and redesign the pages and flow using UX principles.
I chose Ravelry, a community site where users upload their craft patterns both free and paid, and seek advice and connection with fellow crafters on the discussion boards.
In my flow, users are beginner crafters searching for a free knitting pattern to knit some thick socks.
Below is an exploration of my UX design process from start to mid-fidelity Figma prototype for a user flow of three pages:
Home page - search page - pattern page
1
What's Ravelry like right now?
C
L
U
N
K
Y
Original pattern page
Original search page
Original home page
Expanded filters from search page: Filters . . . too many filters.
2
What's getting in the way of users?
Original hunch
[Crafters] might find it difficult to [choose a pattern] because: [the site has too many options arranged in a lengthy and unclear manner, with outdated graphics/layout and too much assumed knowledge about knitting/crochet, poor product image layout and visualisation options].
Revised hunch - based on desk research
[Beginner crafters]
might find it difficult
[to navigate through the site to find and choose a pattern to download] because:
[the navigation is not intuitive, has a low signal-to-noise ratio, and scores poorly on a design heuristics review especially in relation to consistency, efficiency and aesthetics].
Desk research
1 - Heuristics Review
2 - Non-official Ravelry replacement apps e.g. Ravit
3 - App Reviews
HUNCH
VALIDATED
3
What do crafters think of the original design?
ROUND 1
USER TESTING
THE BITS IN THE MIDDLE:
4
Round 1 user testing affinity map,
insights & recommendations,
ideation, paper prototype
Users made it clear that they found the user experience difficult to navigate.
Why?
- too much information!
- poor visual hierarchy
- confusing terms
- lengthy & unnecessary filters
- not beginner friendly
- inconsistent branding
- poor image visualisation
What recommendations did I synthesise from the users?
1 - Modernise site aesthetics + streamline information
2 - Improve use of filters
3 - Improve picture viewing experience
4 - Include beginners + avoid jargon
5 - Strengthen branding to increase credibility + retain users
6 - Differentiate ads from content
The paper prototype was used for Round 2 of user testing.
Then:
The Figma prototype was created based on the insights & recommendations captured, to lead to...
The Finals:
Round 3 user testing.
5
The design gets tested some more
ROUND 2
PAPER
PROTOTYPE
ROUND 3
FIGMA MID-FI
PROTOTYPE
USER TESTING
ITERATIONS
DRUM ROLL PLEASE...
6
Ta-dah! The finished product!
NEW HOME PAGE
NEW SEARCH PAGE
NEW PATTERN PAGE