aura - informational site

aura - informational site

Software Used:

Figma, Procreate, Adobe Photoshop

Duration:

6 Weeks, March - April 2023


BACKGROUND

This open ended project started with the base of creating an informational site that taught the users about the topic in an interactive way. I decided to make a site that taught the user about crystals through a daily survey. The survey would ask the user personal questions about their day that would then give them a crystal that would resonate with them that day.

BACKGROUND

This open ended project started with the base of creating an informational site that taught the users about the topic in an interactive way. I decided to make a site that taught the user about crystals through a daily survey. The survey would ask the user personal questions about their day that would then give them a crystal that would resonate with them that day.

project definition

This open ended project statrted with the base of creating an informational site.

project definition

This open ended project statrted with the base of creating an informational site.

asset creation

This project contained many different hand drawn assets that would be interacted with by the user. These were made mainly in procreate, as well as some in Photoshop.

asset creation

This project contained many different hand drawn assets that would be interacted with by the user. These were made mainly in procreate, as well as some in Photoshop.

sitemap

The sitemap provides a layout of how the users could potentially interact with the site.

sitemap

The sitemap provides a layout of how the users could potentially interact with the site.

aura - informational site

Software Used:

Figma, Procreate, Adobe Photoshop

Duration:

6 Weeks, March - April 2023


wireframes

The wireframes below show the basic layout of the website. In the process document linked at the bottom of the document, you can see an annotated version of the wireframes with more detailed interaction notes (pages 14-27)

wireframes

The wireframes below show the basic layout of the website. In the process document linked at the bottom of the document, you can see an annotated version of the wireframes with more detailed interaction notes (pages 14-27)

inspiration board and style guide

inspiration board and style guide

final

The final prototype runs through the survey users can take and many different interactions they may have with their daily crystal.

final

The final prototype runs through the survey users can take and many different interactions they may have with their daily crystal.

takeaways

This project taught me a lot about integrating hand drawn illustrations into UI projects and how I can use my passion for illustrative art in my design projects. It also taught me about the difficulties of designing a survey and the opportunity it creates as well.

takeaways

This project taught me a lot about integrating hand drawn illustrations into UI projects and how I can use my passion for illustrative art in my design projects. It also taught me about the difficulties of designing a survey and the opportunity it creates as well.