Case: UniCafe homepage UI/UX renewal
Project type: Personal project
Date: 2023
Project scope: UX research, UI/UX, lightweight UX writing and creative direction
UniCafe stands as Ylva's premier chain of cafeterias dedicated to serving the discerning community of university students and staff. Committed to delivering a harmonious blend of affordability and nutritional excellence, UniCafe spans 18 locations across the University of Helsinki's campuses. Beyond providing daily sustenance, UniCafe extends its reach through sought-after catering services, particularly popular among university dignitaries.
With a digital presence predating the smartphone era, UniCafe has consistently hosted its dynamic menu online for over a decade. Evolving through multiple iterations, the latest version boasts both a browser-based mobile app and a prominently featured menu feed on their homepage. Recognizing the evolving landscape of user behavior and the prevalent use of mobile apps among students, a comprehensive redesign of the homepage became imperative.
I undertook the initiative as a personal project, strategically aligning it with UniCafe's broader efforts to enhance the visibility of their services online.
Project objectives
By re-examining target audiences and delineating user flows on the site, my aim was to enhance usability by reorganizing content, thereby establishing clear conversion points. This strategic approach not only aimed to improve the user experience but also sought to streamline analytics for enhanced clarity and comprehension.
Above: A few screens from the current version of the site.
Analysis of the original design
The existing website primarily features menus, UniCafe's mission and vision, details on catering services, and contact information. A key observation was the placement of the menu below the fold on the front page, a decision made during UniCafe's rebranding and subsequent website renewal in 2019. Despite the importance of the menu, user feedback in 2019 highlighted challenges with the card-based layout, particularly on desktops, where users struggled to uncover relevant information.
To address this, a browser-based app was introduced, directing users away from the homepage. Consequently, the homepage failed to provide users with essential information, with critical details often hidden in text links or buried within subpages.
Initially, the website's target audiences were delineated by analyzing profiles of restaurant visitors, as ascertained through staff feedback and sales data. Distinct user groups were identified, characterized by varying discounts, rendering them identifiable albeit anonymously.
Original target audiences:
University of Helsinki, other universities, & UAS students (lunch and campaigns)
Staff at the university of Helsinki (lunch and catering services)
Existing and potential partners & media (business information, services, news)
Other lunchtime customers such as nearby office workers, construction workers, conference visitors...
However, an issue arises as these user groups closely align with the target audience of the webapp, giving rise to two challenges:
Competition between platforms: UniCafe offers two services featuring comparable content directed at identical user groups. This complexity hampers campaign preparation, as identical information is expected on both platforms. Additionally, the allocation of marketing funds becomes intricate, as both platforms essentially vie for the same budget and user base. Foretelling user behavior through analytics becomes intricate, as users may interact differently with each platform based on their respective structures and available information.
Content clutter: Managing and maintaining content becomes challenging due to a diverse user base with disparate needs. This challenge is particularly evident on the homepage, where information is dispersed and, in some cases, doesn't seamlessly integrate into the navigation. Moreover, analytics indicate that a significant portion of users only explores the front page, primarily driven by the menu feed, making the establishment of effective conversion points a formidable task.
User testing and pain points
Conducting a user test and analyzing feedback revealed numerous pain points and instances of task abandonment. For example, users attempting to view the menu would inadvertently navigate to subpages due to a misleading header. Additionally, sending feedback proved cumbersome, with users either overlooking text links or becoming frustrated with the extended lists of contact information.
Redesign approach
In response to these findings, I re-examined the target audience, and based my redesign on the redefined user groups. I focused on the mobile site, given its higher user engagement.
Drawing insights from UniCafe's customer satisfaction surveys and analytics of both the website and web application, I redefined the target audience with a strategic emphasis on users whose needs extended beyond the capabilities of the web application alone. For instance, while students and staff could access menus on the web application, it failed to cater to individuals seeking information on UniCafe's catering services or ongoing campaigns.
This realignment involved categorizing users based on their engagement with our services rather than solely their association with the university or interest in food.
The refined audience segments are as follows:
Catering service customers: This category encompasses university staff and broadens the original audience to include potential customers within UniCafe's service area.
Existing and potential partners & media: The homepage serves as a pivotal platform for disseminating corporate information, providing contact details of business and marketing representatives, and hosting links to public media banks. I retained this group without alterations, as the homepage remains the sole viable platform for such comprehensive content.
Customers seeking campaign information: This user group, likely UniCafe patrons, social media followers, or those within the target audience of a marketing campaign, finds the homepage conducive for accessing details on competitions, rules, privacy policies, and other pertinent campaign-related information. If a campaign involves visiting a restaurant for lunch, directing users to the web application after viewing campaign details facilitates more straightforward measurement of conversions.
This refined categorization facilitated a clearer identification of superfluous information causing clutter and complicating site navigation:
Acknowledging the redundancy of menus on the homepage, I completely removed them, freeing up space for other critical information.
Shifting the focus away from menus enabled a more effective promotion of catering services.
Navigation clarity improved, as users seeking restaurant menus were promptly directed to the web application, reducing confusion around items in the navigation.
Results
Following the implementation of these changes, subsequent user testing demonstrated a significantly improved user experience. The previous points of abandonment were successfully addressed, streamlining tasks and enhancing overall user satisfaction.
