Restaurang Apotek
2024 · UX/UI · Web · Restaurant
Redesigning a restaurant website with focus on accessibility, mobile experience, and user-centered design.
A beloved restaurant with a broken website
Restaurang Apotek is a locally renowned restaurant known for its bold interior and modern take on traditional dining. But their website? It didn't match.
It lacked accessibility, was difficult to navigate especially on mobile, and couldn't be updated without technical help. Menus were buried in PDFs, the booking flow was confusing, and the design felt disconnected from the restaurant's actual brand.
My role was to redesign the website from the ground up, creating a modern, accessible experience that aligned with the restaurant's personality while making it easy for the team to maintain.
Understanding what was broken
I started by conducting usability reviews, user interviews, and accessibility audits. The goal was to uncover the biggest pain points and understand what users actually needed.
⚠️What users struggled with
- •"At first, I thought the logo was a button... it was confusing!"
- •"I tried tabbing through the page, but I couldn't even complete a reservation."
- •"Why is the phone number hidden? I just want to book a table!"
- •"Instagram looks cool, but the website feels completely different."
🎯Business needs
- •Increase completed bookings
- •Reach more users through accessibility
- •Empower staff to update content easily
- •Align digital presence with brand identity
A welcoming first impression
The landing page needed to immediately communicate the restaurant's character while making it easy to find key information like hours, location, and booking.
Landing Page
Clean hero section with immediate access to booking and essential information.
- •Clear visual hierarchy guiding users to key actions
- •Mobile-first design with touch-friendly elements
- •Bold imagery reflecting the restaurant's personality
Making navigation intuitive
The old navigation was cluttered and confusing. Users couldn't find what they needed, and the mobile experience was broken.
I redesigned it with clear structure, accessible touch targets, and a clean mobile menu that prioritizes the most important actions.
Mobile Navigation
Clean, accessible menu with clear hierarchy and easy-to-tap elements.
- •Prominent booking CTA at the top
- •Clear close button (X) for better usability
- •Phone number easily accessible
- •Large touch targets for mobile users
Making menus readable and accessible
The old PDF menus were impossible for screen readers to parse. I redesigned them as web-native content with clear typography, pricing, and categories.
Food Menu
Clean layout with clear categories, pricing, and descriptions.
- •Improved typographic hierarchy for scanning
- •Clear pricing and portion information
- •Screen reader compatible HTML structure
Cocktail Menu
Visual menu design highlighting drinks with proper categorization.
- •Added "Mocktails" explanation to avoid confusion
- •Clear distinction between alcoholic and non-alcoholic
- •Consistent pricing format throughout
Showcasing the atmosphere
A restaurant's atmosphere is everything. I designed a gallery section that lets the images speak for themselves while maintaining fast load times and accessibility.
Gallery
Image grid optimized for mobile with lazy loading and proper aspect ratios.
- •Responsive grid layout adapting to screen size
- •Optimized images for fast loading
- •Alt text for all images for accessibility
Making contact easy
The footer became a crucial touchpoint for users looking for practical information. I designed it to be scannable, accessible, and mobile-friendly.
Footer
Organized footer with opening hours, contact details, and location.
- •Clear grouping of information for easy scanning
- •Clickable phone numbers and email addresses
- •Social media links with proper labels
Testing and refining
I tested the redesign with users and iterated based on feedback. Some decisions needed adjusting.
Key Iteration: Mobile Navigation
Initially, I placed the phone number and booking button at the top of the navigation. Testing revealed this created a "fast food chain" feeling and caused confusion.
Moving these elements into the dropdown menu resulted in clearer visual hierarchy, a more intuitive flow, and better focus on navigation.
Lesson learned: Sometimes less visible doesn't mean less accessible. Context and clarity matter more than prominence.
✅What worked
- •Booking button became immediately findable
- •Navigation clarity improved significantly
- •Users described design as "clean and professional"
🎯Impact
- •All users could complete booking flow
- •Keyboard navigation fully functional
- •Staff could update content without developer help
What I learned
This project taught me that good design isn't just about aesthetics. It's about solving real problems for real people.
Accessibility opens doors
Building for accessibility from the start made the site better for everyone, not just users with disabilities. Clear navigation and semantic HTML improved the entire experience.
User testing catches blind spots
What seemed clear to me wasn't always clear to users. Testing revealed issues I would have missed, and their feedback shaped better solutions.
Mobile-first matters
Most users were browsing on mobile. Designing for small screens first ensured the experience worked where it mattered most.
"The best designs solve problems you didn't know existed until users showed you."
If I had more time...
While the redesign solved the major issues, there's always room to go deeper:
- →
Enhanced WCAG compliance
Conduct a full AA-level audit and implement remaining improvements
- →
Online ordering integration
Explore adding takeout ordering functionality for additional revenue
- →
Performance optimization
Further optimize images and implement progressive loading strategies
Thanks for reading! 🙌
I hope you enjoyed learning about Restaurang Apotek.
Feel free to explore more of my work or get in touch.