- Many people have very similar issues.
- Video Tutorials are well liked and people find them more helpful than written instructions when learning. But later on, written instructions are much more preferred.
- There should be more specific and clear video tutorials.
- People don’t want to feel alone in their struggles.
_ICJFNdwIysLsHGmDJepmu.jpg?width=750&quality=80&format=auto)
how to fix the issues
- Videos not being specific enough and not beginner friendly.
- Finding reliable and good resources takes ages and feels impossible.
- Mentioning of unfamiliar terms with no explanation.
- Lack of motivation.
- Disliking the feeling of being alone in ones struggles.
With some ideas of my own as well as those of the interviewees,
I then started creating some task flows and user flows.
The main task flow can be seen below.
And with this task flow, and my interviewees voices in my mind, I started wireframing.
Low-fidelity Wireframes
Following the task flow, the first 3 pages were made, a browse page, a pattern page, and a saved projects page.
I made 2 options for the “My Projects” screen, unsure whether to go with the same layout as on the browse page, or make a different layout.
After asking a few people which option they preferred, the winner was option 2!!
Mid-fidelity Wireframes
_JEdSJty05sRWdKYKc6mR6.png?width=384&quality=80&format=auto)
_rFoEKZEwHp2EpVOSyXqKu.png?width=384&quality=80&format=auto)
_ie5utoiXr6k7ZCxzx5xkz.png?width=384&quality=80&format=auto)
_0BCWdlLBbHIK3hl6BvOX9.png?width=384&quality=80&format=auto)
What got changed?
- The landing page was created.
- Everything got resized to fit the phone screen better.
- The first logo design got made, “Fiber Arts” in the Beau Rivage font.
- The little icons at the top of the screen got added, to have the phone screen look like its an actual phone.
- Fake titles and descriptions.
Color Palette and Typography Choices
The background color is a very light tint of blue #EFFBFF, to have the website’s atmosphere be welcoming and friendly.
The main color used in the website is a light purple/violet #E0C0FF and #F1E2FF to encourage relaxation, gentleness and mind fullness in the user.
Logo
- Originally the logo started out as just the words “Fiber Arts” in the Beau Rivage font
- Which then sparked 3 ideas.
- Make the A a needle and thread
- Change the font of the A to the Arizona font
- Use just the letters F and A
- The original font of the A (Beau Rivage) after being turned into a needle and thread looked too much like an R.
So that had to be changed to the new font (Arizona) but i wanted to keep the ball of yarn idea.
- I also really liked the idea and look of the FA but I wanted the full website name visible - I ended up liking the look of the FA with the little Fiber Arts written below it, more than the fully written out Fiber Arts logo.
But i still really liked the ball of yarn, so i decided to make that the Favicon.
High-fidelity Wireframes
At last, it was time to combine all the pieces.
_1_ho-u_4mu3JK2iU4cQTu1P.jpg?width=384&quality=80&format=auto)
Mobile and Desktop wireframes Figma Link
https://www.figma.com/design/Hh5s9k1QggXW6wpW6fTK6R/Fiber-Arts-Final-Wireframe?node-id=183-726&t=Qt3BLbLLtcuWOmbk-1Modifications
On the “Patterns & Tutorials” page, the filters design had to be changed, as the previous design was confusing, and the new design is clear, and easy to use.
User Testing and Success Measurements
I had 3 ways of measuring the usability of the wireframe.
- Time taken to complete a task
- Error rate
- How challenging the participant felt the process was on a scale of 1 - 10
- 80% Participants did each task under 20 seconds
- 40% Participants had difficulties finding the save button
- 80% Participants rated the tasks given under a 2/10
The save button then got moved to the bottom of the page after user testing
