Rising Star

Designing for a dynamic, online learning experience! Rising Star is a conceptual online learning platform looking to launch its content in both desktop and mobile formats. The central point for this project was to design an interface that is responsive and is dynamic enough to keep up with changing content, which includes a status system where users keep track of their progress. All along with creating and implementing the brands for a final high-fidelity Figma prototype.

Role

Visual Designer

Role

Visual Designer

Deliverables

Desktop/Mobile Prototype

Deliverables

Desktop/Mobile Prototype

Tools

Figma

Tools

Figma

Lotta wireframes in this one...

While the project was a requirement of the project, I intentionally kept the brand elements to a minimum, keeping in mind that this is for a learning platform, and thus, the focus should be on the content itself. For this reason, my sketches, usually kept simple to focus on functionality, have actual color; I was trying to decide where branded elements made the most sense within the interface. Along with branding, I was ideating on how content should be laid out and how the stats page was going to function. Once satisfied, I moved on to wireframing, but actually adding the live content in the wireframe itself. This was done in order to get a more solid idea of what actual content would look like and function within the system. Something to note in this project as well was the way I had to go about wireframing. The project wasn’t just focused on the UI of the site, but the backend as well. It required me to create a documentation system of the components and rules I used within the prototype that a developer would be able to use.

Sketches

Wireframes

Ultimately, I ended up with a flexible system that displays the content dynamically in both devices. This project really did help grow my skills with Figma since I had to document my components and systems used during the design process. It was also a good way to learn about designing responsively.

Final Design

Figma Prototype