Role and Responsibilities: UX Researcher, UX Generalist, Workshop Facilitator
Problem: Food Truck vendors suffer from high transaction fees & fragmented payment and ordering solutions for small businesses.
Solution: A complete, single, all-inclusive mobile POS and ordering system providing low transaction fees & contactless payment.
Impact: Small businesses can operate using a point-of-sale that not only allows them flexibility, control, and the ability to track business metrics, but that also allows them the freedom to serve each and every new patron or regular guest in their community again by being able to accept all digital wallet options - no matter the device.
Approach
The stakeholders requested a responsive website for their product, an all-inclusive mobile POS system. Our team decided we needed to tackle 3 main questions:
who will use this site?
what information is important to users?
how is information distributed?
As identified by our stakeholders, our team specifically looked at the food truck industry as a target market; a 2 billion dollar industry of small businesses who suffer from fragmented payment and ordering systems. Some initial market validation had already been done, so we combined that with surveys and interviews we conducted on how users currently pay for services. This lead us to identifying our users and site direction.
Connecting the Team and Stakeholders
Throughout the process, it was imperative that we stay in communication with the stakeholders since decisions and designs moved quickly and the entire team was remote. I teamed up with a colleague to take on client outreach and mitigation. I took lead on zoom meetings and interviews and he facilitated email communication.
Working with the stakeholders, it was important to me to create a feeling of mutual trust and understanding. My meeting style was congenial and professional, supporting speakers with a smile, but being aware enough to keep conversations on target. Key duties included:
clearly state meeting objectives before and at the start of each meeting
create or co-create meeting outlines and interview plans
moderate discussion between team members
present updates to stakeholders
Finding a User
During the early stages of the project, upon learning of our stakeholders product, I took initiative to delve into the world of QR codes, point-of-sale systems, and the food truck industry as per our brief. Some major takeaways were: millennials are the most frequent customer for food trucks and other sole proprietor businesses having a propensity for supporting local communities, the mobile food truck industry earns $2B+ annually and is growing, yet a major concern for most owners is keeping prices low and product quality high to meet the demands of loyal guests, food truck owners spend 200-100$ on payment processing alone, and that the use of QR code use is on the rise, especially with more tech savvy and digital native generations.
User Persona for a small business user.
User Persona for customers, a millennial shopper on the go.
With this market research we defined our site users:
small business owners focused in small batch goods and services such as food truck owners and mobile product vendors at festivals or outdoor markets
customers who frequent festivals or outdoor markets who support local goods and make purchases on the go.
Both of these user groups have limited time to research payment solution options and viewing the site would most likely be on a mobile device on the go. Our site needed to be clear and focused, providing information that the user needs as they need it, getting to a point quickly, but allowing users to control how much information they receive.
This manifested in the final site layout by designating specific pages for different users and having a ‘How is works’ page to answer broader questions that pertained to all users.
Main desktop navigation bar
Defining a site
The field of mobile POS’s has some strong front runners, so we leaned on the groundwork of trust for digital sales the our competitors have already created.
A teammate and I did SWOT analysis of our competitor sites understand if there were any industry standards of what consumers expect. Clear information, direct language, and action focused CTAs were standouts with all competitor sites. The challenge is standing out against the digital pay forerunners: Google Pay, Apple Pay, Square, and Venmo.
SWOT analysis of GooglePay.
We also looked at a variety of sources to gain insight into how the site should operate.
We conducted heuristic analysis of direct competitor sites such as Square, and other informative sites, such as board game sites, to inform how users experience and interact with large amount of information.
These sites had visual elements that provided a natural flow to learning and helped the customer envision themselves using the product. They also use casual and fun language to garner comfort and trust. We took special note of this personable approach of visuals and dialogue which would be cornerstone of the Seqrpay website.
Heuristic Evaluation of the Moonraker board game brochure site.
We decided we would build a brochure style site that provides high level understanding of the product but also something fun that allows for deeper exploration to keep the site feeling exciting.
We used bold colors, relatable imagery, common speech copy, and action driven verbiage to promote excitement and forward motion. CTAs were highlighted using fuchsia and combined with blues in a gradient to suggest the fluid nature of the product, trust in the product, and play on the nostalgic late 80’s/ early 90’s aesthetic of our target market.
Workshops
Since we had a tight timeframe, our team had to divide and conquer. I led workshop exercises throughout the process to keep the team’s vision focused and unified and move us towards out next steps. These also served as checkpoints for blockers, pivots, and iterations. Our team was remote so workshops were conducted using Miro and Zoom.
Brainstorming Affinity Diagram
Objective: Define feelings about the product and site that will influence visual design elements and copy.
Process: Using the product name, Seqrpay, and product description from the stakeholders, team member created stickies of associative words and phrases individually. The team then reconvened to group like terms and determine feeling through lines.
Results: We realized that the site’s copy would play an important role in the user’s experience with the site. User’s will depend on the words to understand the product and how to use it. These words and phrases directly influenced imagery, color, typography, iconography, and architecture as the visual elements needed to bolster the written copy to instill feelings of trust and ease that are needed to encourage product adoption.
Value Proposition and Feature Prioritization
Objective: Define needed information and features based on user pain points and task flows discovered in the research phase.
Process: Team members stated pain points, defined success, and necessary tasks on the right side as they related to our users. We brainstormed solutions for those items and grouped those solutions on the left, relating each solution to a specific user driven need.
Solutions were translated into needed features and then prioritized based on out current time frame, capacities, and user needs.
Results: Before this exercise we had many possible solutions to perceived problems and lofty dreams of what could be on the site. These workshops brought key features to focus, allowing us to create clean worklists and time lines to meet our deliverables while ensuring client and the users have their needs met.
Navigation Card Sort
Objective: Create the basis of our information architecture and define what pages are needed.
Process: Team members wrote specific tasks, features, copy elements, and component elements as defined by previous workshops on stickies individually (purple). Then, we grouped those items into like categories, first defining small groups (red, black), then larger categories (blue).
Results: Solidified that the site needed separate areas for different users, but brought into focus common information that all needed to know. By starting with the generalized high level information and moving to the more specific details, this workshop helped us visualize how we would use copy to funnel a user to download in a logical manner. This mostly influenced how many components would be needed on each page and overall formatting of the site.
From Wire Frames to Prototypes
For this part of the process, our team conducted sketching exercises, each of us doing a sketch of the homepage and one other page and creating a mood board. We then met, discussed, and our visual team lead made final calls to define page layouts and style guides.
We divided into a day crew and night crew. Day crew were our primary visual team, creating the content and formatting. Night crew focused on refining formatting, checking for uniformity based on our defined style guide, and checking continuity and flow of each page.
Communication became vital as we divided up page design duties. I led daily stand ups, defined daily objectives for the two crews, and coordinated with team members on overcoming blockers.
Outcomes
The final responsive design was presented to the stakeholders 2 weeks after launch. The result was a clickable multiplatform informative site based on product concept, client requests, and user story. The site files we delivered to the client for further testing and front end development at their discretion.
Key take-aways from this project:
clear organization of duties allows a team to fully utilize their resources and capacities and allows for quick response when blockers arise.
communication when working with remote, busy clients builds trust and collaboration between parties which increases investment in the project and overall quality.
Hi-fi mobile prototype after user tests.
Hi-fi desktop prototype after user tests.
We used hierarchy to allow visitors to learn more about the site as they move through the pages. We addressed anticipated pain points for small businesses, such as the dread of switching systems. For consumers, we played heavily on ideas of convenience of use as well as that they would no longer need to worry about what is accepted where. We created a mission that focused on lifting up small business, for emotional resonance. The main calls to action of the site are downloading the app, so we worked on creating a flow in the site that naturally lead users to convert.
Next Steps:
continue working with stakeholders to ensure memorability and accuracy.
add video content for clarity and connection.
incorporate a campaign for social change, to appeal to the nobler motives of our audience. These are especially effective with millennials and we anticipate it would help improve overall adoption rates.
include client testimonials from both business owners and users
more testing and iteration of funneling mechanic and rate of download