LoreMaker

UX/UI Design Project

As the final exam of my UX/UI Design online class in 2023, I was asked to conceive and design a web platform allowing its users to create their own board game. The platform would use an integrated AI to assist the users in the process.
I was put in the position of an actual project manager, being in charge of the whole project and simulating the lead of a small group of people.

Firstly, I was asked to provide the preliminary report, including benchmarks, proto-personae, and an actual concept for the project (mine was to focus on tabletop role-playing games). Secondly, the book of specifications, including the context and the end goal of the project, the targets, the production planning, and the budget.
Then, I was asked to create an experience map, some personae, and a UX exploratory research survey meant to understand the target perspective and needs based on my concept. I was also in charge of elaborating a communication plan to tease the upcoming launch of the platform, with small video teasers aimed at social media such as TikTok or Instagram reels.

Once done I started to design and build the platform, respecting the production planning by using Trello. I started by finding a name, Loremaker, and designing a logo. The logo represents a 20 sided dice, a core element of a tabletop role-playing game.
Then, I made the wireframes of the plateform, both on desktop and mobile format, using Figma. Once those made, I designed the prototypes, creating the actual graphic identity of the platform.
After that I could start to integrate the actual platform and build the website using the Bricks Builder plugin for WordPress. I was not asked to program a functionnal platform with a working AI, since this isnt technicaly the job of an UX/UI designer and requires skills in programming that I don't have. But I had to provide an interactive mockup of the platform, wich is now live and accessible. 

This project was really interesting and helped me discovering the whole aspect of managing a web project from its begining to its end.

Design process

Homepage Wireframe

Homepage Prototype

Screenshots