Case Study
Project duration
September - November 2021
My Role
UX/UI Designer
(ideation, user research, wireframing, prototyping, testing, iteration)
​​​​​​​The problem
Users often felt unhappy about the lack of available seats on arrival. They complained that they could not easily access information about the latest projects and events organised by the social enterprise.
The goal
To design a responsive website for the local cafe to enable the users to book tables, engage with the events and make donations.
The product
I’ve designed a responsive website to enable customers to book a table, find out about the latest projects, and donate money/ points as a pay it forward feature to make the processes easier and quicker for the customers as well as to nurture the social enterprise aspect of the business.
User Research
​​​​​​​The user research was conducted through interviews conducted in-person to gain deeper understanding of the needs of the users. The most common pain point identified was the lack of ability to book a table, and clear information about the community projects and events. The users expressed their interest in being notified about the upcoming events to allow them to participate.
Key Pain Points
1
Engaging in the web content is not accessible for some due to the layout.
2
Lack of readily available information on the upcoming events.
3
Users find cash donations inconvenient.
User personas and stories
Creating user personas and mapping out the user journeys helped empathise with the users and spot improvements opportunities as well as helped implement accessibility considerations in the design.
%20-%20Copy.png)
Big picture storyboard
To better uunderstand how people are going to use a product I am working on. Identifying the needs of the users through visual communications tools such as a UX storyboard can bring greater insight into what the user experience should be.
Ideation
Crazy Eights
I used the Crazy Eights technique to generate a broad set of ideas. It is a fast sketching exercise that challenged me to sketch eight distinct ideas in eight minutes. By having a time limit, I had no time to overthink or to attempt to judge or evaluate them.
%20-%20Copy.png)
Sitemap
Planning out the architecture behind the website design, I created a clear organisational structure. Thanks to this, users can move through and use the website successfully. While conducting research during the empathize phase of the design process, I learnt that users wanted to be able to book tables and check the current projects easily therefore, I've included them in the main navigation menu for fast access.
Paper wireframes
Taking the time to draft iterations for each screen of the app allowed me to pick the elements that were the best-suited to address the user pain points and use them in the digital wireframes. For the home screen, I focused on the key activities that users wished to complete using the app (identified during user research) and made them accessible via clearly labelled buttons at the top of the screen for quick access.
Wireframing and lo-fi prototyping
I made sure to incorporate feedback and findings from the user research in the screen designs as the initial design stage continued.
.png)
Lo-fi Prototype
The low-fidelity prototype connected the wireframes to create user flows to be used in usability testing.
Usability study
Testing usability with a group of users uncovered issues with the initial design. I have used the feedback gathered during the usability studies and implemented changes in to the design.
Add a calendar to booking section so that is clear what day of the week it is
Include an option to select the number of people per booking to make sure that there are enough seats at the table.
Design a feature to donate points online
Iteration
Testing usability with a group of users uncovered issues with the initial design. I have used the feedback gathered during the usability studies and implemented changes in to the design.
High-fi Prototype
​After iterating on my design, I developed mock-ups and a high-fidelity prototype before conducting another user testing session.
Accessibility considerations
> Contrast - ensured AAA standard
> alt text included
> layout clear and logical with clear hierarchy
> typography - sans serif font type
> clear headings used to simplify page navigation.
