Study Together Responsive Web App UI Design.
My first step was to decide on an overall aesthetic for my app design of Study Together based on project requirements
User Research
Usability Testing
UI Design
.jpeg)
This was the mood board I created for the Study Together Responsive Web App. In the project brief, the app being easy to use was mentioned. How I wanted to execute that was by making the app have an easy on the eyes color scheme with a softer font.
I started to think about how I want Study Together to look, so I created some mobile mid fidelity wireframes to start. I wanted each screen to be easy to understand without any confusing content. I wanted everything to be easy to find within the web app. I decided to go for a mobile first design approach with this project and added content as I moved onto larger screens.
I then created a style guide for Study Together. I included the color palette, icons, images, typography, and logo guidelines.
Mobile Mockups
I created a clickable mobile prototype on Marvel, the link to it is below:
Responsive Home Screen for Study Together
Responsive Profile Screen for Study Together
I learned a lot about UI design doing this project and look forward to future UI/UX projects that I'll take on in the future!
Future Steps:
Since this was a shorter project for my UX Careerfoundry course, I didn't dive into the UI aspect of this project. To continue this project and finish it the next steps would be creating the entire app's polished UI design and handing it off to the development team.
I learned a lot from this project as it was my first ever UX design project. I learned all the ins and outs of going from just ideas to developing them into actual app designs.