Roopairs
Marketing Website Development
Iteration Is Important
Roopairs is a start-up company that originated at Cal Poly SLO who created a software that connects restaurants with service providers in case of equipment emergencies. This was a final project for my web design class where we got connected with the CEOs of Roopairs and teams collaborated to design and code a marketing website that would promote their software to targeted consumers. With multiple teams working with the same client, we were expected to have many iterations and to have iterations that would stand out from the rest.
October 2018 – December 2018
Design Tools
Adobe XD - Prototyping
Adobe Illustrator - Visual Design
Axure - Information Architecture
Brackets - Coding
Slack - Team Communication
Team
Reginald Lata - UX Designer
Abigail Fuad - UX Designer
Emma Stothers - UX Designer
Kelly Wong - UX Designer
The Design Process
The whole timeline of this project was a little strange to be honest. Since we were on a tight project schedule — and juggling multiple projects that quarter — we had to cut some corners in terms of following a design process, but rest assured that we were able to iterate designs, create prototypes, then code the final product. It was a stressful project, but I really valued my team and our ability to communicate and collaborate.
Information Architecture
Since Roopairs already had a pre-existing site we were able to map out an information architecture of what our client’s final product page wanted to look like. Our challenge was to create a landing page that catered to both restaurant owners and service providers and give them the ability to onboard with Roopairs. We wanted to keep our information architecture simple and easy to navigate so that potential users wouldn’t feel overwhelmed especially traversing the website for the first time.
Design Iterations
Once we had a clear direction on navigation my team all individually created a mockup of the website landing page. The goal was to possibly have many different iterations so that we could pick and choose the parts that worked and mesh them all into one cohesive design. We all created multiple iterations, but we narrowed it down to three different designs that would be the basis for our final design.
What We Learned:
Use Roopairs colors to differentiate different target groups.
Larger call-to-action buttons are eye-catching and should be included on the landing page to attract onboarding.
Company story should be included on the home page if users who aren’t from the two target user groups views the page.
Prototyping
In order to put all of our ideas together in one design we decided to create a prototype to see the full design before we coded it. We went through with all the things we learned from the iteration process and developed a design that would attract target groups to their specific pages as well as attracting other users who are interested in the product. One new thing that we felt that we needed to add was a timeline of how their product works for further interest.
Home Page
Restaurant Page
Service Provider Page
Meet The Team
The Finished Product*
Although not a full-fledged working product, we used this opportunity to sharpen our coding skills. It was an interesting experience having all our members code separate sections, but we managed to make it work. This was my first time working with Media Queries and it wasn’t too bad, the client praised us for our smooth transition from web to mobile so that’s a win for us!
*Final coded website taken down by company’s request
Moving Forward
Although this project had many ups and downs I’m really happy with the end result. The end product was a result of lots of trial and error and self-learning. I’ll admit that we had lots of communication problems with our client, but it didn’t stop us from moving forward with our design. There are things I wish we could have done better, but that could be left for edits in the future if I ever wanted to revisit this project. Ultimately, we weren’t chosen as the group to continue with the company, we learned a lot about working with clients and working as a team. We all had our strengths and weaknesses and we were able to work around all of them and I’m proud of what we accomplished..