SWATCH IT: A MOBILE FABRIC COLLECTION
This project challenged us to discover a problem or annoyance of one of our classmates, and design an effective solution for them. I was paired with my classmate Rena, a skilled fiber artist, and one of her many talents is creating bags and quilts out of unique and fun fabrics. Rena buys her fabrics at local art shows, and wanted an easy way to access her current fabric collection while she is out and about. She wanted to have mobile access to her collection so she will not run the risk of overbuying the same fabric or mismatching her color schemas for one of her projects. I had a two-week timeframe to design a mobile application that allows Rena to take pictures and organize her fabric swatches into galleries.
interactive prototype user flow sketches wireframes proof of design iterations user interviews user testing presentation
index cards sketchbook whiteboard OmniGraffle InVision
RESEARCH & INTERVIEWS
I sat down and spoke with Rena many times throughout the design process on everything from initial interviews, getting feedback on specific features, and testing the prototypes. Early on I realized that there are many creative fiber and textile artists that would also benefit from using this product, so I tried to accomplish Rena's ultimate goal while keeping the features universal enough so that others could use it as well.
SKETCHES & IDEATION
There are many successful picture gallery applications that can be incorporated into Swatch It. With these in mind, I began sketching out the galleries page and brainstorming the most efficient ways to organize fabric swatches. I decided that the user would probably want to sort their collections by color and/or by pattern. After speaking with Rena, I added in a "create projects" feature and a "my projects" category on the galleries page. This way, users can add fabrics of various colors and patterns they wish to use for specific projects.
The user flow went through several iterations by both sketching and paper prototyping. These iterations were adapted as improvements based on the users' feedback, and primarily concerned the navigation between the screens. Below are a few sketches of me puzzling together the user-flow process.
TESTING & ITERATIONS
A major advantage of this project was being in close proximity to the person it was being designed for. Rena, along with other volunteers, tested the app several times and continued to bring up issues that were addressed with multiple iterations. Below are iteration examples of the login screen, picture preview screen, and color gallery screen. The login screen was given some subtle but necessary design adjustments; I made changes to the font and shapes to differentiate between the input fields and buttons. For the picture preview, I removed the hex # field and notes section. After speaking with Rena, I discovered those may not useful, and that having a larger image preview would be better use of the screen space. For the colors screen, I wanted to keep it simple and straightforward. I added a navigation button that allows the user to return to the previous page to view all gallery options.
I learned a great deal from my first UX design project. First, I realized how easy it is to get stuck thinking from your (the designer's) point of view, and begin to stray from the users' needs. I noticed this especially during my initial user-flow iteration. The navigation seemed obvious to me, but when I tested it with my classmates, they were confused where to go next and how to get back. It is easy to fall into this trap when you are looking at the same product for several days, but I learned the importance of testing the flow on other users to ensure the application is intuitive and straightforward.
My biggest takeaway from this project was the importance of testing and wireframing before jumping to the design phase. I love the design aspect - and as soon as I had the idea of a mobile fabric gallery, I immediately started thinking of the look and feel I wanted for the app. However, testing the functionality is essential before you decided the nitty gritty details of how your final prototype will appear. In addition, you may be working with a client that is not interested in a re-design or a re-brand. Therefore, while thinking about the colors and fonts of application can help inspire your ideas, concentrating too much on these details may be detrimental to your entire design process.