top of page
Ravelry Redesign
Ravelry is a responsive web app for crafters. Unfortunately for Ravelry, the UI could benefit from a facelift. I decided to challenge myself and do a redesign of some of their essential features.
A Quick Look at the Before & After
Before Redesign
Image: Ravelry on both desktop and mobile.
After Redesign
Image: Ravelry Redesign on both desktop and mobile.
The Process
1) Research & Design Brief
The Ravelry Redesign started with basic research and verifying if the users have a need for the update.
Image: Evidence that users want a redesign.
With there being a need for redesign, I then went on to create a design brief. The purpose of this brief was help establish the context, user stories and key branding requirements I would refer to when creating my designs.
2) Grids & Wireframes
I created wireframes for each user flow based on the user stories. I also used grids in my wireframes to ensure that each element was balanced and symmetrical.
Image: Grid breakdown
Image: Wireframes of 3 flows with grids.
Image: Grid breakdown
3) Icons, Typography and Visual Hierarchy
Once I was happy with each wireframe, I moved on creating my icon set, selecting my typography and making sure each element adhered to a good visual hierarchy.
Vector Icons
Each one of my icons has a stroke of 4px, padding 2px and feature a general outline that gets filled in when selected.
Image: Vector Icons Created
Typography
The headers are a serif font (Aleo) and the body text a san serif (Open Sans). I chose two different styles of font to help establish contrast and visual hierarchy between titles and body.
Image: Typography Card
Visual Hierarchy
Visual hierarchy and spacing patterns were added to each frame to help gently guide the user to the main action on each screen. Common spacing practices were also applied to each card style to help keep each UI element defined.
Image: Home screen before and after
Image: Search screen before and after
4) Color and Images
Color and images were applied to the design next. When selecting my color palette I played around with a few different options, creating different mood boards and ultimately deciding to go with a palette that compliments the imagery, and brand key words.
When selecting images, I followed my color palette and brand key words. Trying to keep image focused on the product and realistic representation of each craft.
Image: Color Palettes and Mood boards
5) High Fidelity & Animations
I selected color palette 1 and created high fidelity prototypes and animations.
Image: High Fidelity Prototype
Video: upload pattern animation
6) Designing for different Breakpoints
With Ravelry being a responsive web app I wanted to ensure that I also designed for different breakpoints. I used the same grid principles, visual hierarchy and color palette for the new screen sizes.
Image: Gid Breakdown
Image: home screen on different breakpoints
Image: Add to cart on different breakpoints
6)Style Guide and Hand Off
After testing the high fidelity porotype and making sure each element is pixel perfect I created a style guide and created an assets folder to hand off to developers.
Image: Style Guide
Next Steps for Ravelry Redesign
​
-
Continue to develop designs for the rest of Ravelry features.
-
Conduct user testing and implement iterations based on their feedback.
-
Create additional animations for cart check out and loading screens.
​
Summary Of Redesigning Ravelry &
My Learning Journey.
Redesigning Ravelry was an educational experience that contributed significantly to my growth as a designer and problem solver. I discovered that successful design requires a combination of technical skills and creativity.
Key Takeaways:
-
Breakpoints : Designing for different breakpoints taught me the importance of ensuring the design provides optimal user experience across a wide verity of devices they might be using.
-
Grid Systems and Visual Hierarchy: Having a consistent and organized layout helps create a harmonious easy to use interface that helps guide the user attention to key actions they can take.
-
Typography and Color: Utilizing and optimizing typography and color can help contribute to readability and accessibility of the design.
Key Learnings About Myself:
-
UI Elements, Systems and Assets : Creating UI elements and systems greatly helped me keep my files organized, constant, and made rapid iterations a breeze. Taking the extra step was well worth it in the long run.
​
-
Balance between aesthetics and usability: By utilizing visual hierarchy and grid systems it helped me learn a key process of keeping things functional and simple at the same time.
​
​
Overall, redesigning Ravelry has taught me to keep pushing myself, express creativity through simplicity and always have empathy for the user. I look forward to continually applying these lessons as I keep moving forward in my design journey.
bottom of page