The most important step was addressing the context of the problem statement. The solution was to be geared towards the Floyd County community and local businesses.
The most important step was addressing the context of the problem statement. The solution was to be geared towards the Floyd County community and local businesses.
Café Takeaways
They believe it’s worth to educate the community and they play a part in that.
Floyd Country Store
Produce 1500 lbs of coffee per day, which leaves excess burlap sacks. These are either given away or thrown out depending on if they can find people who will take them.
Red Rooster
Like to partner with local companies and community
Brand that people support because of their green efforts
People don’t know the values of the store
Hard to get customers involved in a system
They used to compost by feeding their kitchen scraps to pigs however, the pigs got slaughtered so the cycle stopped.
“One of the clearest messages from the research is the importance and need for information about recycling. It is one of the key influences to increasing rates of recycling and a fundamental message to communicating what the benefits of recycling actually are.”
"Most small businesses believe that money and resources are the biggest barriers for incorporating sustainable practices."
General Research
“many small businesses do not realize the benefits that can be gained from pursuing environmental improvements.”
Too Good To Go
Mobile app aimed at eliminating food Waste
PROS
Exceptional example of waste stream reduction
Provides platform for Businesses and people to interact
Simple process to reserve and pick up
CONS
No other option to engage with local community
Not geared towards smaller communities
Good on You
Mobile app aimed rating sustainable practices in the fashion industry
PROS
Provides in depth information about companies sustainable practices
Provides articles about sustainable fashion
Promotes sustainable companies
CONS
Focuses solely on informative side, lacking engagement with companies
NRV Homegrown
Consumers purchase a “Go Local Card” which unlocks discounts at local businesses
PROS
Desire to help local businesses through business and community involvement
Provides benefits to both consumers and businesses
Strong engagement between both Businesses and Community
CONS
Engagement is limited to having a physical card
Less emphasis on sustainability
After researching the market options, I formulated some pros and cons for each option. While not all options are apps, all provided useful insight for my app.
Culminating all the research helped me simplify the needs of my targeted user group, which in turn, helped me develop the core features of the app. I began designing a basic app map to break down everything into specific ideas and give me a basic understanding of how users would interact with the app.
Culminating all the research helped me simplify the needs of my targeted user group, which in turn, helped me develop the core features of the app. I began designing a basic app map to break down everything into specific ideas and give me a basic understanding of how users would interact with the app.
These represent some brain dump sketches. These helped me figure out some general layouts as well as visualize hierarchy.
Sketches
After sketching, I transferred the ideas into Figma to create some low fidelity prototypes. I also began to play around with some color, in an attempt to see them look more complete.
After sketching, I transferred the ideas into Figma to create some low fidelity prototypes. I also began to play around with some color, in an attempt to see them look more complete.
After sketching, I transferred the ideas into Figma to create some low fidelity prototypes. I also began to play around with some color, in an attempt to see them look more complete.
From here, I was able to receive some feedback from my classmates and professors and make changes. I created a style guide to help visualize the changes I needed to make. My primary goal was to maintain a platform for the local business as well as the Floyd community. This implied a comfortable app atmosphere, mixed with the professional setting of the businesses.
From here, I was able to receive some feedback from my classmates and professors and make changes. I created a style guide to help visualize the changes I needed to make. My primary goal was to maintain a platform for the local business as well as the Floyd community. This implied a comfortable app atmosphere, mixed with the professional setting of the businesses.
From here, I was able to receive some feedback from my classmates and professors and make changes. I created a style guide to help visualize the changes I needed to make. My primary goal was to maintain a platform for the local business as well as the Floyd community. This implied a comfortable app atmosphere, mixed with the professional setting of the businesses.
Font
Main Title
Secondary Title
Subtitle
Secondary Subtitle
Text
Secondary Text
Nunito- Bold, 29.3 px
Nunito- Bold, 23.44px
Visia Pro- Heavy, 18.75px
Visia Pro- Heavy, 15px
Inter- Extra Light Italic, 12px
Inter- Extra Light Italic, 9.6px
The font was very important for the development of Floyd Cares. Firstly, the typography had to elicit a caring, yet business look. I chose the font “Nunito” as the main title font as I felt its smooth, curved letters provided both the caring and formal aspect I desired. I complemented the title font with an additional subtitle font: “Visia Pro”, as well as a main text font: “Inter”. All of these pointing back to the caring yet business like tone.
The Colors were inspired by the existing Floyd County logo. This was to connect the app back to Floyd, but also emphasize the sustainability aspect of the app. The lively green tones help attract users attention, not in an overwhelming way, but in a calmer/tranquil manner.
Colors
77E1D0
00C8AB
BBF0E7
DDF7F3
F2F2F2
000000
Intro Frames
Intro Frames
Intro Frames
These are the first few frames user’s will encounter when loading into the app for the first time. Users are greeted with a short description of Floyd Cares as well as the opportunity to log in or create an account as a consumer or business. The process of signing up is meant to be intuitive, welcoming, and quick.
These are the first few frames user’s will encounter when loading into the app for the first time. Users are greeted with a short description of Floyd Cares as well as the opportunity to log in or create an account as a consumer or business. The process of signing up is meant to be intuitive, welcoming, and quick.
These are the first few frames user’s will encounter when loading into the app for the first time. Users are greeted with a short description of Floyd Cares as well as the opportunity to log in or create an account as a consumer or business. The process of signing up is meant to be intuitive, welcoming, and quick.
Sign Up Frames
Sign Up Frames
Sign Up Frames
The Sign up frames for both consumers and businesses.
The Sign up frames for both consumers and businesses.
The Sign up frames for both consumers and businesses.
Business Sign Up
Business Sign Up
Business Sign Up
Consumer Sign Up
Consumer Sign Up
Consumer Sign Up
Home Page
Home Page
Home Page
Upon logging in/creating a profile, user’s will be directed to the Floyd Cares home page. It was important to have the “Floyd Exchange” tab be front and center as it is one of the most important features and must be easily accessible. This allows for easy navigation and users not being overwhelmed with too much information.
Upon logging in/creating a profile, user’s will be directed to the Floyd Cares home page. It was important to have the “Floyd Exchange” tab be front and center as it is one of the most important features and must be easily accessible. This allows for easy navigation and users not being overwhelmed with too much information.
Upon logging in/creating a profile, user’s will be directed to the Floyd Cares home page. It was important to have the “Floyd Exchange” tab be front and center as it is one of the most important features and must be easily accessible. This allows for easy navigation and users not being overwhelmed with too much information.
Floyd Exchange Interactions
Floyd Exchange Interactions
Floyd Exchange Interactions
Performing an exchange was designed to have all the necessary information available, with a linear path guiding users along. This is shown through step by step instructions, reviews, and users being able to receive notifications reminding them of their pick up time slot. Businesses validate exchanges by simply scanning user's personal QR code.
Performing an exchange was designed to have all the necessary information available, with a linear path guiding users along. This is shown through step by step instructions, reviews, and users being able to receive notifications reminding them of their pick up time slot. Businesses validate exchanges by simply scanning user's personal QR code.
Performing an exchange was designed to have all the necessary information available, with a linear path guiding users along. This is shown through step by step instructions, reviews, and users being able to receive notifications reminding them of their pick up time slot. Businesses validate exchanges by simply scanning user's personal QR code.
Completing an Exchange
Completing an Exchange
Completing an Exchange
Validating an Exchange
Validating an Exchange
Validating an Exchange
Floyd Inform
Floyd Inform
Floyd Inform
“Floyd Inform” is a new platform for the community and businesses to learn more about sustainability. Articles are curated and approved by Floyd Cares for the general community to read. The design is meant to be similar the as “Floyd Exchange” page to help users understand how to navigate the section. Users can also view the postings which business upload in this section.
“Floyd Inform” is a new platform for the community and businesses to learn more about sustainability. Articles are curated and approved by Floyd Cares for the general community to read. The design is meant to be similar the as “Floyd Exchange” page to help users understand how to navigate the section. Users can also view the postings which business upload in this section.
“Floyd Inform” is a new platform for the community and businesses to learn more about sustainability. Articles are curated and approved by Floyd Cares for the general community to read. The design is meant to be similar the as “Floyd Exchange” page to help users understand how to navigate the section. Users can also view the postings which business upload in this section.
Uploading Items/Posts
Uploading Items/Posts
Uploading Items/Posts
Businesses can upload an exchange or a post in the “upload” tab. The layout for both processes keeps the uploading experience simple, saving time for businesses. It also contains a preview section, making sure the uploads look good for users. Uploading posts allows businesses to communicate with the Floyd community about whatever! This could be a new initiative a business is starting, a new product, or simply share business values.
Businesses can upload an exchange or a post in the “upload” tab. The layout for both processes keeps the uploading experience simple, saving time for businesses. It also contains a preview section, making sure the uploads look good for users. Uploading posts allows businesses to communicate with the Floyd community about whatever! This could be a new initiative a business is starting, a new product, or simply share business values.
Businesses can upload an exchange or a post in the “upload” tab. The layout for both processes keeps the uploading experience simple, saving time for businesses. It also contains a preview section, making sure the uploads look good for users. Uploading posts allows businesses to communicate with the Floyd community about whatever! This could be a new initiative a business is starting, a new product, or simply share business values.
Uploading Items
Uploading Items
Uploading Items
Uploading Posts
Uploading Posts
Uploading Posts
Statistics Page
Statistics Page
Statistics Page
I also wanted both businesses and consumers to have access to a statistic page. The goal was to provide feedback about the impact both parties were making. The page also holds milestone trackers to further incentivize usage. Lastly, it helps businesses track basic stats such as interactions and impressions with their posts.
I also wanted both businesses and consumers to have access to a statistic page. The goal was to provide feedback about the impact both parties were making. The page also holds milestone trackers to further incentivize usage. Lastly, it helps businesses track basic stats such as interactions and impressions with their posts.
I also wanted both businesses and consumers to have access to a statistic page. The goal was to provide feedback about the impact both parties were making. The page also holds milestone trackers to further incentivize usage. Lastly, it helps businesses track basic stats such as interactions and impressions with their posts.
Profile Page
Profile Page
Profile Page
One of the goals for the profile page was to have it show past exchanges. I found inspiration from "Venmo" and incorporated a similar layout and style. Additionally, wanted the profile page to showcase users achievements (based from the statistics page), giving them the ability to show off their involvement. Businesses also have the ability to have an "About" section, giving them the opportunity to shar their values with users.
One of the goals for the profile page was to have it show past exchanges. I found inspiration from "Venmo" and incorporated a similar layout and style. Additionally, wanted the profile page to showcase users achievements (based from the statistics page), giving them the ability to show off their involvement. Businesses also have the ability to have an "About" section, giving them the opportunity to shar their values with users.
One of the goals for the profile page was to have it show past exchanges. I found inspiration from "Venmo" and incorporated a similar layout and style. Additionally, wanted the profile page to showcase users achievements (based from the statistics page), giving them the ability to show off their involvement. Businesses also have the ability to have an "About" section, giving them the opportunity to shar their values with users.
After completing Floyd Cares, I was extremely proud with the work I was able to produce. However, simply due to the limiting time frame, there were future ideations and concepts that could could be explored.
After completing Floyd Cares, I was extremely proud with the work I was able to produce. However, simply due to the limiting time frame, there were future ideations and concepts that could could be explored.
After completing Floyd Cares, I was extremely proud with the work I was able to produce. However, simply due to the limiting time frame, there were future ideations and concepts that could could be explored.
User Testing
Firstly, I hope to conduct some user testing on the app. With all that was going on with the project, I was not able to do so. Having this opportunity would be so crucial for the overall design of the app, pointing out flaws that I couldn’t see. This is by far the most important future step I would make as user testing is extremely important for the development of any design.
Takeaways
I was able to learn plenty about the process of designing an app. While this is not my first project of this kind, it still taught me a lot about how to continue to design around the user. I gained a lot of insight into real world needs, as well as how to problem solve and design around them. I continued to develop my skills in visual design, creating UI that is functional as well as appealing to users.
Ben Kobayashi
benkoby2@vt.edu
Ben Kobayashi
benkoby2@vt.edu
Ben Kobayashi
benkoby2@vt.edu