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.