BreadnBarter
A modern day bartering community.
Project Overview
BreadnBarter is a start-up social networking platform that wants to connect professionals with other professionals. They want an intuitive, easy-to-use application that allows professionals to post services they need and the services they are willing to offer. Customers are able to view their matches, direct message, read news feeds/forums and success stories. Ease of service is key in the experience to ensure repeat use. The application will help professionals build their business & connections.
Project Scope
End to End Mobile App
Role & Responsibilities
UX Designer
User Research, Interaction Design, Usability Testing, Branding
Timeline
2 Weeks
Tools
Design: Figma
Organization: Whimsical, Miro
Workshop: Zoom
Learning the Challenge
Bartering is the exchange of goods or services for other goods or services without using money. In modern times, people are bartering everyday. One example is influencers that ask for clothing in exchange of posting images for companies. A win/win! BreadnBarter wants to use this system to create a social networking platform to help people with businesses/projects in areas they may not be able to afford it. It is not common to highlight services, so it’s essential for me to conduct research to get a better understanding of the users.
My Research Goals were to:
Obtain information about bartering platforms catered to services
Obtain social networking industry statistics
Identify trends and important facts from competitors
Uncover BreadnBarter users’ goals, needs, frustrations, and motivations
Identify common limitations when starting/expanding a business
Uncover any mental health facts in regards to social networking
Secondary Research
Market Research
I started with market research to learn facts and statistics about bartering systems and social networking platforms. The market research will contribute to two areas; my competitive analysis and developing the persona. In depth research can be read here.
Competitive Analysis
Following up on market research, I assessed the competitors in the industry to help identify strengths and weaknesses of the bartering applications.
Based on my market research findings, I was able to develop the provisional personas which I used for finding those to interview for my primary research.
Primary Research
After the secondary research was conducted, I wanted to gain direct insight through user interviews. (See the interview guide here.)
I interviewed 7 participants; 4 male, 3 female between the ages of 20-50. From these interviews, I was able to make note of the users experiences with networking and exchanging services, and any frustrations they have.
Keeping the User in Mind
With the synthesized secondary research; we need to synthesize the primary research, which allows me to further empathize with the user. The method I chose to do so was through an empathy map where I gain the insights and needs of the user.
Insights
Needs
4/7 Users seek help from readily available information more often than requesting help
4/7 Users prefer to network through social media
5/7 Users passions involve the presence of others
Users need the freedom to exchange services at their own pace.
Users need to know people are legit.
Users need to be able to build their business without any major financial constraints.
Meet Bryant
Based on the research, insights and needs, we now have our persona Bryant, an artist and entrepreneur. The persona will serve as the user we are catering to when going through the design process for the app.
So, what is the problem?
To define the problem, we must take the insights and needs gathered from our empathy map and put this in a POV statement for Bryant. We can then create definitions through HMW questions allowing an opportunity to ideate potential solutions.
Now we ideate!
Strategy
After ideating as many solutions we can come up with, it is important to come back around to the business goals and user goals. With this information, I was able to find the mutual goals between both parties to ensure I’m going in the right direction for the content of the design.
Considering the goals and users needs, I am able to create an organized list of features for BreadnBarter through a product roadmap. The roadmap serves as a way to communicate key priorities in a understandable way.
Information Architecture
With the goals and a concrete view of features in mind, we can continue building on the structure by creating a blueprint. The application map displays the content arrangement and flows of the mobile app by listing the parent screens, and child screens.
Back to basics
When moving into IxD, there are fundamentals to get through first before going straight into the design. Taking my research and even elements from the ideate stage, I developed a UI Requirements Document as an overview of the screens to design based on different tasks and additional requirements to help with this process. Full document here.
Using the tasks from this document and application map, a task & user flow was created with multiple flows that the user would potentially take which will play a role when designing the wireframes.
Wireframes
Low Fidelity Sketches
Now that the foundation has been laid, we can go into the design phase. I began sketching the low-fidelity wireframes first, which enables me to examine what the app may look like before jumping into the digitization process.
Creating the Prototype
After designing the screens required, I created a prototype through Figma for usability testing. The test was done through Mid-Fidelity Wireframes so I can detect any errors in the flows, and design prior to getting attached to any branding or colors.
Testing it out!
Before conducting the usability test, it is important to create a Usability Test Plan with objectives, methodologies, questions, and tasks listed to measure the best results. The objectives are:
To evaluate the interactions the users have with the BreadnBarter’s mobile application
To observe users habits once given a task
To identify any pain points the user may have with the application
To empathize and ask follow up questions to get deeper insight
The test was conducted remotely 5 participants; 3 scenarios and 4 tasks, which were all recorded and transcribed. The methodology was Evaluative Research taking a Think-Aloud Testing technique. I made sure to have the participants verbalize their thoughts and processes.
The completion and error-free rate did waver. There was little guidance provided. It was clear the participants were familiar with their flows with other social networking apps resulting in an incompletion of Task 2. Additionally, the placement and design of the buttons during this task may have caused confusion. This information was extremely helpful in developing the affinity map and revisions.
Affinity Map
After the testing, I organized my findings into an affinity map to identify patterns, insights, and the priority revisions in moving forward. To organize this map, I had to extensively review my transcribed notes which helped me fully notice all of the patterns the users had and what urgently needed work.
Insights
4 out of 5 users bypassed the ‘Accept Exchange’ CTA button to complete task
2 of the 4 users assumed they would be able to message the user from profile
2 of the 4 took a shortcut to the Messages screen
3 out of 5 users wanted to expand on user legitimacy through social networking integration; 2 of the 3 mention wanting reviews
Based on observation, 3 out of 5 users were confused on the home screen resulting in uncertainty on task 2
1 of the 3 users mentioned the grayscale visual for prototype was the reason for uncertainty
4 users mentioned font size is too small
Patterns
4 out of 5 users views the Success Stories when asked to check user legitimacy
4 out of 5 users referred to the Discussion Board when looking for resources
3 out of 5 users would Save the users profile
3 out of 5 users viewed full profile prior to making the decision to move forward and accept
Priority Revisions
In compiling the revisions, I implemented major patterns, insights and any other error/pain points on a second version of mid fidelity prototype. To determine the priority of the revisions, I created a matrix considering the Value to the User and Feasibility of the task to create an MVP.
Branding
Wrapping up the testing, I went into branding. Before going into this blindly based on personal preference, I wanted to be strategic and do a bit more market research on social networking platforms and color theory. Based on my research, blue was a dominating color. From there, I created with a mood board in Pinterest with logo designs, color palettes, imagery styles, and typography.
Logo + Style Tile
The Style Tile was then created with a mix of components from the mood board and UI elements to establish a direct connection with the interface before defining the layout.
UI Kit
The UI Kit is a living entity with existing UI elements. BreadnBarter’s UI kit displays the design patterns, elements, and iconography, etc that was able to be used when designing the high fidelity wireframe. This document is important for the design team and collaborators based on the elements listed.
High-Fidelity Wireframes & Prototype
The high-fidelity wireframes were created from the revised mid-fidelity wireframes, while putting the design together I wanted to ensure I was keeping the goals and principles in mind.
Final Thoughts
When developing an end-to-end lifestyle app, I quickly learned that it required a different demand, approach and critical thinking level. This project was both challenging and exciting. I enjoyed the interaction and user interface design the most, because during the research phase users were not able to fully understand what the product is. So, it was rewarding to be able to bring the idea to life to create a better understanding.
The most challenging part was the usability testing. It was important to test users that have bartered on a professional level and match the persona/overall research. So, I was having trouble finding them or getting them to both understand and be interested. This process did set my timeline back by around 24-48 hours, however I was able to turn it around and complete this within the timeframe!
Next steps
Design implementation & handoff:
Since the design has been tested and revised, it is ready to enter the development phase.
Maintenance:
BreadnBarter will be tested and revised where necessary.