.png)
A client approached me to build a website for him to post and share divrei Torah (a short essay linked to the weekly teaching of Torah) with close family and friends. His site was already setup in WordPress, so after inheriting this project, my task was to understand his vision and bring it to life.
Initially, the client was maintaining all his writing in Microsoft Word locally - the final product is a simple WordPress site which enables him to upload and manage his divrei online for users to read.
WordPress's built-in blog feature and substantial amount of plugins it offers caters to both the user and blogger. It enables the blogger to easily organize and manage his blog posts in the back-end and delivers a structured, intuitive way for users to find and read them.
The client had a vision for how the site should look and feel, so during our meeting, I gathered his requirements and later translated them into design deliverables.
Note: I want to point it out now that the designs shown in this case study did not end up being the final design for the site. I continued to explore and iterate on the design for my own learning experience while building the client's site.
Client's vision for the site
.png)
Close friends and family of the client are going to be the site’s users, so in order to understand what they expect to see and do on the blog, I conducted interviews to identify their goals and needs. The age of users will range from their 30s to 80s, so I recruited interviewees to be representative of that.
The overarching theme was that users want to stay updated on the person's life.
.png)
While keeping in mind the client’s vision for how the site would flow, I started sketching initial wireframes for the key pages based on the client’s requirements and user insights. This exercise identified the need to understand how to structure and organize the numerous themes, so I conducted a card sort next.
I recruited 5 participants and asked them to group each theme into a category. Based on patterns identified across the card sort, I was able to determine how to group the themes together.
Wireframe sketches
Card sort results
Instead of moving onto mid-fidelity wireframes next, I decided to start building the site with a popular WordPress theme in order to educate myself on how to use it and utilize it's prepackaged resources. The wireframing process became a combination of watching tutorials to learn how to make custom changes and exploring the design library.
By changing category selection from dropdowns to visually distinguishing tiles, users are able to quickly scan the parshas and themes. Making each parsha and theme it’s own page allows users to take their time to decide what they want to read. It encourages users to explore each parsha/theme by guiding them to a dedicated parsha/theme page and takes away the pressure to choose from all of them.
.png)
Having a featured posts section helps inform that the author is actively updating the blog, enabling users to feel more engaged with them.
Users can also comment on posts, satisfying the client’s need to know that users are reading his blog.
Users have different navigation preferences, so multiple access points to read divrei were incorporated. They consist of a dropdown menu on the navigation bar, a Parshas/Themes page, and a search bar.
During a meeting, the client shared that he wanted the site to embody many colors and contain certain images (ie the Torah, the Rothko chapel, and Genesis depicting the Garden of Eden). The inspiration for color choice started with a maroon shade to represent the color of the Torah and later developed to include blues and golds while exploring color palettes online.
.png)
Although most users are mostly expected to use the desktop version of the site (insight derived from client feedback and user interviews), it’s still important to ensure the site is responsive as a general design standard in case someone does choose to visit the site on mobile. The process of designing for mobile was primarily straightforward given WordPress’s built-in responsive design. It was a process of determining how to adjust for type size and how elements should stack upon one another.
.png)
The main testing goal was to determine whether users are able to find the posts they want to read, which means they understand how the parshas and themes are organized. I realized some learnability might be required, so the test tasks included finding multiple posts and observing whether it became easier for the user over time.
.png)
This was my first time building a site using WordPress, so it took some time in the beginning to learn how to use it. However, once I got the hang of it, I was able to take advantage of its powerful functionality pretty quickly. Given some of the client's requirements, I also had the opportunity to code and that was fun! Here are a few more things I learned from this experience.