Omomo
research • design • prototype
Omomo
research • design • prototype
Omomo
Omomo
speculative project - website redesign • may 2023
speculative project - website redesign
may 2023
high quality products need a high quality website
high quality products need a high quality website
Omomo is a Southern California–based boba tea shop with five locations (as of January 2026), known for its commitment to high-quality teas and thoughtfully sourced ingredients. All drinks are crafted in-house, made from scratch, and brewed fresh daily. Using only fresh fruit, Omomo also offers rotating seasonal blended drinks, creating a menu that feels both carefully curated and consistently fresh.
Omomo is a Southern California–based boba tea shop with five locations (as of January 2026), known for its commitment to high-quality teas and thoughtfully sourced ingredients. All drinks are crafted in-house, made from scratch, and brewed fresh daily. Using only fresh fruit, Omomo also offers rotating seasonal blended drinks, creating a menu that feels both carefully curated and consistently fresh.
opportunity areas for Omomo's website
opportunity areas for Omomo's website
While Omomo’s branding is thoughtfully executed and visually strong, their website presented opportunities for improvement in usability and responsiveness. Users experienced inconsistencies across screen sizes, and several pages contained long flowing content that made efficient viewing difficult. These issues impacted how easily customers could navigate the site and find information. Streamlining page layouts and improving responsive behavior would better align the digital experience with Omomo’s high-quality brand and create a smoother, more intuitive experience for users across all devices.
While Omomo’s branding is thoughtfully executed and visually strong, their website presented opportunities for improvement in usability and responsiveness. Users experienced inconsistencies across screen sizes, and several pages contained long flowing content that made efficient viewing difficult. These issues impacted how easily customers could navigate the site and find information. Streamlining page layouts and improving responsive behavior would better align the digital experience with Omomo’s high-quality brand and create a smoother, more intuitive experience for users across all devices.
research goals
research goals
We wanted to design and build a new responsive website for Omomo that leverages the company’s existing brand identity while improving responsiveness and usability across devices. By gaining a deeper understanding of customers' needs and behaviors, we aim to create a more effective digital experience that supports and drives visits. Our focus will be on streamlining key pages, including the homepage and menu, to make information easier to scan through and access. We will also evaluate the broader site experience to identify additional opportunities for refinement.
We wanted to design and build a new responsive website for Omomo that leverages the company’s existing brand identity while improving responsiveness and usability across devices. By gaining a deeper understanding of customers' needs and behaviors, we aim to create a more effective digital experience that supports and drives visits. Our focus will be on streamlining key pages, including the homepage and menu, to make information easier to scan through and access. We will also evaluate the broader site experience to identify additional opportunities for refinement.
Image above: Snippet of the interview guide used for user interviews
high-level insights
high-level insights
General Observations:
• All participants feel Omomo’s current site is aesthetically pleasing and love their Instagram feed
• All participants felt Omomo’s homepage was lengthy, and required significant scrolling
• All participants appreciated having visuals for each menu item
• All participants valued having a loyalty rewards system
• 4/5 participants order boba drinks at least once a week
• 4/5 participants order in person rather than using online ordering
• 4/5 participants typically try new tea shops through word-of-mouth
Participant Goals:
• Find tea shops with high quality tea flavor and ingredients
• Simple and efficient way to view menu online
• Obtain and build loyalty rewards from visiting tea shops
Pain Points:
• All participants noted Omomo’s homepage requires excessive scrolling
• 2/5 participants prefer online/app ordering and wished this was an option everywhere
• 2/5 participants would like to see full ingredient information in the menu
• 2/5 participants noted that Omomo's expanded menu on the website has responsive issues
Research conclusion:
Overall, the research provided valuable insights and clearly identified key pain points, validating our initial problem statements. The findings showed that users primarily want a website that makes essential information (i.e., updated menu, locations, and contact details) easy to find. In addition, many participants expressed interest in learning more about the shop’s background and story, highlighting an opportunity to improve brand storytelling.
General Observations:
• All participants feel Omomo’s current site is aesthetically pleasing and love their Instagram feed
• All participants felt Omomo’s homepage was lengthy, and required significant scrolling
• All participants appreciated having visuals for each menu item
• All participants valued having a loyalty rewards system
• 4/5 participants order boba drinks at least once a week
• 4/5 participants order in person rather than using online ordering
• 4/5 participants typically try new tea shops through word-of-mouth
Participant Goals:
• Find tea shops with high quality tea flavor and ingredients
• Simple and efficient way to view menu online
• Obtain and build loyalty rewards from visiting tea shops
Pain Points:
• All participants noted Omomo’s homepage requires excessive scrolling
• 2/5 participants prefer online/app ordering and wished this was an option everywhere
• 2/5 participants would like to see full ingredient information in the menu
• 2/5 participants noted that Omomo's expanded menu on the website has responsive issues
Research conclusion:
Overall, the research provided valuable insights and clearly identified key pain points, validating our initial problem statements. The findings showed that users primarily want a website that makes essential information (i.e., updated menu, locations, and contact details) easy to find. In addition, many participants expressed interest in learning more about the shop’s background and story, highlighting an opportunity to improve brand storytelling.
Image above: Omomo's site components showcasing their design system and branding
wireframe designs
wireframe designs
We began with low-fidelity wireframes to define the layout and structure of Omomo’s website across task flows. To ensure a responsive experience, we created wireframes for both desktop and mobile, designing five core screens for each. This approach allowed us to focus on information hierarchy and layout as an initial step.
Using the same low-fidelity flows, we created our high-fidelity wireframes and included Omomo's branding elements to keep consistency with the visual design of the existing website.
The wireframes include the homepage, menu, locations, contact, and about pages. These pages were prioritized because they represent the most critical touchpoints for users and offered the highest opportunity for streamlining content and improving readability. By organizing these sections more effectively, we aimed to create a clearer, more efficient browsing experience across devices.
We began with low-fidelity wireframes to define the layout and structure of Omomo’s website across task flows. To ensure a responsive experience, we created wireframes for both desktop and mobile, designing five core screens for each. This approach allowed us to focus on information hierarchy and layout as an initial step.
Using the same low-fidelity flows, we created our high-fidelity wireframes and included Omomo's branding elements to keep consistency with the visual design of the existing website.
The wireframes include the homepage, menu, locations, contact, and about pages. These pages were prioritized because they represent the most critical touchpoints for users and offered the highest opportunity for streamlining content and improving readability. By organizing these sections more effectively, we aimed to create a clearer, more efficient browsing experience across devices.
Image above: High fidelity desktop wireframes for redesigned pages
Omomo's branding guidelines
We followed Omomo’s existing brand guidelines and visual interface for this website redesign, making layout adjustments solely to improve viewing efficiency. All UI components, including buttons, color schemes, and visual elements, were maintained to preserve the brand’s familiar look and feel. On the homepage, we implemented a more streamlined way of displaying content while staying consistent with Omomo’s current visual design. For new or updated page designs such as the About page, we ensured that all content and design elements aligned seamlessly with the rest of the website.
Image below: High fidelity mobile wireframes for redesigned pages
prototype testing with users
Using our high-fidelity wireframes, we built an interactive prototype within Figma that connected each major screen into a cohesive experience. We chose to prioritize the mobile prototype, recognizing that most users are likely to access Omomo’s website on their phones. The prototype focused on essential interactions, designed specifically to support user testing and validate the clarity and usability of the core task flows.
We conducted unmoderated usability tests through Maze. We had 13 participants and 3 tasks to get through per test.
our results speak for themselves
100%
task completion rate across all participants
4.6/5 rating
on ease of tasks
Omomo's branding guidelines
We followed Omomo’s existing brand guidelines and visual interface for this website redesign, making layout adjustments solely to improve viewing efficiency. All UI components, including buttons, color schemes, and visual elements, were maintained to preserve the brand’s familiar look and feel. On the homepage, we implemented a more streamlined way of displaying content while staying consistent with Omomo’s current visual design. For new or updated page designs such as the About page, we ensured that all content and design elements aligned seamlessly with the rest of the website.
Image below: High fidelity mobile wireframes for redesigned pages
prototype testing with users
Using our high-fidelity wireframes, we built an interactive prototype within Figma that connected each major screen into a cohesive experience. We chose to prioritize the mobile prototype, recognizing that most users are likely to access Omomo’s website on their phones. The prototype focused on essential interactions, designed specifically to support user testing and validate the clarity and usability of the core task flows.
We conducted unmoderated usability tests through Maze. We had 13 participants and 3 tasks to get through per test.
Image below: High fidelity mobile wireframes for redesigned pages
prototype testing with users
Using our high-fidelity wireframes, we built an interactive prototype within Figma that connected each major screen into a cohesive experience. We chose to prioritize the mobile prototype, recognizing that most users are likely to access Omomo’s website on their phones. The prototype focused on essential interactions, designed specifically to support user testing and validate the clarity and usability of the core task flows.
We conducted unmoderated usability tests through Maze. We had 13 participants and 3 tasks to get through per test.
Omomo's branding guidelines
We followed Omomo’s existing brand guidelines and visual interface for this website redesign, making layout adjustments solely to improve viewing efficiency. All UI components, including buttons, color schemes, and visual elements, were maintained to preserve the brand’s familiar look and feel. On the homepage, we implemented a more streamlined way of displaying content while staying consistent with Omomo’s current visual design. For new or updated page designs such as the About page, we ensured that all content and design elements aligned seamlessly with the rest of the website.
our results speak for themselves
100%
task completion rate across all participants
4.6/5 rating
on ease of tasks
our results speak for themselves
100%
task completion rate across all participants
4.6/5 rating
on ease of tasks
project takeaways
project takeaways
Redesigning Omomo’s website provided valuable insight into how users prioritize menu exploration and the reason they would visit a company's website. While many boba shops rely less on web traffic unless they offer online ordering, our research informed us that Omomo’s popularity is driven by word of mouth. Even so, a responsive website remains essential for first time visitors who want to learn more before visiting in person. To support this, we streamlined Omomo's site layout and content to create a clearer, more intuitive browsing experience.
Research also revealed that users value loyalty programs, especially when signing up is quick and minimal effort. To acknowledge this desire, we incorporated a simple rewards sign-up both on the homepage and in the footer to encourage engagement from frequent visitors. One of the primary challenges involved optimizing the experience for mobile. Omomo’s menu is extensive and highly visual, with photos for each drink. This was an element users appreciate but one that requires careful organization to avoid excessive scrolling. We addressed this by thoughtfully restructuring content to balance visual appeal with efficiency.
Redesigning Omomo’s website provided valuable insight into how users prioritize menu exploration and the reason they would visit a company's website. While many boba shops rely less on web traffic unless they offer online ordering, our research informed us that Omomo’s popularity is driven by word of mouth. Even so, a responsive website remains essential for first time visitors who want to learn more before visiting in person. To support this, we streamlined Omomo's site layout and content to create a clearer, more intuitive browsing experience.
Research also revealed that users value loyalty programs, especially when signing up is quick and minimal effort. To acknowledge this desire, we incorporated a simple rewards sign-up both on the homepage and in the footer to encourage engagement from frequent visitors. One of the primary challenges involved optimizing the experience for mobile. Omomo’s menu is extensive and highly visual, with photos for each drink. This was an element users appreciate but one that requires careful organization to avoid excessive scrolling. We addressed this by thoughtfully restructuring content to balance visual appeal with efficiency.
wow that was a lot. treat yourself to a well-earned break
wow that was a lot. treat yourself to a well-earned break
wow that was a lot. treat yourself to a well-earned break
your next read
other featured works that helped streamline human experiences
your next read
other featured works that helped streamline human experiences
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g d="M 0 48 L 0 0 L 48 0 L 48 48 Z M 44.457 0 L 3.543 0 C 2.604 0 1.702 0.373 1.038 1.038 C 0.373 1.702 0 2.604 0 3.543 L 0 44.457 C 0 45.396 0.373 46.298 1.038 46.962 C 1.702 47.627 2.604 48 3.543 48 L 44.457 48 C 45.396 48 46.298 47.627 46.962 46.962 C 47.627 46.298 48 45.396 48 44.457 L 48 3.543 C 48 2.604 47.627 1.702 46.962 1.038 C 46.298 0.373 45.396 0 44.457 0 Z M 14.307 40.89 L 7.09 40.89 L 7.09 17.967 L 14.307 17.967 Z M 10.693 14.79 C 9.875 14.785 9.076 14.538 8.397 14.08 C 7.719 13.622 7.192 12.973 6.882 12.215 C 6.572 11.458 6.493 10.625 6.656 9.823 C 6.819 9.021 7.216 8.285 7.796 7.708 C 8.377 7.131 9.116 6.739 9.919 6.581 C 10.722 6.423 11.554 6.507 12.31 6.822 C 13.066 7.137 13.711 7.668 14.165 8.35 C 14.619 9.031 14.861 9.831 14.86 10.65 C 14.868 11.198 14.765 11.742 14.558 12.25 C 14.351 12.757 14.044 13.218 13.655 13.604 C 13.266 13.99 12.804 14.295 12.295 14.498 C 11.786 14.702 11.241 14.801 10.693 14.79 Z M 40.907 40.91 L 33.693 40.91 L 33.693 28.387 C 33.693 24.693 32.123 23.553 30.097 23.553 C 27.957 23.553 25.857 25.167 25.857 28.48 L 25.857 40.91 L 18.64 40.91 L 18.64 17.983 L 25.58 17.983 L 25.58 21.16 L 25.673 21.16 C 26.37 19.75 28.81 17.34 32.533 17.34 C 36.56 17.34 40.91 19.73 40.91 26.73 Z" fill="transparent" height="48px" id="ilt9CGKUz" width="48px"><path d="M 0 48 L 0 0 L 48 0 L 48 48 Z" fill="transparent" height="48px" id="VddHuACK0" width="48px"/><path d="M 44.457 0 L 3.543 0 C 2.604 0 1.702 0.373 1.038 1.038 C 0.373 1.702 0 2.604 0 3.543 L 0 44.457 C 0 45.396 0.373 46.298 1.038 46.962 C 1.702 47.627 2.604 48 3.543 48 L 44.457 48 C 45.396 48 46.298 47.627 46.962 46.962 C 47.627 46.298 48 45.396 48 44.457 L 48 3.543 C 48 2.604 47.627 1.702 46.962 1.038 C 46.298 0.373 45.396 0 44.457 0 Z M 14.307 40.89 L 7.09 40.89 L 7.09 17.967 L 14.307 17.967 Z M 10.693 14.79 C 9.875 14.785 9.076 14.538 8.397 14.08 C 7.719 13.622 7.192 12.973 6.882 12.215 C 6.572 11.458 6.493 10.625 6.656 9.823 C 6.819 9.021 7.216 8.285 7.796 7.708 C 8.377 7.131 9.116 6.739 9.919 6.581 C 10.722 6.423 11.554 6.507 12.31 6.822 C 13.066 7.137 13.711 7.668 14.165 8.35 C 14.619 9.031 14.861 9.831 14.86 10.65 C 14.868 11.198 14.765 11.742 14.558 12.25 C 14.351 12.757 14.044 13.218 13.655 13.604 C 13.266 13.99 12.804 14.295 12.295 14.498 C 11.786 14.702 11.241 14.801 10.693 14.79 Z M 40.907 40.91 L 33.693 40.91 L 33.693 28.387 C 33.693 24.693 32.123 23.553 30.097 23.553 C 27.957 23.553 25.857 25.167 25.857 28.48 L 25.857 40.91 L 18.64 40.91 L 18.64 17.983 L 25.58 17.983 L 25.58 21.16 L 25.673 21.16 C 26.37 19.75 28.81 17.34 32.533 17.34 C 36.56 17.34 40.91 19.73 40.91 26.73 Z" fill="rgb(189, 189, 189)" height="48px" id="Gx7QM3RDk" width="48px"/></g></svg>)