Browser mock-ups.jpg

Roopairs
Web Redesign


Context

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.

Problem

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.


MY Role

  • Visual Design

  • Illustrator

  • UX/UI

  • Icons (Sub-branding)

TEAM

  • Anna Dang

  • Nicole Bramlett

  • Adrienne Wong

SOFTWARE + SKILLS

  • Adobe XD

  • Adobe Illustrator

  • Hand coding HTML/CSS

  • Client Communication

  • Team Communication

  • Prototyping

  • Branding

  • Slack

 

 

INformation
Architecture

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.

 
IMG_5172.JPG
 

 
kaelyn imagee 1.jpg
 

Process Notes

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.

Key takeaways

  • 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

 

 

Prototype 1:

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:

Moving forward

  • 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

 

 

Prototype 2:

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:

Moving Forward

  • 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

 

 

Final Prototype:

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

 

 
Macbook.jpg

CODING THE SITE:
HTML/CSS

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.

 

 

Interative features

JAVA1.gif

Roopairs steps

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.

JAVA 4.gif

Animated icons

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.

JAVA 3.gif

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.

JAVA2.gif

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.

 

 
Untitled-1.jpg

Persistent
Navigation

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.

Placement

  • 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.

 

 

Mobile version:

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.

Main Objectives

  • Provide the same level of content

  • Maintain Legibility and ease of use

  • Create adaptable designs

  • Uphold consistency between the mobile and web