Savvo
My team used design-thinking to create a custom touchscreen interface for a national winery and restaurant chain
CLIENT
Savvo Digital Sommelier

ROLE
UX Designer, Content Strategist

TIMELINE
3.5 Weeks

TOOLS
Adobe CC
Adobe Capture
Axure RP
Sketch
Marvel
Keynote
01
CHALLENGE
Savvo is an existing digital kiosk in grocery stores that connects shoppers and brands at the point-of-purchase by making wine and food pairing easy. They've partnered with a nationwide winery and restaurant chain, Cooper's Hawk, to bring the Savvo experience to their tasting room.

My team used design-thinking to visualize the features, functionality, and interface for this new Savvo iteration.
02
APPROACH
After a Heuristic Analysis on the existing interface and extensive ethnographic research, we narrowed our focus on solving a big issue for the restaurant chain, preserving a personal experience.

Cooper's Hawk is successful at creating an experiential journey in their tasting rooms. Their success is reflected in their high number of Wine Club Members who continue to frequent Cooper's Hawk. Their tasting rooms are often too busy on weekends for Attendants to properly attend to all of the guests.

We asked ourselves:

How might Savvo create a digital interface that helps to alleviate strain on the staff while complimenting and adding value to the journey?
Cooper's Hawk is busy. This means their thriving, but attendants can't deliver personal attention to every patron.
"I love working here. Sometimes the place gets packed though and we can't attend to everyone in the tasting room at once. It gets up to 5 deep on a Saturday night!"
- Cooper's Hawk employee commenting on her frustrations
03
RESULT
We focused on creating an interface that acts as a supplementary Tasting Room Attendant. 

• From the business perspective, the interface needs to push retail merchandise, inform the customer about Cooper's Hawk wines, and encourage Wine Club Membership.

• From the consumers perspective we pinpointed the need for lighthearted content and top-level education about wine, food, and Cooper's Hawk merchandise.

Merging these two opposing initiatives resulted in a well-balanced platform that is both fun and informative.
WELCOME TO THE FAMILY
The bread and butter of Cooper's Hawk is their Wine Club Membership. 70% of their patrons are wine club members. Preserving the value of community is pivotal to their brand and retention.

We designed into that; celebrating a message from the CEO and a welcoming narrative about the company.
APPROPRIATELY EDUCATIONAL
There was one parallel between users of the existing Savvo interface to this new iteration: 

User's don't care to know much about wine. They want to know enough to sound informed and are comfortable drawing the line there.

Our platform provides the user only the basics-

•Pronunciation

•Level of sweetness

•Cooper's Hawk menu pairing suggestions
ENCOURAGES EXPLORATION
From ethnographic research we learned that this interface needs to occupy time. Patrons are waiting for a table on a busy night, waiting for a tasting, or exploring which wine to purchase without the help of an attendant.

We've captured this notion by:

• Encouraging a browse through merchandise

• Tips on tasting wine

• Quick access navigation so the user can explore
SPARKS CURIOUSITY
After observing the flow of the Tasting Room on a busy Saturday evening, it was clear that this is a very social space. To enhance the idea of community, and to support group experiences we created some lighthearted just-for-fun functionality for groups:  

• Quizzes
What types of wine does the user like to drink?

• Multi-player games
Users can test their wine knowledge

During User Testing, this was the first place on the application users navigated to, validating the need and desire.
FINAL MARVEL PROTOTYPE
MARVEL PROTOTYPE
Laine here! 
I did the unthinkable and put the cart before the horse by telling you the ending first (ballsy, I know). 

They say beauty is in the details, if you're interested in reading more about my team's in-depth design process, click the button below.
COMING SOON
Final Landing Page Wireframe
MODELING THE BUSINESS
Before approaching our kickoff meeting we did some domain research. What already exists in this space? How easy is it for students and their parents to access different funding options?

We noted that services already exist in this landscape among larger financial institutions and companies.
Competitive analysis matrix depicting services that educate and have one application
Curious about differentiation in our kickoff meeting with the client we learned that Arriyo’s focus was on creating life-long relationships with small banks and transparency for the parent/student. The client felt strongly about exploring data visualization to convey transparency to the user as well.

Post-meeting we took to the whiteboard and wrote down initial questions and assumptions on post-its. Among those:
We researched small banks capabilities to offer student loans. Arriyo is based in Chicago. We called 30 of the 120 community banks in Chicago and asked “Do you offer private student loans?”. Of those 30, 100% of them said no. Turns out, student loans are tricky.
From here it started to feel like we were going to have to make some major pivots to the business model pretty early on in the process.
Pivot Point: Arriyo would work through the kinks of being in the nascent stages of building a business, and we would focus on building a platform that streamlined the process regardless of the type of loans presented (e.g. private student loans, home equity loans, etc)
With an unstable business model and existing market saturation it was hard not to be frustrated at such an early stage, we decided as a team to focus on not jumping to conclusions, and worked on getting to know our user. Perhaps we’d uncover problems with the current systems that Arriyo could tackle.
DEFINING THE USER
Through rigorous student, parent, and SME interviews and surveys we boiled down our insights:
Selection from our affinity mapping exercise. Here we've grouped pain points together in one category to see patterns in user behavior.
Alarmingly, none of our interviewees were particularly well educated on the student loan process. We created two personas that reflected our findings.
Starting to formulate personas by acknowledging patterns from affinity diagraming. On the left, the Uninformed Student and their behaviors. Center, Informed Student. Right, edge case, Former Student.
First, Johan, an uninformed student who’s focus is attending the school of his dreams without considering the cost implications. He’s likely to take out whatever loan is offered to him no matter the rate.

Second, Sally, an incoming first generation college student who wants to understand the loan process and her choices, but still finds the process confusing. She’s likely to consider interest rate only, without looking at other loan terms before making a decision.
Personas
FINDING SOLUTIONS
Applying for private student loans is complicated and confusing. How can Arriyo simplify and personalize the application and decision making process so that users can confidently make an educated choice about their funding options?
Synthesizing our research and funneling it down to key pain points it was easier to keep our designs focused. We created guiding design principles to check ourselves against as we started to dive into solutions.
Tailored swift
simplified, personalized, intuitive, fast
Know what you're getting into
gives insights about what it REALLY means to take out a loan
Speaks to you like a human
makes complex terms simple and easy to understand
make visual data easy to grasp
Only show what you need when you need it
breaks down lengthy process into relevant bite-sized
pieces
PROVING THE CONCEPT
We our scope focused on 3 main parts of the site - the landing page, application page, and loan results page. We ended up having time to also include a loan calculator as well. 
We worked seperately but together through a few rounds of group sketching, brainstorming, and discussion to sort through our ideas.
My focus was on the landing page. I created a mid-fi wireframe for concept testing. At the time, I thought if users could get a solid grasp on the total outlook it would be closer to the actual product and I'd garner better feedback.

I quickly learned that there is a reason low-fi prototypes exist. They are quick, cheap, and users don’t get so attached to the UI elements that they can’t focus on the functionality. Noted.
This is some text inside of a div block.
While I have your attention, check out some of my other work:
Avoiding debt
A web platform for student loan applications
Baby you can drive my car
An Uber car-sharing app
Crafting mindfulness
A responsive website for a sustainable brand
I'd love to collaborate, talk shop, or shoot the breeze.
Powered by Stumptown coffee and this Spotify playlist