Proffer
UX/UI Design
This was one of two projects I did while I was completing my Google UX certificate. I was to create an app and website based on a prompt of my choosing. The prompts were tailored to have a focus on humanitarian-like efforts, to be community driven, and overall to be used for a good cause. A prompt I chose was to create a platform where locals can sign up for volunteer services and that’s where my service Proffer comes in. I designed Proffer to be that middle man between the volunteer and the group they are volunteering for. I chose this prompt because this is a prompt that can be scaled at a local, regional, and national level. Any demographic can use the app and its versatility of networking volunteers, connecting communities, and allowing anyone to be a positive impact was something that I resonated with. Before I begin the processes of Proffer, I must add that the google project didn’t instruct us to make the every page, but just the ones which follow the user flow we created. We were also not instructed to create a fully functioning app/website ready for public use. All work is done in Figma.
Introduction
When I was brainstorming how my app would look like, I had to first ask, who was my app for. Proffer is an app that can be used for any age(of legal age), race, gender, etc. I admit, since I was once a volunteer, I pictured this platform to be tailored for students who seek more volunteer hours or young adults looking to explore various fields and services. But in reality, anyone of legal age can use the app to their needs. I then researched various apps and websites to understand how my platform should be displayed and what practices or layouts were most common. To understand my view, I pictured my site to be the volunteer version of LinkedIn. LinkedIn is all about networking and job opportunities and I see my site, Proffer, as the same thing, but with volunteer services. Although, Proffer will have a more softer and minimalist approach since it will cater to all ages. Some platforms I used as inspiration and research were Instagram, Nextdoor, and Linkedin. Instagram for its social media aspect, Nextdoor for its community/local approach, and LinkedIn for the more professional side. I wanted Proffer to have a nice smooth mix of each feel without overpowering or creeping on the others.
Philosophy
With my philosophy in mind of what my site is to accomplish I began creating the user flow of how I want my user to navigate through the app/website. To accomplish this, I needed to understand what my platform is to provide and how it will provide the services. How many pages will they go through to reach their desired destination? What was their goal while on the app? Can their goal be achieved in less steps? Can multiple goals be achieved under the same user journey? These were some questions I had in mind and answered in some way while I was creating the framework for my platform
User Oriented
Once I had an idea of my demographic and what I wanted my platform to provide, I began sketching multiple variants of the homepage and the various pages that a user would see during the user flow I theorized. The homepage was was the one I had the most focus on because since it is the homepage, it is the first page to make an impression on the user and give them the feel or vibe of what the app/website is trying to accomplish. I wanted the homepage to feel comfortable, be easy to navigate, look familiar, and hold as the main media hub for the platform. Additionally, I made the homepage a timeline page so it can show users what’s recent, allow people to see possible volunteer services, engage with the community, and to easily consume media. I also wanted my bottom navigation to be serviceable and always have purpose. On the bottom navigation, I included the home button, discover, posting, notifications, and bookmarks.
Sketches
App Sketches
Website Sketches
After selecting the sketches I decided were best suited, I began the mockups portion where I would use shapes, text lines, and other visual cues to give an image of what my app would look like at a foundational level. This step is important since it’s the grassroots portion of my platform. I always had the philosophy of what my platform is and keep that mindset as I was placing every button, text line, image, etc.
Mockups
Website Mockup pages
App Mockup pages
Using my completed mockups, I began filling in all the placeholder text with actual text that would be realistic to see on the platform. This is done to bring the app/website to life and begin seeing how it would look and feel in practice. Posts, UI labels, comments, and any other form of text cues were typed by me and catered to fit the environment that Proffer provides. I also made some changes when creating the lo-fi versions compared to the mockups on the app version. The first change was replacing the notification and bookmarks icon in the bottom navigation with the volunteer symbol and profile symbols. I wanted the volunteer icon to be as accessible as possible since the whole point of the platform is to volunteer. The profile icon was also moved to the bottom nav as well in case people want to inspect their account, update their information, or simply share what they have in person. The other change I made was removing the bookmarks icon and moving the notifications icon to the top right of the app screen, alongside messages. I particularly wanted messages and notifications to be next to each other so people can always be up to date on their messages, interactions, and people or groups they are interested in.
Low-Fedility Prototype
Website Lo-Fi Prototypes
App Lo-Fi Prototypes pages
High-Fi Prototypes is the last step of the design process and where all final revisions are made before the green light. At this stage, I began including images in place of where my placeholder images were to bring more color and life to the platform. Since this is an app solely about community involvement I picked images about school, planting, local sports games, etc. All my images are stock or from the public domain. Colors was also an important factor in this portion because colors help convey a message and act as a nice visual keystone to the user experience. I chose a light blue because it has a nice pastel look, gave off a welcoming tone, and adheres to the Web Content Accessibility Guidelines(WCAG) for those who have any form of visual impairment. Lastly, I made a major change to my volunteer timeline page where after people have picked out what volunteer services people want to do, they get the results of their filter on both website and app. The page I made before had a very as I would describe it “tight” image display and weird cut with the person’s profile section. I was bothered by how it looked and eventually made a version of it which was similar to the profile posts you see on the homepage to give more brand unity. This change first began on the app and was later adopted to be on website as well.
High-Fedility Prototype
Website Hi-Fi Prototypes
App Hi-Fi Prototypes pages
Walkthrough
The completion of Proffer gave me such a sense of satisfaction and content. After completing Spawn, I used the knowledge and skills I had on hand and incorporated my new found practices into Proffer. Proffer I consider to be the refinement version of my post learning stage of UX. Although, I still have more to learn in UX/UI, I’m certainly proud of what I conjured with a span of practically two to three weeks worth of research and prototyping. Proffer is definitely one of my more defining design works and a memorable one as well.