Nowadays there are some excellent online courses to learn everything from basic mathematics to complex programming, but creative fields are often overlooked. Hence, Introducing handmade stories, HS is a place for handcraft lovers to learn, be learn, create and connect with like-minded creatives. Through this app, craft enthusiasts will have access to handmade crafts, online hands-on courses, workshops, interact with creative communities and attend forums.
To build a digital learning platform app for creative handcrafts lovers to pursue their interests and learn handcrafts from around the world.
5 weeks
UI/UX Designer (Research, Persona, UI, Usability testing, Prototyping, Visual)
Figma, Quip, Miro, Zoom, Useberry
How might we create a seamless and hassle-free online learning experience for people who want to learn creative crafts around the world?
Handcraft enthusiast Age 18-45
Students, working professionals, homemakers around the globe
I browsed through different apps in this niche and found out the following common design patterns:
I conducted some user interviews on understanding the creative crafts process and the need to learning online.
Before proceeding to build the wireframes, I ideated and brainwriting to prioritized features for the app.
Based on my research and user interviews, I created a persona that represents the type of customer that this app will cater to and visualized various aspects of their behaviour, core needs and frustrations.
With Zara's current web-app in mind, I began to structure out the necessary screens needed for Zara's customers in a User Flow using the following User Stories:
'With the coldest days of the year approaching, you’re thinking about buying a new sweater/ knitwear. You came here to check out what’s available and maybe make a purchase'
I began with sketching lo-fi wireframes to understand how the user would interact with them. I find it easier to get all my thoughts down on paper where I can interpret things more clearly. Further I iterated on the mid-fi wireframes for the app to come up with layouts that serve the essential features of those pages without hampering the user experience.
Conducted usability testing on the lo-fi prototype to get quick feedback on the screen.
The results suggested 34% mis-clicks and some confusions to find courses in user flows.
I used the Heat maps generated from the usability testing to see where users clicked, how far they scrolled, and overall, how they interacted with the site. This helped me understand how users naturally interacted with the site to further enhance the navigation patterns.
The task flow below demonstrated the high-level steps that users performed to get to a specific goal during the usability testing.
Based on the usability testing on the lo-fi prototype I re-iterated the wireframes and its flow to serve the user with more comfortable user experience.
Based on the visual meaning, I created a Style guide consisting of typography, grid, colors and interface elements that communicate the visual essence of the web app
Following multiple rounds of iterative design, I made changes based on usability test results to reach my current high-fidelity prototype:
I used Figma prototyping feature to bring HandmadeStories app to life.
Moving forward, my next steps are to:
There major learnings for me during this project were: