OVERVIEW

The project was part of a technical course at Uppsala University within the HCI master's program. Its goal was to hone our programming skills and get practical foray into the complexities of building real-world applications – with a business value. Besides, we had to have fun with the project.

In a group of 5, our responsibilities rotated. My main roles included UX designer, front-end developer, and a week as project leader. The project lasted for 6 weeks.

TASK – DESIGN AND DEVELOP AN MVC APPLICATION

To renew the management ecosystem of a local, cozy bar (Silent Shipwreck). The bar wants to modernise itself without losing its warm and inviting atmosphere, as well as to improve the bar operations and customer experience.

ROLE & DURATION

UX designer and front-end developer

2024 Jan – March

wireframing, prototyping, MVC application, JavaScript, project management, interface design

Hey-hey, welcome. I'm Enikő Ágotai.

Experienced in product localization, now spiritedly practicing UX & interaction design.

From social robots to game and app design, I'm interested in everything. Currently doing MSc in human-computer interaction. Find my recent project right below.

Go

Silent Shipwreck

design and development of a pub management application for an imaginary bar

A tablet mockup displaying a digital menu for a bar management system, viewable by customers at a table. The interface is in English, with a sidebar for navigating menu categories like food, beer, wine, and cocktails. The main panel lists food and drink items with prices in krona, dietary tags, and brief descriptions. Featured items include 'Hoppy Heaven' IPA, 'Spicy Tuna Roll', 'Antipasto Platter', and 'Smooth Lager'. An order summary for Table 10 on the right shows selected items and a total amount due. There are options to cancel or place the order at the bottom.

---- discovery and planning ----

01 – Personas

As a class, we identified several personas for all types of people that can appear at the bar – staff included.

Using these, we set functional and non-functional requirements that the app had to meet.

What I did

These 3 are examples of possible customers. I used them to get the overall atmosphere of the pub and find a suitable design scheme. Shortly, to create the general vibe.

Here I collected some keywords that I kept in mind while planning and designing:

clean and sophisticated
traditionally modern
interactive and quick
straightforward and logical
comfy
attentive
lovable

Digital portrait of a middle-aged man named Felix Nilsson wearing glasses and a light stubble. The background is muted. He's a 44-year-old Swedish, married, and a football coach. He’s sociable, often with friends, team, and wife at the bar, enjoys pool and dancing. He drinks moderately and seeks spontaneous breaks from routine. His personality is described with the words committed, devoted, friendly, and community.

Illustration of an elderly man named Horst Olsson with a weathered face, messy white hair, and beard. He's portrayed in front of a grey backdrop. Descriptors list him as a 67-year-old Swedish male, thrice-divorced and retired. He frequents the bar alone, enjoys petting stray cats, and opts for cheap wine. Challenges include declining health, financial debts, and social isolation. His tags are eccentric, worn, solitary, and defiant.

Graphic of a young woman named Estefanía García with long, wavy brown hair and multiple necklaces. A city night scene forms the background. Key details include her being a 17-year-old Spanish female on holiday, active in hip-hop dance and enjoying nightlife. She’s described as preferring tequila, flirting with older guys, and using a fake ID. Her personality is tagged as rebellious, vibrant, impressionable, and social.

02 – User flows and roles

The bar needed a streamlined way for customers to order, staff to serve, and management to maintain a high level of service.

Accordingly, the app needed to meet the requirements of 4 types of users on different devices and screens. I identified the crucial steps and made user flows specifically for the 4 user roles in FigJam.

Tasks performed

reset and checkout tables, edit customer orders
process payments and handle transactions
update or modify product items
report emergency issues to security directly

A detailed sitemap for a pub management application, presenting a hierarchical structure that begins with a start application node leading to a main page. From the main page, it branches out to different user roles: staff, VIP, and customer, each with distinct login pages and home pages. The architecture further details subpages for table management, menu management, and account creation, emphasizing the specific functions and form fields available in each segment, including order processing, menu item editing, and new account registration.

03 – Information architecture

The team worked together on linking information and finding connecting page elements. The idea was to create reusable pages that can be tailored for the appropriate roles.

Waitstaff and bartender views are basically the same, having some features hidden for the waitstaff. Similarly, there is a quite noticeable overlap between VIP and customer pages.

What I did

Based on the user flows, I made this sitemap using Figma template to help us stay focused and organised. We labeled our pages accordingly.

I added the type of elements that should appear in specific pages, as well as notes on what the pages are for.

Takeaways

GET ON THE SAME PAGE – MEDIATE

Our project team was very diverse: some with strong coding, some with design backgrounds. Even though our dynamic was amazing, we often had troubles understanding what the other actually meant, so in many cases we misinterpreted each other's instructions. The reason for this was simply our different associations with terms.

I believe, as a designer, I have to understand not only the users' but also the product developer team's way of thinking.

COMPROMISE

Know what's possible – or worthwhile to make. Since our timeframe was rather short, we needed to prioritize our tasks smartly. We also didn't consider quite a few features in the end, as we dreamt too big and simply didn't have the resources anymore.

to the top

---- design and prototyping ----

Thanks for checking this out!

---- development ----

04 – Conceptualization

Using what previously had been created (personas, user flows, sitemap) I started creating lo-fi prototypes and early mockups for initial use cases.

Landscape view and card-like design was the plan from the start. This works for most scenarios, although waitstaff have a different, portable device which works more conveniently in a portrait view.

05 – Design decisions

We found that some of our earlier plans were too complicated to develop within the timeframe of the project. So, the final version became less "fancy" and more simplified than the lo-fis in terms of structure and navigation.

What I did

I created hi-fi Figma prototypes which were later replicated into the app. Alongside I was working on coding and styling the main and staff menu management pages, helping with the backend from time-to-time.

A closer look at the design decisions below.

LAYOUT AND COMPOSITION

The team decided to go with a 3-column layout for a visually balanced and easily scaled look. It also helps to separate distinct areas of interaction, which can reduce cognitive load and make it easier to locate and focus on specific tasks.

Plus, this layout is familiar to many users as it's a common pattern in similar applications. Familiarity gives consistency, speeding up user training and reducing errors.

An annotated interface showcasing the VIP menu layout for a pub management app, highlighting key features like the language switcher, menu bar, and product filters on the left; the central activity area with the menu items displayed; and a notification textbox on the right. The annotations explain the purpose and design decisions, such as the convenient placement of the language switcher and menu bar for ease of navigation, dynamic product filters for streamlined selection, and the clear central area for interactive browsing of menu items, with a call to action for order confirmation located at the bottom right for a natural user workflow.

COLOURS & TYPOGRAPHY

Goal: the UI should be both visually appealing and operationally efficient. I slightly differentiated the colour scheme for customers and staff to outline user roles and create an intuitive separation of environments.

I went for a brownish/grayish colour palette for reflecting the cosiness of wooden interiors with orange accent colours to fit within the theme.

For the primary font, I chose one that matches the bar's brand and theme: the ocean and sea. The secondary font is optimized for readability.