Sarah LudlowAvital
Responsive web design for a food experience company
The challenge: Avital needs a better web-based experience to support its pivot to being a more corporate-forward company. Their site at the time wasn't designed with this in mind, and it's their biggest area of growth, so we set out to restructure the website to reach this new audience.
Sprint from research to hi-fi prototype, with a team of four.
Interviews plus a survey on how people book team events.
Usability testing: the existing site, then mid-fi and hi-fi prototypes.
Research, information architecture, wireframes, UI and testing.
The research
Three methods, each feeding the next:
Strong imagery and testimonials, undermined by inconsistent navigation and hidden pricing.
- Large, high-quality images and videos with carousels
- Concise, accessible main navigation
- Extensive customer feedback through testimonials on each page
- Inconsistent nav bar between pages
- Company message and mission sit at the bottom of the homepage and are unclear
- Pricing isn't transparent and only appears after an inquiry form is submitted
- "About Us" in the footer leads to the San Francisco home page
Every user hesitated at the same point: handing over information before they knew the price.
got stuck in the "Food Tours" section because the top navigation changed.
didn't want to enter their information without being sure of price and content.
had trouble with the calendar and knowing what was sold out.
People want a fun, varied night out with coworkers, and they need to trust the brand and the price.
Define
To solidify our findings, we made a user persona that anchored the rest of the design process. Meet Katheryn Aquino.
Katheryn Aquino
A busy HR manager navigating the new frontier of online engagement for her company. She's tried all the trivia games, happy hours and Pictionary parties a few too many times, and realizes this hybrid of virtual and in-person is now the new "normal." She needs engaging, trustworthy options for virtual team building and corporate wining and dining.
- Schedules multiple team events and activities a year
- Takes recommendations from friends, reviews and social media
- Planning a memorable experience for her team
- Giving her team a way to feel comfortable in a virtual setting
- Easily compare options
- Activities that help her team relax and socialize
- New types of experiences that encourage participation
- Food and drink variety, considering dietary restrictions and sober team members
- Lack of price transparency
- Having to call or email for more information
- Being prompted to sign up before having all the info
"It was cool to be put in situations we wouldn't normally be in, to learn more about each other."
She started excited and ended up leaving without booking.
Scenario: After switching to a hybrid work model, Katheryn is searching for a virtual team building event that will help encourage strong company morale. She expects to compare different types of events, find fresh activities that won't bore her team, and see a wide variety of food and drink options.
Searches for a team building event and finds Avital's "virtual events" section.
Likes the atmosphere, but immediately feels a bit lost as she clicks through.
Confused. Can't tell corporate from public tours.
Sees an option to view pricing and book instantly, clicks, then backs out because she doesn't know where her deposit would go. Finds the inquiry form at the very bottom.
Wants clearly laid-out options and pricing. Sees repetition and too many ways to book.
Frustrated and lost in the sea of virtual events.
Fills out the inquiry but doesn't submit, because she isn't sure what she's signing up for.
Needs a simpler process for finding and sorting through these fun events.
Confused and discouraged after finding a company that could have led to a great activity.
Steps away and decides to come back later.
Information overload. There could have been a more straightforward booking process.
Defeated. Great experiences, but too difficult and confusing to book one.
Katheryn needs a way to discover and schedule virtual events, because her company's new hybrid work model means she has to entertain clients, keep morale strong and grow team bonds in a new, inclusive way.
Three questions turned the research into design direction.
- Information overload
- Repetition
- Excessive scrolling
- See prices of events and add-ons without signing up
- Simplify and improve clarity for the inquiry process
- Include the FAQ in the footer
- Give her a single page for booking
- Display it clearly in a separate, easy-to-navigate page
Develop
We started on paper, tested mid-fi and hi-fi prototypes, and refined from there.
Rounded corners and a softer palette on a white background, which is more on-trend and in line with competitors' sites.
Gruppo for rounded, lighter headlines and Inter for body copy, which feels cleaner and reads well at many sizes. Both are sans serif and feel more contemporary than their italic serif.
Their site is over 7 years old and used a dark grey background that feels dense. We kept two of their main palette colors to hold onto their quirky aesthetic, and added a bright blue and a new grey for text.
