Swensen's is an SF local ice cream shop that's been around since 1948. It holds a special place in my heart because they make the best fresh banana ice cream. Swensen's had a website that included broken links, outdated information and design. It was difficult for customers to keep up with the ice cream shop, especially during the COVID-19 pandemic. The stakeholders were unavailable to reach to publish this project, so hypothetically speaking this is what I would do. Keeping its original logo, Swensen's site will need to be accessible, responsive and organized so its customers can view its menu/products, learn about its history and be able to connect with it via social media.
Redesign the existing site to a responsive web experience, and the brand to update its appearance within brand constraints.
When initiating research, I began with problem statements. It's easy to get detailed in the early stages of designing a user experience and get distracted. So these problem statements help me prioritize the user and organize future tasks around them. Thus further research is helpful to turn theories into facts. To do this I completed a competitive analysis to understand what the market consists of, what this product is going up against, and how it can differentiate itself from its competition. Next, secondary research helped to find evidence to confirm this group bill splitting anxiety and more intel on an academic level to understand the possible user. From the research found, a theory persona was created and in mind when developing the questionnaire for user interviews and surveys and the criteria to select participants. Read on to get in on the details.
For this case, the problem statements came from the power of observation. Going out with a group of friends, asking some questions in between, and observing the environment helped come up with these.
Completing a competitive analysis helped review the market for services and apps that have similar ideas or features that are used for group bill-splitting. I looked for products or features that were both known and unknown and narrowed them down by having a way to split a bill with a group of people. View the feature matrix below to see how the direct and indirect competition stack up, plus potential opportunities where Splyt can compete and be better than its competition.
“ . . . a part of it could be the mental cost of figuring out one’s share of the bill and calculating the portion of the tax and tip that apply to that share. Another part would be the social cost of appearing stingy or unfriendly. ”
According to a 2004 academic study called “The Inefficiency of Splitting the Bill” the authors concluded that “a part of it could be the mental cost of figuring out one’s share of the bill, and calculating the portion of the tax and tip that apply to that share. Another part would be the social cost of appearing stingy or unfriendly.” So unless you’re willing to do the math and run the risk of appearing stingy, it’s much easier to have everyone pay the same thing even if you only ordered a salad while your friend over there ordered a starter and a bottle of wine for the “table”. With this in mind, I realized that there absolutely had to be a way to quickly split things while being fair. Not only that but also pitch in for tax and tip.
While conducting 2 user interviews and analyzing 12 surveys here were the key takeaways:
Although bill splitting headaches can happen to anyone, I identified that this happens more frequently to 20-somethings. Those that may be in college that never split evenly and have a person take the check and tell you what they owe, or on the contrary, others that are making money that maybe want to show off, or don’t want to seem cheap. Amongst them, the most common possible user of a group splitting app would be someone like Caroline.
Caroline lives in Los Angeles, CA, and move from Sacramento. She graduated from UCSB with a BA in Sociology. She works 9-5 and is typically very busy during the week. On weekends she loves to get together with friends to go out or she stays in and indulges in self-care activities. Caroline likes to keep up with her friends so she keeps her phone close in case they message her or check her social feed.
“Meeting up with friends and catching up over great food is one of my favorite things to do! ”
With an established persona, building user flows helped to further understand when or what situations would cause them to use a bill splitting app. Below are two possible paths that Caroline might do when using Splyt.
Caroline is out for brunch with her close friends and is comfortable with ordering more because they trust each other financially. Caroline takes the bill and wants to tell her friends how much money they need to send her.
Caroline is out eating dinner with friends and additional people show up that she doesn't know. The check arrives. She only wants to pay for what she ate and wonders how she can add people.
Being familiar with the few paths that Caroline could take, I moved on to drawing some inspiration and crafting the functionality of Splyt. I began sketching and iterating screen after screen until landing on the top screens to later transfer onto Figma. Not to forget developing a logo/personality that this app would carry throughout the user experience. Below are iterations of Splyt in different stages, inspiration, a UI kit, and more.
I love sketching. I find it easier to edit and iterate, especially in a big project. The image below is one of 7(or 10) pages with screens sketched. These sketches are the beginning stages of screens that hold functions like tipping, itemizing food with friends, adding friends, and generating amounts for splitting, to name a few. After completing the sketches, I went over the screens to simplify the functions and organize them in numerical order.
While reviewing sketched screen functions and features, I looked up some inspiration. This was to either: simplify app functionality, or optimize user paths. Below I have snippets from research I found online from what I drew inspiration.
After the mood board, it felt like second nature to bring the branding for Splyt to life. The vision for the Splyt logo was for it to be speedy, trustworthy, and clean. The letter S in Splyt symbolizes a lightning bolt for speed, the rounded edges of the letter S intends to align with trustworthiness, and the color palette is to help represent a clean/simple app.
With a lot more research and personality in mind, designing the lo-fi frames came quicker and the iteration process was seamless. I used Figma to design the lo-fi frames shown.
After designing wireframes I moved to create an app map and lo-fi prototype. This helped me discover the several paths the Splyt user can, will, and could take. Wireframing revealed the most important screens. Prototyping challenged me to iterate simpler paths. Building an app map reinforced the organization of key screens and functionalities, such as adding contacts, dividing food items with a group, and adding a tip. Below is an app map of what it would look like for Caroline when creating a new Splyt with friends.
Before moving on to mid-fi frames, crafting a UI kit came in clutch. It helped with keeping the design and icons consistent.
While incorporating more color and flair, the mid-fi frames design focus was more technical. In other words, the focus was more on making the prototype functional for it to test effectively. Here are the lo-fi screens in the mid-fi state.
Ensuring the app functionality was seamless and intuitive, it needed to get tested. Receiving feedback from the user is so valuable to help work out the kinks, especially before launch. Here I conducted a usability test and organized the results in an affinity map.
A total of 8 people participated in the usability testing for Splyt. Specifically, Millennials that dine out with friends and split the bill. The goal was to test the intuitiveness and navigation of bill splitting on the app. Doing so would help understand the pain points and successes, and help figure out how to shorten the amount of time in despair when in the how-do-we-pay-for-this dilemma. The goal was to shoot for a 100% completion rate and a minimum usability score of 70. The test consisted of a total of 4 missions and 4 questions. One usability test was conducted in person while seven were conducted remotely through Maze.
The app reached a 100% completion rate and had a usability score of 75. In this case, leaving some room for improvement. Analyzing the results in an Affinity Map directed me towards several hot spots in the app to either re-design or adjust, like adjusting the “New Splyt” screen because of the high misclick rate of 29.3%. Here's a peek at a few missions and questions used to test participants, along with the wins, opportunities, and next steps.
Knowing a couple of areas needed some fixing, I prioritized them based on what coincided most with the goal and had a greater impact. So I updated the "New Splyt" screen to have a clear direction chronologically, added a manual way to add friends to Splyt, updated the ability to edit items if not scanned correctly by photo, and included an option on the "Add Tip" screen to skip it if gratuity is included in the bill. View the changes applied in the Hi-Fi mockups and prototype below.
With Spotify being an existing product, it saved time to find some research and helped to begin analyzing the user and product details.
To start, I decided on a different approach this time. While researching different sides of the competition, I began sketching some wireframes at the same time. It helped to start envisioning the product and begin to find solutions in a short amount of time. While doing research and sketching, the following problem statements came to mind:
To validate the problem statements I needed to hear from the listeners themselves. I conducted 3 user interviews and surveyed 11 participants that listened to Spotify. The goal was to: study the user’s behavior (in: how they listen to music, what prompts them to want to share on social media, how they share it with their network, and the range of importance in knowing what their friends are listening to) to build a social feature for Spotify that can increase it’s 6-month customer retention rate from 72% to 80% * and decrease churn rate from 4.8% to 3.6%.**
* 72% is the average number of subscribers that remain 3 months after subscribing from 2018 Q3 to 2019 Q3, according to Measurable AI. While 80% is a hypothetical 6% increase if the social feature existed.
** 4.8% is Spotify’s worldwide subscriber churn rate that amounted in Q4 of 2019, defining the number of trialists that did not convert to subscribers according to Statista. While 3.6% is a hypothetical 1.2% decrease if the social feature existed.
When researching the competition there were a few music apps that stood out. However, they didn’t have features to qualify them as direct competitors. This turned out to be a bit more challenging than I thought. These apps needed to include features such as social interactions, live streaming, and user-to-user song recommendations. After comparing several music apps, I concluded the top 3 direct competitors were: Soundcloud, YouTube Music, and Apple Music. Surprisingly, the indirect competition was a faster find. I searched for the same features as with the direct competition but to qualify their primary model needed to be a different objective other than streaming music. These included: Vertigo Music, Instagram, and Twitch. The image shows the comparison amongst these competitors with the 3 key features, strengths, and weaknesses.
Jordan is a millennial working in Graphic Design, and in his spare time he’s a music artist. Passionate about music and is dreaming to hear his hit in the radio one day. Wants to get to know his audience and have them get to know him and his music. Gets frustrated he can’t share music live with his audience on the same app he uploads music to and get instant reactions.
“I love to create and share my work with the world through music. ”
Elizabeth is a high school sophomore who lives in San Jose with her family. She likes to make friends but only has a specific social circle. She loves to hang out with friends over the weekend, either at the mall or coffee shop.
“I love to spend time with my friends and share things with them.”
I learned that making lo-fi frames at the start can help keep things consistent and bring the product to life earlier. I built the lo-fi frames based on some rough sketches. Once I made the main screens I began an app map to help take me through possible segways that Jordan and/or Elizabeth may take with the new social feature.
With the simple Spotify color palette, it was an easier jump from lo-fi to hi-fi frames. But before getting there, I started a prototype for testing and put together a brief UI kit of the new icons and buttons added for the social feature.
Here are the main screens that included the social feature with icons in both: new and common screens.
Building the prototype was a very fun challenge because I wanted it to function just like Spotify. Built-in Figma, I was able to test the prototype and observe two participants in: how well the feature operates and if the design elements fit in intuitively within Spotify. Both participants agreed with the intuitiveness of the feature in how it functioned and its design on Spotify, which also let me know I was on track. View the lo-fi prototype by clicking the link below the image.
When planning out the usability test, the app map came in handy in helping map out possible missions and questions to add to the test. After the usability test, the results were organized in an affinity map.
In the usability testing, a total of 7 participants completed all missions and questions, allowing it to have a 100% completion rate. Most participants were remote and took the Maze test online except for 1, which I conducted in person. The app scored a 77 average usability score, inciting that changes were needed to achieve a higher score. The affinity map helped categorize missions and questions for analysis. Here is a peek at a couple of missions and questions used to test participants, along with the wins, opportunities and next steps.
Finishing up the fixes after testing helped shape the hi-fi frames and hi-fi prototype. Plus, the latest iteration of the hi-fi prototype functions very much like the Spotify app.
To get a deeper understanding of Swensen's customer, I went to the ice cream shop to observe. It's not a typical year for Swensen's, as it's usually filled with tourists that on- and off-board the trolley nearby. It was a ghost-town, and it was especially sad knowing it wasn't open at all, not even for delivery. I took some pictures of the shop and went home. I began with a Research Plan set to conduct a competitive analysis, user interviews, and surveys. It was a strange time at the beginning of COVID, so nearly anyone was available. However, using this approach was a more appropriate direction for this project.
Conducting a feature-competitive matrix was a great start in my research. It gave me a better understanding of where the ice cream shop sat in the market, what it can do to stay competitive, and how it can leap ahead of its competitors. Swensen’s current site hadn't been updated since 1999, therefore lacking some “easy wins” on the matrix . After analyzing, I understood that building a responsive site set to include: location details, social media details, testimonials, food photos, and a filter/sort menu would spear Swensen's in the right direction.
To legitimize my research, I held user interviews and sent out some surveys. Fortunately, I was able to conduct 3 user interviews and have 16 participants survey their answers. The age group ranged from 15-52; all of who loved ice cream. Here were some key takeaways:
To know the user, we need to be the user. In the section to follow, I put together personas and user flows. Based on what I uncovered from the competitive analysis, user interviews, and surveys, I created a realistic representation of 2 key audiences. Get to know more about them below.
Paul is a 57-year-old, retired grandpa that’s lived in San Francisco since he was 20. He enjoys getting together with friends and playing tennis. During the week he likes to help his children by picking up the kids from school. Paul looks forward to this time of day because he gets to spend time with the grandkids. Since he’s a local, he takes his grandkids to visit the hidden gems of the city.
“Family matters most to me, and creating memories with them is the cherry on top! ”
Jessica is a 25-year-old administrative assistant for a local company, who recently moved from NYC to Oakland to check out West Coast hype. She spends a lot of time on social media and connects with friends online. On weekends she likes to play local and find places to eat and take pictures. She likes to get to know the places she visits so she can tell a cool story on her blog for her followers.
“I love to explore new places and share my thoughts on social media”
After researching Paul and Jessica, I began to map out how they would find and navigate Swensen’s website by putting together some user flows. I found that Paul is likely to plan his trip in advance so he'll most likely be doing the planning on a laptop and will likely come across Swensen's site through a Google search. On the other hand, Jessica is more on the go and is likely to use apps on her phone before entering a web search. So she starts on the Yelp app to view reviews and ratings and then migrates to Swensen’s website to learn more. Learn more about their possible thought process and decision-making in their user flows.
After completing research and understanding Swensen's personas, I continued to research more direct and indirect competition outside of San Francisco to inspire a more visually appealing design. I put together a mood board with icons, color palettes, and UI to help with designing the site. I sketched 4 wireframes and continued to iterate. Then transferred the sketches into wireframes on Figma. Because survey participants revealed that the top 4 areas they look for while browsing an ice cream site are: location, store hours, menu, food photos, and reviews, I kept it a goal to keep designing a clean and straightforward site experience. Check out the images below to see my work come to life.
To continue forward, I need to gather some data to reassure that I'm headed in the right direction and help make some design improvements earlier in the process. With that, I conducted a card sorting study and a usability test. Learn more below.
Conducting a card sorting study helped when I ran into a wall trying to figure out the best way to sort flavors without overthinking it. I decided to use Optimal Workshop to help organize the card sorting study. I went with an open card sort to find out how people naturally group ice cream flavors. I rounded up 10 people of all ages to participate in sorting 30 flavors. I used the similarity matrix and standardization grid to help organize and analyze the results. The similarity matrix helped identify which flavors were the most and least common sorted amongst groups and gave some insight on what flavors to place under the "Popular" sorting option. While the standardization grid helped clarify and narrow down what categories the ice cream flavors would go under. As a result, I found that the most common groups sorted together were: fruit, chocolate, and sherbet, which I used as the filter labels. While for sorting I went with the categories of Popular, A-Z, and Z-A.
With the help of the usability test plan, I decided how I was going to conduct the testing. One in-person, two remotely, and 12 virtually through Maze. The participants were of all ages ranging from 15-52, some local and some in other countries. Because Swensen’s is known internationally I thought it was a plus if people from different countries tested the design. The goal was to test the navigation of the site to discover any pain points/successes to increase the Swensen’s visitor rate. The test completion rate goal was 100% with a usability score of a minimum of 80%.
As a result, there was a 100% completion rate and a usability score of 83%, which succeeded the goal. Two of the biggest callouts were the ability to click the images versus the arrows on the testimonials section and the placement of Swensen’s physical address. Based on the participants answers, the best placement for the physical address was to add it to the footer. As far as the sorting/filtering feature on the Flavors page, 75% of the participants rated it 4 out of 4 stars with one of then saying: “makes it easy to search for my favorite flavor, or if I’m feeling like... I want to explore more options.”
Taking the usability results and feedback into account, I iterated another version that fixed the concerns. The second hi-fi version includes Swensen’s physical address in the footer. While the testimonials element interaction is prototype-related, it was a quick technical fix in making the images clickable.
Since Swensen's website is a complete redesign, I have displayed the before and after shots of the four main pages to emphasize the transformation. Once the priority changes were done on the desktop frame, I incorporated them into the tablet and mobile frame.
Need help with a project, have a question, or want to chat over some coffee? Get in touch using the form below.
