WILDFLOWER APP CASE STUDY: A CAPSTONE PROJECT
The objective of this mobile app prototype is to have a platform that makes the distribution and recycling of secondhand clothing more convenient, whether that be by donation, selling, trading or repair. Ultimately, this is to make Toronto more environmentally friendly.
I came across my idea when I thought about this infographic I happened to see a long time ago. It elaborated on the topic of fashion and sustainability, and how much damage the fashion industry causes yet not many people know about it. It also encouraged people to recycle clothing or to buy more quality clothing instead, as opposed to the dominant fast fashion we tend to see today. I then digged a little further and looked into different platforms that sold secondhand clothing (i.e. trunkcloset.com, vinted, varagesale) and later visited lovethatcloset.com. These platforms were all aimed for selling, but each had its own limitations. I decided to draw comparisons with three existing platforms that I felt would be the biggest competitors/source of motivation, as shown below:
I found it interesting that out of the three platforms, lovethatcloset.com was the only platform that had a more automated process; unlike Varagesale and vinted, the people behind lovethatcloset.com would be the ones photographing and setting the price to the clothes the user sent in. It’s understandable since it’s a quality assurance issue (they only accept designer labels in good condition), but it also limits the kind of user that would be using their service. I wanted to create a platform that would be less restrictive, and I liked the general concept of their service to make things more convenient for the user.
I also noted that lovethatcloset.com was the only one that would donate 5% of profit to charities, but that was monetary donation, not clothes donation. I thought, “why not include the aspect of donating into my platform?”
Aside from looking into at the possible competition out there, I looked through a few websites to get an idea of what the secondhand clothing culture was like in Toronto. You can find the links here:
The survey was compiled in Typeform, with 51 questions divided into four parts (Fashion, Sustainability, Service + Technology, and basic demographic questions). Although my survey was rather long by most standards (almost 11 minutes to complete), the answers given by 38 participants helped a lot in gaining insight on people’s perspectives in fashion and sustainability as a whole. I tried to diversify my pool of participants by asking friends in my network, as well as coworkers and even a reddit thread to get people normally out of my reach to answer too.
From my survey, I found that majority of people solely donate clothes, rather than my initial assumption that selling old clothes is a popular activity. Maybe it’s just the immediate people I know that aren’t into selling clothes and those that favour doing so are out of my reach, or people (in general) really aren’t into selling their old clothes. In either case, this was something I decided to put in consideration in the development of my project.
Five people were interviewed after the survey was handed out. I chose them based on their likeliness of using the conceptual app, narrowed down from my own network of people that I know.
Although I got plenty of quantitative and qualitative data from the survey, it was the interview that allowed me to carve out believable personalities for my personas.
From the interviews and the survey, I was able to construct two distinct personas: Lauren Cameron (primary persona), the decently fashionable but heavily environmentally conscious (and more likely to donate secondhand clothing), and Jessica Parker-Lee (secondary persona), who was much more fashionable than caring about the environment (and more likely to sell her old clothes).
Constructing personas helped with making scenarios, as their interests and personality provided a foundation for the motivation of said personas to use my app.
Lauren is planning her schedule so that she can complete all her errands in one go. The only thing is, she kind of has to go out of her way just to drop off the clothes she wants to donate. She feels good about being environmentally-friendly, but she doesn’t want to put in so much effort to do so either.
Jessica has a busy weekend with family gatherings up ahead, but her house is a mess. Her room has a giant pile of well conditioned unwanted clothing but she hasn’t gotten the time to go through the process of taking individual pictures and posting them online to sell to other people. She’s hoping to make some extra cash on the side but doesn’t want to waste too much of her time.
User stories was like an extension for user scenarios; it reinforced the persona’s/user’s expectations as well as helped establish features that would be essential to the functionality of the app.
1: As a user, I want the app to sell my clothes without the hassle of myself taking and posting individual pictures, so that I can save time.
2: As a user, I want the app to arrange a service pick up my pile of clothes so that I wouldn’t have to try to decide between a few consignment stores.
3: As a user, I want the app to make a secure payment method so that I don’t have to worry about getting ripped off when I sell my clothes.
Information Architecture + Planning
Design Process Part 1
POP Paper Prototype
Usability Testing Prologue
I call this a prologue because it was user feedback from just two people, so it doesn’t count as a proper usability test. However, Victor’s and Stephanie’s feedback for the POP Paper prototype proved to be very valuable. Viktor pointed out that the flow for the donation path would be much more logical if the choice to pick which organization to donate to came first, then the option for either drop-off or pick up delivery. That way, the objective is taken care of first, with the minor details (drop off or delivery of clothes) attended to afterwards. Stephanie pointed out that I needed more text to explain the process to first time users. This was something I knew I would eventually have to do, but had neglected to for my paper prototype in my haste to get some layouts drawn.
Mid-High Fidelity Wireframes
High Fidelity Prototype 1
I started off with two differing concepts:
Second Wind — inspired by my discovery of this particular term in video games, wherein a character (or in this case, clothing) gets given a second life. I was thinking of incorporating the visuals of a phoenix as they are creatures that get reborn again as well, but the visuals and connotation seemed a bit too intense for this project.
Wildflower — originally inspired by the mental image of a dandelion distributing its seeds in the wind. This correlates with the notion that the user’s clothes would be given to wherever, like how the wind carries the seeds. The name was modified to a more general term of wildflower as dandelions may be seen as herbal pests to certain people, giving a negative perception, as well as the fact that the common and scientific name of the dandelion is not as phonetically pleasing.
For my usability testing, I asked 8 individuals to take a look at my app prototype. Below is a table listing their basic demographic information:
I gave each tester a set of four tasks to complete:
1) sign up via email
2) go to the profile page and “take a picture”
3) simulate a process in which the user donates their clothes and wants someone to pick them up for them
4) go through the donate tutorial
After the testing, I found that the first and third tasks were completed smoothly by all participants. It was the second and fourth task that proved to be confusing to some. Part of it was the fact that my instructions may not have been the clearest, and a final screen was neglected (task 2); or that the layout itself was confusing (task 4). Overall, participants found the UI interface to be aesthetic pleasing and harmonious.
Suggestions and Comments From Testers
- should make revisions for the profile picture functionality; would be nice to be able to zoom and crop when taking a picture
- should have a follow-up page to exit the camera functionality
- tweak the wording of some titles/input fields
- could make some tweaks to the top bar so as to ensure a task is not disrupted
- should find a way to exit on boarding tutorial without having to go through all of it
- reduce scrolling for some on boarding pages to reach the next step
- could have an option to save information so that flow can be even smoother the 2nd time around (billing info, pick-up info)
- would be nice for the calendar to omit the possibility of selecting previous dates
- conflicting suggestions based on order of events for the donation flow; payment info first vs. pick-up info first
- should have a general “home” button
- should move the on boarding button elsewhere (maybe add it to the hamburger menu list instead?)
- should make some tweaks to the on boarding layout (ie. have a whole screenshot of the page instead of highlighting parts of the page to avoid confusion?)
- maybe have notifications shown as a number instead of a pop-up
- “Is this a real app? I’d love for there to be a service that picks up my clothes for donation!”
• “maybe skip onboarding for how to donate altogether since the process is so straightforward?” — Andrea
Design Process Part 2
Based on the feedback that was given from the usability testing, I made some minor tweaks to some of the screens. Below are a few examples:
Future Steps Pt 1
•Incorporate “loading animation” to further reinforce brand
•Incorporate animation to for thank you page to enhance brand
•Continue implementing feedback to better the app
•Elaborate/expand on “Sell” section/flow
•Elaborate/expand on “Trade” section/flow
•Elaborate/expand on “Repair” section/flow
•Elaborate/expand on “Explore” section/flow
Although I was happy with the colour scheme that was concocted, the forefront visual felt lacklustre compared to the colours. It was a struggle to come up with a representation that was not too simple (or else it could be mistaken as any old flower) or too complex (it wouldn’t translate well in a 64 x 64 px icon).
At first, the idea of illustrating the transformation from flower to the actual seed blowing in the wind as an all-in-one mural of a logo seemed like an enticing idea. When it came to drawing it all on paper however, it seemed a little messy, especially if I had to make the flower in a way that wasn’t completely lacking petals (in the seed production stage) but not necessarily full-bloom either. It was an awkward transition to try to capture all at once, so I went back to the drawing board.
I decided to try my hand at illustrating a wildflower in the wild once more, this time taking up inspiration from illustrations and tattoos.
My final concept scaled:
High Fidelity Prototype 2
Some Final Thoughts
This project has proved to be quite the ambitious one for me. Although I would still dub it as an MVP, the experience of hashing out high-fidelity layouts, fine-tuning UI details, optimizing user flow or even testing prototypes for colleagues has taught me how valuable user research, testing and experience is. I’m happy with this project even though improvements can still be made, and glad that I can add this as something I can be proud of. Thank you REDacademy for this course!