Rom-Com Bible is a website I designed as part of my Information Architecture module during my MSc in Human-Computer Interaction Design. I received a distinction (80%) for this piece of work.
My task was to design the IA of a web-based information environment focused on a domain of my choice. I chose rom-coms as my domain because they are, in my opinion, the greatest gift to mankind.
You can learn about my design process below.
Step 1: Conduct interviews with domain experts
The first stage of my design process involved interviewing three domain (rom-com) experts to allow me to develop my domain model. I asked the same questions in all three interviews: How would they define a rom-com? What are the key elements of a rom-com? Which mediums do they use to watch rom-coms? How do reviews factor into their choice of rom-coms? What about the actors and actresses?
The responses of the experts enabled me to identify key entities of romantic-comedy movies, such as the love story, lead characters, and memorable lines- 'I'm also just a girl, standing in front of a boy, asking him to love her'- can you name the movie?
Image 1. A question I posed in one of my domain interviews
Step 2: Develop a domain model
Based off my domain interviews, I then constructed a domain model, creating a rough sketch before developing in Figma, as can be seen in Image 2.
Image 2. Domain model view PDF version
Step 3: Develop a sitemap
The next stage of my design process was to develop a sitemap. I had some initial labelling ideas for the section of my site, as can be seen in my (very) rough sitemap sketch below. It helped to review online articles about rom-coms too, to see how others refer to certain movies.
Image 3. Rough sitemap sketch
Step 4: Use card sorting to test my site map
To test my labelling ideas, understand users' mental models, and also gain some inspiration, I decided to run an open card sort and recruited 10 participants. This was hosted online on Optimal Workshop.
Image 4. One user's card sort responses. Sorry, She's All That.
Step 5: Develop a digital site map
My card sort responses were very helpful and permitted me to tweak and improve my labelling. I then developed my sitemap in Figma. I adopted a combination hierarchy and database structure for my site.
Image 5. Sitemap view PDF version
Step 6: Conduct tree testing
To test my sitemap and the way I had organised the information on my site, I conducted two tree tests, again on Optimal Workshop. The first tree test revealed users struggled to find information in 'Polls' and 'Groups' (which were previously in my 'Community' section). So 'Community' had to be rejigged- 'Community' became a section dedicated to reviews and discussions. I saw the user score improve from 75% in my first tree test to 90% in my second tree test.
Image 6. Snapshot of tree test results
Step 7: Develop a user journey
Content with my tree test results, I then designed a user journey to represent the possible paths a user might take to achieve a goal. The goal in question: Review plot summaries of 90s/00s rom-coms starring Kate Hudson, and decide which movie to watch first. If only life was always this simple!
Image 7. User Journey view PDF version
Step 8: I created low/medium fidelity wireframes and conducted usability tests with 3 users, using their feedback to improve my designs. tile. For example, one user suggested adding a small movie description to each movie tile to incentivise users to view ‘Inside the Movie’. As I did not want to overload the tile with information and risk cognitive overload, I added an information ‘i’ button which users can click to view a very short plot summary.
Image 8. My All Rom Coms wireframe.