In a world of digital experiences and productivity, people are always looking to create an app, a website, or some way to grab people’s attention. For this project, we dipped our toes into the world of Adobe XD, and UI/UX design. Our primary goal was to create multiple modules that held a consistent design system and could be re-arranged on a potential website.

Before this project began, I already had experience with Figma. I had gone into this project hoping to strengthen my understanding of Adobe XD, and website prototyping as a whole.

With many of the examples I found, the modules all related to each other in some way or form. Some modules would interact with each other, or two modules closely related would sit next to each other. 

With my wireframe, I tried to think about what modules would work best with the concept. I put ideas out there that weren’t going to be possible, as well as ideas that were easily doable yet had no connection to the concept. My first goal for this step was to hammer down what needed to be a part of the dashboard and what may be nice features on top.

My dashboard was designed around the idea of a “speedcuber” - someone who solves a Rubik’s Cube quickly - who would want a lot of information in one place. In the world of “speedcubing,” there are many kinds of information and many places to get that information. The issue I found is that if you don’t know these places exist then you won’t be able to find the information. I considered this project a good foundational step towards making this a reality.

After I had put the basics together, I lost myself in adding detail. I hadn't decided on a layout yet and was still experimenting, which led to many elements feeling off-balance. My typography was non-existent at this point, using a default typeface and no kerning in sight. These were some of the first changes I made.

I wanted to choose a font that was square but rounded. Something that felt like a Rubik's cube, but wasn't sharp, uninviting, or friendly. Aptly gave me the ability to have every bit of text readable and still have the squareness I was looking for.

I started off with the six basic Rubik's cube colors - red, blue, orange, green, yellow, and white - as colors that I wanted represented in the design system, but not necessarily as the primary colors. I used grey tones for the majority of the system to offset how overpowering the colors were. 

My UI has three main styles of components. A simple "Left + Right" component, where the module would slide back and forth between different states.

A "Separated" style; information on top and a separate piece below it. 

and a "Scroll-Bar" menu; where information was in a long list that users would scroll through.

I used these icons because I wanted everything to be easy to understand without any learning curve. Arrows are shown next to the component, and make the area more than text. I wanted to encourage users to engage with the design without having to feel intimidated by strange symbols that could mean anything.

For my Assets, I chose items that were going to be important in some way. I added more after I had done these, as seen in the widgets below. I wanted to showcase everything I could when it came to the prototype.

My widgets came together in a cohesive way that I feel accomplishes the goal I set for myself. By making pieces that visually linked together and had reasons to be connected, I feel that I truly made something worth the time. I was more focused on fine-tuning what I already made at this point, rather than creating anything more.

After some discussion, I would rearrange the modules in many ways, and felt that this one was the most balanced composition. I put the more important things down at the bottom, and the items that would require the least attention at the top, allowing the user to quickly glance over information before settling into what they were here for.

After some discussion, I would rearrange the modules in many ways and felt that this one was the most balanced composition. I put the more important things down at the bottom and the items that would require the least attention at the top, allowing the user to quickly glance over the information before settling into what they were here for.