Roopairs is a Cal Poly startup, and Business to Business software company aiming to bridge the gap between service providers and Restaurants. The mobile “on-demand” platform connects restaurants with service workers so commercial equipment is properly maintained and repaired at all times. The co-founders Ray and David Bartolomucci have deep roots in the industry, and are looking for a new website.
Roopairs current website was unfit for the message they were attempting to convey to their three audiences: Restaurants, Service Providers and potential investors. My team was tasked to create a website with a space to satisfy the answers for each of these groups as well as display and convince why Roopairs is the company they should choose to partner with.
SOFTWARE + SKILLS
Hand coding HTML/CSS
At the very start of our project, before any design thought was put forth, we created the document to the right as our information architecture. Yes, a bit messy, but this served as the foundation of which we built our final project. The information architecture had to encompass the three distinct target audiences that Roopairs was trying to reach, as well as making it easily navigable and logical. We wanted to have easy navigability for clients coming to look specifically for information that will benefit and encompass their company, whatever the three audiences it may be.
Before we began any prototyping we wanted to make sure that we were on the same page with the client. They didn’t provide set in stone content so we had to dig through their presentation materials to gather what we believed should go on each page. To the right is a mind map we made to get out overarching themes and general ideas to run by the client before moving forward.
How do we go about addressing service pros and restaurants generally without being to specific to either on the home page?
Commonalities between service providers and restaurants: connect, manage and streamline
Catch phrase: “streamlining the way we connect”
Highlighting key words and phrases to emphasis throughout the site
This version of the Roopairs website was a conglomeration of each of my team members individual comps. After our first meeting with the client it was very clear we still had a lot of kinks to work out, but we felt more confident in the direction we were headed. To view a functioning prototype of our Version 1 Roopairs site click the button below the images:
Decision between Restaurants and service providers needs to be ASAP on the page, super large and in your face buttons to make the decision very clear
Tag line on home page should describe what Roopairs does quickly
Home page information needs to be more general
Create more definition between information blocks
Colors look “Facebook”, not ready to re-brand colors just yet
Liked the large images
Needs a “sexier” form button
Remove about section completely
After the first round meeting with the client, we scratched some content and introduced some new content. We put our heads together to develop some innovative solutions for the flaws in our previous version. For this second meeting with our client were able to elaborate even more to get a little more insight on what we could continue to improve. Each meeting with our client brought my team closer to the final version of the website. To view a functioning prototype of our Version 2 Roopairs site click the button below:
Reap the benefits section has too many icons - overwhelming
Get started section needs more images and a little more clarity
Problems section looks like buttons instead of information - reformat
how the information is displayed
Liked the icons on the home page
Remove app store button
Like the large buttons at the bottom to reiterate restaurant and service pro choice
in this version we also added slanted information blocks, we wanted to create a more natural and dynamic movement throughout the page
In response to the last meeting we had with the client we adjusted a handful of things to finalize our design for the website:
Changed the display of the “Running a Restaurant is hard” section to better display the information
To create more contrast we used the brands teal color to represent the Restaurant side of the site and the Orange color to represent the Service Providers side
We correlated the same colors on the home page buttons to create more visual contrast between the two sides
Adjusted the steps section by creating a more visual graphic that walked you through the application
We cut down on the “reap the benefits section” and condensed information into just four icons
Extended the get in contact/form to span the width of the entire page
We additionally created our own icons to fit in with all of the intended topics
CODING THE SITE:
Coding as a team proved to be no easy feat, but with a good system down we were able to divide and conquer. We attempted to remain as true as we could to our final Prototype design, only making changes where we saw was completely necessary. Some considerations we had to keep in mind while we completed the coding process were: Media Queries for mobile version as well as creating an interactive element to keep users engaged throughout the site.
To view the final website click on the button below to interact with all the features:
We utilized this interactive feature to demonstrate the steps it takes to use the Roopairs service. The three steps above correlate with the Restaurant side of the website, we also included a five step process on the service providers side.
The final Roopairs site made use of a lot of icons, to break up the repetitiveness of the icons we wanted to include some motion to add more visual interest to the page. We included a set of four on both the Restaurant and Service Providers sides.
Lets chat form
Forms can be boring, and sometimes intimidating. On our final site we used a form that mimicked a natural conversation to remove the robotic like feel of filling out a form. We hope that this increases the amount of people that reach out to Roopairs.
Key features slider
Roopairs provides extensive service to both Restaurants and Service Pros. We wanted to make sure we highlighted that within the site. Included in the image slider is screens from the Roopairs application to highlight the key features.
One of the key elements that our client stressed to us was that they wanted to make it very clear that this application was for both the service providers and the restaurant owners. We included many options throughout the website so that a potential client wouldn’t miss their opportunity to learn more specific benefits Roopairs could bring to their business.
Navigation bar with the decision between Restaurants and Service Pros
A call to action on the hero image
Additional call to action half way down the home page.
Our mobile version, just as much as our web needed to be able to display the information clearly. The entire Roopairs website is resizable as a mobile version, my team utilized media queries in the coding process to create this seamless transition. When viewed at a smaller size some of our key graphics began to loose their functionality. For that reason we created alternate layouts of some of our key displays so that they didn’t loose legibility when viewed in a different size. To the right are some of the highlights of the Roopairs mobile website.
Provide the same level of content
Maintain Legibility and ease of use
Create adaptable designs
Uphold consistency between the mobile and web