Client
Cabin is a new lifestyle app that provides a modern space for a new generation of quilters to connect and share their work.
Product: End to End Mobile App
Role: Research, UX, and UI Designer
Disclaimer: This is an independent project based on my own ideas for a mobile app.
Challenge
Quilting is a mixed community of more traditional quilters and people who are adding modern takes to quilting. Currently, the market is dominated by a sort of hobbyist craft culture, which is dated and low-tech. Cabin would like to create a space that feels accessible to millennial and gen z quilters, where they can share their work, connect, get inspiration and learn.
As a brand new app, I needed to learn what features these users would value most and create the overall branding and UI. Then using these materials create the app.
Results
User interviews helped me guide the key features for Cabin, and keep those in mind as I created the screens. The final app is user-friendly and combined the key elements these quilters had been looking for: community, inspiration and resources.
Research.
Understand what features quilters would find useful in an app like Cabin
Cabin is essentially a brand new app on the market. There was one app that I found in my research that had a similar concept to what I wanted to create called Quiltspace. In playing around with the app I could see there was still potential for an improved user experience, as well as improved and modernized branding. Quiltspace has simple features, which on paper could be a good thing. Except the execution was unclear in what their purpose was. There were also features that were clearly not being used, which made it feel like an app that was just someone’s hobby and it wasn’t being maintained.
At this stage, I was still generally very curious about the spots of apps on the market for quilters. These include apps for fabric calculators, project planners, tutorials, and fabric shops. Non of these apps were designed to connect quilters or showcase their work. Which meant I needed to explore how quilters were using apps like Pinterest, Instagram, and Facebook. Many quilters pointed me to a knitting website called Ravelry as an example of what Cabin was looking to achieve for quilters.
Define.
User personas.
The quilting community has found ways to connect and grow as a community through the apps that are available on the market. I was able to find a few quilting groups that were made with the goal of bringing together millennial, gen z, and modern quilters in general. They are a very warm and welcoming group of people so I was able to find a great pool of people to speak with.
These users help me identify two key user groups the Advanced Quilters (Michelle Ford) and the Intermediate Quilters (Lauren Williams). There was a lot of cross-over in the ways these two users connected with others. The reasons why they did so varied quite a bit based on their experience level. Intermediate quilters do this more as a hobby, so they are looking for tips and advice as well as inspiration from other quilters for their projects. The advance quilters often do this for pay or they have been quilting for decades and they have made hundreds of quilts. These folks were looking to make general connections with people who have a passion for this world, they also wanted to connect with people who could add to their business. For example, long-arm quilters who would finish their projects or pattern makers.
Features.
Based on my market research I created an initial list of the features that I thought users may want on Cabin. I used this to help guide my interview questions and determine how the actual users felt about these. I quickly learned which features most people thought sounded nice, but would likely never be used. I also learned what was most important and what they liked about the apps they currently use. What it always circled back around to was the ability to connect with other quilters. Quilters spend hours and days on projects, from selecting the pattern and fabric, to cutting, sewing, and binding. There is a lot of work and love that goes into this, and they want to be able to share that work with people who can appreciate what has been created.
When I moved to design the screens I knew I would likely include both Priority 1 and Priority 2 features. However, grouping them by P1 and P2 really helped me to keep in mind what users would want to access first. Priority 1 items have some basics, as well as features focused on connection. The Priority 2 features are items I knew users would like in the app based on my interviews, but they did not need to be the main features.
Mapping.
Defining the sitemap and user flow’s for Cabin
Sitemap.
Using the features list I created a sitemap for Cabin. I would use this to help me design each screen and user flow. Since this was a new app I wanted to keep in mind engineering constraints and the realities of designing from scratch. I tried to keep in mind what apps like Facebook or Instagram looked like when they were first created. Simple and with a limited purpose in mind. I absolutely wanted to avoid making it seem like I “threw in everything but the kitchen sink”. This actually proved difficult because I had many ideas for how Cabin could grow and its potential. I had to remind myself that creating a delightful app that users found familiar and easy to use was more important than giving them every feature they could possibly imagine in one go.
User flows.
The primary reasons someone would download and use Cabin initially would be to connect and share work. I created those two user flows as a starting point before moving on to my sketches. Below you can see the happy paths for a user who wants to post a photo to their feed, and a user who wants to join a group on Cabin.
Branding.
The name Cabin comes from the log cabin quilt block which became very popular in America during the 19th century. It consists of strips of fabric sewn together that resemble an A-frame cabin with a warm hearth or sunny window square in the middle. Cabins tend to make one think of the woods, perhaps a cozy fireplace, a good book, nature, and perhaps a warm beverage. Quilts can themselves evoke a sense of coziness, and warmth, so when I set about designing the logo and brand colors I kept this in mind. I decided that the brand attributes for the company Cabin should be Inspiration, Connection, Discovery, and Curiosity.
For the logo itself, I actually used the true log cabin quilt block pattern. I felt that was interesting, and unique while being easily recognizable to any quilter. The green in the color pallet comes from the woodsy nature and the orange I pulled from the idea of a cozy fire or watching a sunset. These felt fun but unique for the mobile app quilting world. When I was researching app’s I saw a lot of pink and shades of blue, which didn’t align particularly with Cabin’s overall vibe.
Prototype.
Sketches & Planning.
I built Cabin from scratch using the information I discovered in my research and user interviews. I began by making a list of screens I thought I might need as well as making some initial sketches. These helped me see what could work, and what I would want to take to the mid-fidelity screens.
Creating the mid-fidelity screens was crucial to helping me clarify the user flows and to prepare me for my high fidelity screens. Even at this stage there were features that I had a few ways I could display. While I didn’t test the mid-fidelity screens I did walk a few users through the concepts I had created. They were able to give me some very valuable feedback. For example one user reminded me which features where the most important and to really let those have pride of place.
High-fidelity.
Working from my mid-fidelity screens, I was able to create and refine the screens I would ultimately use for testing Cabin. Creating those initial designs made the process of designing these screens relatively seamless. As an additional step to make this process as easy as possible I made sure to gather assets for images I would need in advance. This helped me to create a unified look across the whole product.
At this stage, I took a little time to have fun creating the Cabin mascot, the curious fox. I chose the fox for a few reasons. They are very curious creatures and that is one of the guiding principles of Cabin. Foxes also have a natural geometry to their look and there are many quilt patterns out there that have fox blocks in them. Lastly, the fox fit in well with the overall aesthetic of the cabin app, so it worked really well with the branding. I could image an expanded woodland creature repertoire at some point depending on the message.
I created everything that the app would need to be fully functioning. However, once I moved to the prototyping stage there were a few screens that I ended up not using for this round of tests including the screen that a user would see if they decided not to make a profile right away. I wanted to make sure that was an option to encourage more people to download and see what Cabin has to offer.
Test.
In order to get more users to test and give feedback on Cabin I did 1:1 testing and I used Maze to allow users to test the screens in their own time. The allowed me to get more user feedback within the limited window I had. Testing with maze was a very interesting experience. When I test my prototypes live with users I can remind them more frequently that this is a limited prototype and to keep the “mission” or task front of mind. In those cases users can talk to me about what they like and what they would want to click on to learn more; which is fun and useful. However, with Maze I was not there to remind them to stick to the “mission” and that the prototype would not fully operate as a regular site. I could tell that users were clicking on things they wanted to explore in addition to the actual task at hand. This was reaffirmed in their feedback. For example, one user said “While shopping, I would love to be able to read reviews or see photos from previous buyers about their experiences. However, the checkout process was easy and straightforward.” The task did not require that they check the reviews, it was just something that they wanted to do. Which on a fully working site that user would be able to view those things.
Iterations.
After speaking with users and reviewing the feedback from Maze I determined that the issues mostly came down to educating the user when they first sign in or enter the app (whether they created a profile or not). Most people felt that things were familiar and that Cabin was the combination of apps they already know and love. Going forward when a user downloads the app there will be the traditional welcome screens, and then there will be interactive features welcoming them to the app and pointing out where the key features are: 1) the top app bar with navigation menu 2) the bottom app bar and 3) the app bar once a user clicks on the menu. Outside of posting photos, joining groups was the next highest feature in Priority 1, so I wanted to make sure it remained in the bottom bar where people could access it quickly. Having a hamburger menu was still the best option for storing the events, tutorials, and shop since they were only priority level 2.
Final reflections.
Cabin was a really fun project to work on. From defining the brand to creating the prototype I felt really connected to the work. It was fun to see where I thought it was going to go when it came to the look, feel, and features to where it ended up.
This was the first app that I created fully from scratch including name and brand attributes. It gave me a lot of respect for the companies who have created something that is instantly recognizable like Google or Amazon. Names which when I stopped to think about them seem completely odd and random, but most people wouldn't think twice about now.
I think that’ll of the elements of this project came together in a very thoughtful way while staying true to the users needs. Not just an app that I wanted for myself 😉