Role: UX/UI designer
Date: August 2023 - ongoing
Team: Julia Maksymowicz, Gabriel Kuik, Piotr Miśkiewicz, Filip Lewandowski
Tools: Adobe XD, Miro, Google Drive, Google Meet
My key achievements:
designed a responsive and mobile-first website along with a graphic designer,
directed the UX part of website development.
Project overview:
Radość is a church with a lot of regular visitors and many guests interested in the community life. Besides oldschool leaflets, they can find infomation on the church website, which is hard to navigate and sometimes its parts are even hard to find. The design isn’t comprehensive and the church had recently undergone a rebranding, so the webpage needs to be improved.
Our team had to redesign a church website to better suit user needs. Because of the time scope, we decided to design a MVP solution first to make as big of an improvement quickly. During this stage, we focused mostly on improving navigation within the site on mobile and presenting current information and functions in an more intuitive way. Now, we’re working on the proper, fully redesigned website. There’ll be some updates on this project soon.
Exploring the problem:
The preliminary research findings we recieved sugested that the target user is a regular church goer, who checks information on the website often and takes active part in the community life. Hence, they use majority of the website features.
Project scope:
Our team was tasked with standardizing the experience across the parts of the then dispersed website, as well as bringing the website up to date with the recent rebranding. We were given an information architecture draft, so we studied it along the new brand look guidelines and started creating simple wireframes. We iterated on them to put our best ideas out there and finally decided on a layout, which we polished into mockups and then the final design. Moreover, we proposed to show a QR code leading to the payment page during services for easier access.
Design process:
The first thing we did was study the research, requirements and the brand book provided for us. I created a user persona based on the preliminary research. Then, we decided on the main pain points that we want to solve in the MVP version of the project. The website’s functions were hard to find. Besides, the design had to be updated and more coherent to fit the new design language and make the website feel like a part of the organization.
Then, our team discussed the new page layout, information architecture, and started ideating using Miro boards. I created a quick, simple wireframe to present the idea of putting information inside equal tiles. It seemed reasonable for the temporary website, while we didn’t have that much data and functions to show. The team decided to go with the „tiles” idea.
Based on the first information architecture layout and the "tiles" idea, we went on to create a more advanced wireframe of the app's desktop view.
Next, we jumped into Adobe XD to create mockups. We prioritized the mobile experience, because it was more often used according to the research we received. The tiles had to be first layed out in the right order on mobile to know how to show them on desktop. Our graphic designer prepared mockups, which we then discussed. I suggested to change the tile size on the desktop to fit a part of the bottom box on the screen when first opening the website. This way users will know that they can scroll further. Moreover, I made the spacing and padding consistent and improved icon visibility by thickening the stroke.
From there it was up to the two developers to take on the work. We, as the design part of the group supported them and provided with necessary fonts to embed in code, and localisation of design elements. Later on, we consulted if the website worked as we intended in the beginning and made necessary comments and adjustments. The final product:
Key takeaways:
Following the design process steps helps the project to develop naturally with the right pace,
every team member knows meaningful insights concerning their niche that might translate to other aspects of the project.