For the research segment of this project, I utilized several UX design tools to gather information and ideas. I made personas, an empathy map, and a research study.
With Adobe Illustrator, I created a site map to assist with figuring out the user flow for the app and wireframing.
Next, I started experimenting with sketching wireframes for the app. Sketching layouts is the fastest way for me to envision how I really want this app to look and function for users. These are my sketches of the homepage:
Next, I made my digital wireframes. I used the mobile first approach and created my smaller, mobile app wireframes first.
Once I had the low fidelity mobile screens figured out, I started on the desktop screens. Once I made the first page with the proportions, font sizes, and hierarchy that I was satisfied with, applying those guidelines to the rest of the screens was easy.
After finalizing the layout of both the mobile and the desktop versions of my website, I added design elements and created high-fidelity wireframes. Here are the mobile hi-fi wireframes:
And here are the desktop hi-fi wireframes:
Finally, I used the prototype function on Adobe XD to make prototypes for both versions of the site. To the right is the prototype for the mobile version. You can try out the prototype at this link:
https://xd.adobe.com/view/107d4cce-7882-4184-a7bc-1cf80d7d34ed-452e/?fullscreen&hints=off
Alternatively, you can try it out using the embedded link below. Please note that this is a prototype and not every single page is available to interact with.
Here is the desktop version of the hi-fi prototype. You can test it out for yourself at this link:
https://xd.adobe.com/view/19dba344-323f-4092-a52d-75fdc35a500f-4c88/?fullscreen&hints=off
Alternatively, you can try it out using the embedded link below. Please note that this is a prototype and not every single page is available to interact with.
