Project Process: Boardroom Utopia
Welcome to my second case study! In this case studio, I focus on creating a responsive web design on Adobe XD for Boardroom Utopia, a platform that allows both experienced and new skateboarders to digitally assemble and customize a custom skateboard online. Let's get started.
The finalized case study presentation including a case study slide deck can be found here by clicking [this link].
Empathizing with the user
The first step to empathizing with the user is talking to and interviewing people to understand what user needs we should focus on addressing in the conception and fruition of our project, in addition to what problems users face. Check out all that iterated data collected from interviewing different users below.
First, I create an aggregated empathy map from the data collected from four interview participants. Then, I drew up a persona with utilizing this same data.
From this data I also create a user story, problem statement, and a user journey map in order to pinpoint problems and goals that I will want to focus on in the creation of my platform.
Ideating off user data
After running competitive audits to begin the ideation process, I began thinking about ideas for my own website. This first thing to explore is how I want to design the structure of my website, since I want my website to be intuitive to users.
For my last project, I chose to structure my product in a matrix-like database structure, which allowed users to follow their own path and navigate between many pages while retaining search and filter functionalities throughout the process. Because this new platform idea focuses on customizing and designing a single product by completing multiple steps, for this project I am interested in trying out a sequential structure, which will make the process look like this:
Based on that format, I digitally drew up a very basic sitemap for Boardroom Utopia.
Creating wireframes
The time has finally come to digitize some wireframes! Below are my digital wireframes for the product user flow, user profile, and community pages. I have also included my first mockup for the home screen. I can't wait to add more pages and ideate my design.
Here it is! Beautiful. This is going to look great when it all comes together.
Low-fidelity prototyping
At last, it is time to put together our first functioning prototype that users are able to interact with. I'll be using this lo-fi prototype to gain insights on what changes I can make to my prototype more functional and usable for end users. Below is my lo-fi prototype.
As you can see I made some changes to the layout of each page from the wireframe to lo-fi product, especially to pages such as the profile page. I can't wait to take user insights and make my design the best it can be for users!
Check out my lo-fi prototype for Boardroom Utopia on Adobe XD and click around a bit by clicking this link.
Creating mockups
Great! Now that I have my data I can create my mockups. After my mockups are created I can move on to finalize the pages in my high-fidelity prototype. Below are my mockups including a closer look at some of my pages.
High-fidelity prototyping
At long last, it is time to share my high-fidelity prototype. Below you will find pictures of the boards in addition to a link to the interactive prototype.
