Sunday Night Dinner
Rebranding, Design and Development for Craft Services Company // Practicum in Pro-Web Design @ UCSD, Dec 2016 - Feb 2017
The Team
Myself and 3 other UX design students
My Role
UX Research, UX/UI Design, Development
Tools
G-suite, Sketch, Invision
The Challenge
In the industry, craft services are typically discovered through word-of-mouth, but as Yelp has taken off in the past decade so have the number of clients finding SND through it. But without a website to showcase their work portfolio and offerings, Yelp is as far as potential new clients will go. We needed to give SND a way to expand their reach beyond their current clients as well as secure potential ones arriving from other channels.
The Design Process
Context
The Client
Sunday Night Dinner (SND) is an LA-based craft services company that provides excellent service for hundreds of clients including TV shows such as Shark Tank and America's Got Talent. In the past, they only got new clients through word-of -mouth, which was standard in their industry. But recently, other competition have been starting to branch out and make their own websites, and using Yelp as a way to pull new clients. In order to not fall behind the times, SND began to create their own website, but it was not functional or well-branded. For the objective of our design lab, my team and I reached out to SND to overhaul their website and create an image for them that would better reflect their professionalism and reliability.
James, the owner of SND
Discovery
Stakeholder Interview & Key Questions
We began with the man of the hour--James Lee, the owner of Sunday Night Dinner. The most important part of this project was building something that he liked, and that he really believed would represent his company accurately.
SND deals with a lot of large, professional companies in the film industry, Depending on the shoot that they must go to, they could be offering their service starting very early in the morning, or over the course of several days, or for a small event. There is a lot of variation in the service itself that must be accounted for.
Because of this, design-wise, the owners do not want a fill-in form on the website, and would rather clients contact them through phone call or email in order to better gauge what their client needs.
Also, they believe having an entire list of that menu options they provide would be too excessive. Instead, having a tab dedicated to explaining the services would be more helpful.
What are some phrases that best describe the ideal brand image you wish to portray?
Craft services done right
Go above expectations
Support production companies to work together to make a better show- sense of community
Takes care of the production crew
Passionate
What point of difference distinguishes your company from competitors?
Our competitors are usually individual—we’re a company with more than one person, so we have more resources and are more reliable. We can send a crafty suitable for the job and can serve union and non-union shows.
Competitive Analysis & Mood Board
We did competitive analysis with other craft service websites to see what information they used, as well as catering businesses and restaurants. For each competitor, we took a look at 5 key points: branding, functionality, content, site architecture, and design.
Branding
Out of the three competitor sites, Sassy Craft Services had the best branding. It is colorful, loud, and ‘sassy’! However, ours will be different; we want a warm, friendly, and softer vibe.
Navigation
Most craft services sites have generally the same navigation options. The pages that most people want to see are: home, services offered, portfolio, and contact. Pictures and about us are secondary but important as well.
Content
The content among the different craft services sites does not change much. Each site tries to explain how they are better (healthier). We will also have a small section explaining the impeccable quality and service of Sunday Night Dinner.
Functionality
Most of the sites had inconsistent functionality. Some of the social media outlets did not work on mobile and some did not work at all. We will make sure everything on our site is consistent and functional, as well as responsive.
Design
Most of the websites we examined had simple and slightly old-style designs. Sassy’s website was the most colorful and vibrant. We noticed that each site reflected the company’s own style. We also want our site to be a reflection of Sunday Night Dinner’s personality: outstanding, reliable, trustworthy, and of course, enjoyable.
Mood Board
User Interviews
We conducted even more interviews, this time with actual clients of different craft services. Based on our 10 interviews, we found that there were three major client groups, Production Managers, Event Coordinators, and Yelpers. Through the interviews, we were able to understand what all three users think are most important to them when searching for a craft service that satisfies their needs.
User Personas
The interviews allowed to generate multiple personas with their own unique needs. With the diverse amount of data gathered, we were able to create many different user scenarios and use cases that we could potentially incorporate into the development of the Sunday Night Dinner website. We were also able to extract specific features/functionalities that we thought were necessary in order to create a website that all users can be happy with.
Define
A Recap of the Audience and Problem
The audience consisted of three major client groups, Production Managers, Event Coordinators, and Yelpers.
There were 2 major problems to solve for:
We needed to give SND a way to expand their reach beyond their current clients as well as secure potential ones arriving from other channels.
We needed to give SND’s potential clients a way to easily understand the scope of their services and contact them.
Creative Brief
In the below create brief, we outline in more detail the product, scope, target audiences, objectives, and other insights. Feel free to check it out if you’d like to learn more about our process in depth!
Design
Prototypes and Mockups
We began with paper prototypes and wireframes so that we could brainstorm on how the website would be laid out. Using information from our competitive analysis and requirements from James, we built out the information architecture first so that we could make sure to cover all the necessary bases. We then moved onto creating different versions of the website layout. James was fortunately a very responsive client, and we were able to touch base with him after almost every step of the design.
Paper Prototypes
We showed him the prototypes and gave him our suggestions, and then took his feedback and whittled them down to only two versions to turn into low-fidelity mockups via Sketch. We did another review cycle with James, having him decide on which was his favorite before turning that one into a high-fidelity mockup. We then transferred the mockup to InVision, where we linked the pages together to make a usable and interactive prototype for both mobile and desktop versions.
Update as of 9/6/21: Unfortunately, the InVision account hosting the mockup is no longer able to be reached.
Initial Design Testing
This prototype was presented to James as well as a number of our classmates and peers to test for usability and flow. As a mostly informational website, we took to asking questions about the business and seeing if our testers would be able to easily navigate to that information. We observed their interaction, and afterwards asked for feedback on their experience. As most of the testers were also UX design students, they were able to give us concise feedback on what they felt worked and didn’t so we could make changes as necessary. James himself was happy to learn that all the information he wanted to convey was there as promised.
Development & Iteration
Building the Website
We built the website from the ground up using HTML and CSS, making sure it was responsive for mobile devices as well as desktop. We curated images that would align with the brand from Pexels and other free image sites. We wanted to make sure that any photos we had to get outside of James were as high quality as possible.
Testing and Improving
We did testing with the same batch of users after finishing the final website, allowing us to make some improvements before presenting the final product to James. Off the bat, our website was a vast improvement from his previous site—it contained all the information he needed while being functional and on brand.
Feel free to check out the updated Sunday Night Dinner Craft Services website below!
Final Thoughts
Our Learnings
We tried to satisfy each goal through the design of the website:
Modern and brighter design of site
Distinction between craft service and catering service
Target LA-based clients, and unions
Extensive list of clients for credibility
Limited photos for secrecy reasons (trade secrets)
Make sure to include links to other social media and contact information.
Easily see which services are offered and what they entail
Have several options to contact the company owner
Be able to access the website both on a laptop or mobile device
See visuals of previous services to get an idea of what is being served
Our creative vision was mainly focused around professionalism, reliability and credibility. We wanted to establish the company as someone who is highly regarded in the craft services business. In the process of developing the website, we also found out that it carries some trustworthiness as well. This allowed us to think of different content/designs that allows users to think highly of the company.
This project was most of our team’s first time dealing with a real client. It was definitely a learning experience in professionalism, organization, and being on top of timelines. Because James was so responsive the throughout the entire process, we were able to reach him for feedback and move the project along smoothly within our 10-week timeframe.
Overall, it was an amazing exercise in putting to practice our learnings from the curriculum, as well as working with a real time under real stakes.