Sew It Online E-learning Case Study
Updated: May 9, 2022
About Sew It Online
Sew it Online is a 100% portable sewing classroom. Accessible from anywhere, anytime - the purpose of SIO was to provide avid sewers with all of the resources they need to learn new techniques, explore their machines, and advance their skills,
Many avid sewers are in an older age bracket and have trouble using modern tools.
This is why the User Experience for Sew It Online was critical. It wasn't enough to build a pretty interface - SIO wanted to create a platform that would be universally understood by it's user base.
The Challenge
Our mission was to Clarafy the brand (get it?!) so that SIO users would connect visually with the service. We were also challenged to create seamless user experience so no user, no matter how technically inexperienced, would struggle with the interface.
We wanted for every sewer to be able to learn what she needed to learn without struggle, and without having to travel.
Clarafy's Role
We created the Product Design - User Experience (UX) and User Interface (UI) . Our rigorous customer discovery process was key to finding the pain points of SIO users. We also rebranded SIO with a cleaner, friendlier and more accessible feel.
Primary Tasks
1. Market Research 2. User Research 3. Rebranding 4. User Experience and Interaction Design 5. User Interface Design
Design Tools
Research
In order to conduct our research we first started by defining SIO's customer segment. We ID'd the demographics of our user, then got to work. We found 15 people within our demographic and started conducting user interviews.
Our interviews revealed motivations, goals and pain points of SIO's target users. We established their technological baseline, and then began to ideate key features.
Concept
We developed our concept based upon the target avatar's visual language, and then for good measure we tested it with them!
Wireframes
I make sure the wireframe is simple and 100% focused on clarity and functionality. At this point it doesn't have to be pretty - pretty is distracting! - it has to be useable.
I then create an initial prototype from the wireframes, and this is where the fun really starts! I tested the wireframe prototype with some of the initial users I interviewed. In this first testing phase, I looked for a couple of key indicators of flaws in the user experience:
1. How long does it take a user to perform an action
2. Where does the user get stuck
3. What questions does the user ask
Setting the Mood
Before starting the UI, I made a mood board. This is something I always do, because 1. it is a delight and 2. it helps me conceptualize what I want the app to look like, feel like, and represent.
For SIO I created a mood board using applications that the our target users already use and are accustomed to, as well as common medical applications and data heavy applications. I added fitness and wellness elements to the mood board and images of happy recovered people. This set the stage for creating SmartMatter's user interface.
Color and Typography
I used the mood board and the ever beloved Google Material Standards to create the primary and secondary color pallets, as well as the typography. I wanted the product to look, clean, trustworthy, and simple. So I chose the simplest typefaces, clean and easy to read, and cool colors
Testing The UI
With all of my assets in front of me and all of my ducks in a row, I was ready to create a testable user interface for Sew It Online. The first iteration I simply applied my selected colors and typography to the wire frame. I then did a quick round of user testing to work out some of the usability bugs, and after a few tweaks, came up with the final design.