Baechelin
WEBSITE DESIGN
.png)
Barrier-free + Michelin
Baechelin is a website that aims to
find accessible restaurants for people with physical disabilities.
CONTEXT
Baechelin is a website designed to help people with physical disabilities find accessible restaurants to eat. The name Baechelin is a combination of two words; Barrier-free and Michelin.
Barrier-free refers to buildings and facilities designed so that people with physical disabilities can easily access and use them. Michelin guide indicates lists of restaurants with high star ratings for outstanding cooking. The name, Baechelin symbolizes our aim to find Michelin-guide restaurants for people with physical disabilities.
MY ROLE
Product Designer
UX research, User Interview, Wireframing, High Fidelity Mockups, Design System, User Testing
Designed for Hanghae 99 based in South Korea.
Collaborated with 2 back-end developers,
2 front-end developers and 1 designer.
PROBLEM
People with physical disabilities often face problems accessing the restaurants.
High stairs and narrow entrances prevent wheelchair users from entering the restaurants. Using the kiosk to order food can be difficult for people with visual impairments. There is no way of knowing whether the restaurants are barrier-free until they visit them, resulting in a lot of inconvenience and difficulties.
QUESTION
How might we ensure that people with physical disabilities can find barrier-free restaurants without difficulties?
Research
To answer this question,
we conducted user research to have a deeper understanding of our user group.
Our User Group
We specifically targeted people with physical disabilities aged 18 to 45 searching for barrier-free restaurants. This can include people who use wheelchairs, canes, and mobility scooters, and those with vision and hearing impairments.
User Interview
Our team reached out to possible target users through various channels such as online communities, university associations, and connections through acquaintances. Ultimately, we successfully conducted 4+ user interviews of people with physical disabilities who were interested in finding barrier-free restaurants.
75% experienced difficulty entering restaurants due to inaccessible building design.
There are specific needs in finding restaurant reviews for people with physical disabilities.
Existing restaurant review sites do not provide information about barrier-free facilities & services.
25% had trouble using the kiosk and couldn't receive any help from the workers
Personas
Based on the data from the user interview, I created 2 user personas with descriptions of their goal, pain points, and needs to have a realistic representation of our user group for reference.
Competitive Analysis
I researched 3+ restaurant review sites to evaluate their design strategies and identify their pain points to reframe them as opportunities.
Design Strategies
In common, search filters, maps, and review features were used in all 3 websites. which indicates that this is the industry standard for restaurant review websites. I specifically analyzed how different websites designed their menu to filter restaurants based on categories.
Yelp
Easy access to filters of different categories placed at the local navigation.
MangoPlate
Provides a search filter at the top to categorize various restaurants.
DinningCode
Use hashtags to group restaurants based on the same types of food.
Pain points
Since these websites are not made for people with physical disabilities, it was difficult to know whether the restaurants were providing barrier-free facilities and services. Also, the reviews and star ratings mainly focused on the taste, atmosphere, and overall quality of the restaurant, but not about on the usability and accessibility of the restaurants.
Reflecting on the data gathered from the user research and competitive analysis, our team saw the opportunity to design a product that could create a positive impact on the disability community.
OPPERTUNITY
Crafting a platform for people with physical disabilities to search, access, and enjoy barrier-free restaurants.
Design Process
Now, let's go through the design process step by step.
Feature prioritization
Once we knew what we wanted to build, we selected the key features we wanted to prioritize. Despite many ideas discussed during the team meetings, we focused on creating a straightforward platform where users could find barrier-free restaurants.
.png)
Map
Check the map
to find barrier-free restaurants
close to you.
.png)
Barrier-free filter
Use the barrier-free filters
to find restaurants with universal building design & accessible services.
Reviews
View the tailored reviews of the restaurant from the other users to check accessibility.
Task flow
I created a task flow to show the tasks a user will go through in the process of finding accessible restaurants on the Baechelin website.
Wireframes
Based on the task flow, I designed the wireframes to focus on the contents, layouts, and functionality of the website that allows users to easily complete the tasks.
.png)
.png)
.png)
Signup/login
Home page
Restaurant detail
Photo gallery
Visual Identity
Inclusive and Welcoming
When we started designing the visual identity of Baechelin, our goal was to emphasize the inclusive and welcoming brand image.
Logo
Logo design symbolizing people with physical disabilities
Icons
Key icons indicating the barrier-free facilities and services
Typography
Simple and clean typeface to increase legibility
High fidelity prototypes
After creating the design system, we incorporated the designs into our wireframes to develop high-fidelity prototypes.
.png)
.png)
Signup/login
Login with existing social accounts for the convenient and fast login process
Home page
Search restaurants using barrier-free filters and view top rankings
Restaurant detail
Check the accessibility of the restaurants by looking at targeted reviews
Photo gallery
View the photos of the restaurants in detail
After months of sleepless nights working on this project, we finally launched the website!
Final Product
Baechelin optimizes the restaurant search experience for people with physical disabilities by providing three key features: Barrier-free filter, specified review tags, and maps.
1) Barrier-free filter
Use the barrier-free filters
to find restaurants with universal building design & accessible services.
Users can easily identify and filter restaurants that provide accessible services they require.
2) Specified review tags
View reviews with specified tags to check the barrier-free facilities and services the restaurants provide.
Leave your own reviews and star ratings based on how accessible the restaurant was.
3) Maps
Check the map
to find barrier-free restaurants based on your current location
User Flow
Signup/login
Home page
Rankings
Restaurant detail
.png)
Photo gallery
Maps
Restaurant detail
Review
User Testing
After launching the product, we sent out a survey through online communities and social media to check the usability and receive feedback from the users. We asked the participants to accomplish the task of finding barrier-free restaurants near them and answering the survey based on their experience.
As a result, we received 38+ survey answers and this is the summary of the result.
86% said barrier-free filters were the most useful feature
"The design is simple, vibrant, and intuitive"
"Home page feels too crowded with a lot of information"
31% wished there was community feature where people could connect with each others
CONCLUSION
Conclusion + Takeaways
This was my first website design project completed as a team. I collaborated with the developers and designers to plan, design, and launch this website. There are few things I learned throughout this project.
1. Be open to other people’s opinions. At the beginning, we had to go through so many meetings to figure out the concept that everyone agreed on. It is important to listen to everyone’s opinion and find out the best ideas and solution
2. Actively communicate with team members. While working with developers, I asked many questions to check whether they could actually develop my designs through coding.
3. Focus on completion, not perfection. Due to the short time frame and technical limitations, we had to make some compromises to our design while trying our best to produce quality final product. Although this project is not perfect, it is important to acknowledge our hard work to actually launch the website and conduct user testings.