Study Together
This web app allows students juggling their studies with a job, family, illness, etc. to engage with a like-minded student community when and where they want.
DELIVERABLES
- User flow diagram
- Paper wireframes & prototype (mobile)
- Mid-fidelity wireframes (mobile, tablet, and desktop)
- Mood board
- High-fidelity mobile UI mockups
- Final UI & presentation mobile, tablet, and desktop mockups for responsive design
- Brand icon and icon set
- Interactive prototype with animated interactions
- Style guide
- Video demo of project
ROLE: UI Designer
TOOLS: Figma
DURATION: 2 months
Problem
While remote instruction is especially helpful for students juggling their studies with a job, family, illness, etc., it can offer challenges to enthusiasm, a key component of learning. Peer-to-peer learning can increase motivation and engagement with a subject, but students can struggle to connect with others in their field.
How can we connect students online to facilitate peer-to-peer learning, support, feedback, and motivation?
In my CareerFoundry UI for UX Designers course, I developed the UI for a responsive web app that would allow students to connect with fellow students in their field or related discipline to share and discuss their interests, insights, and tasks with regards to their studies, on any device. Study Together aims to enhance the learning experience of students by connecting them with peers with varying experiences and insights who share similar interests. Students in the same or similar course would access the app anywhere they have internet access, between classes to help each other with tasks and assignments, share resources and articles, and find collaborators for projects.
The project brief included the primary persona, user stories, feature requirements, & partial branding guidelines. My role began with user flows, which guided my low fidelity wireframes, then I worked my way to high fidelity mockups for 3 breakpoints and a clickable prototype for the mobile breakpoint.
Here's a closer look at the process:
CONCEPTUALIZATION
Feature Requirements
● Personal profile including image, subject, specialization, interests, location, favorite articles/books
● Search feature (search by name, subject, location)
● Contacts/friends list
● News/updates reel
● Private/direct messaging feature
● Social features: following, posting (including file upload for PDFs and docs, presentations, images, videos, links), sharing, liking, commenting
● Notifications feature
Persona
“I love the idea of having the right support at the right time for my course, such as study materials and advice. I think teamwork will be key to my professional development, so I’d like to find like-minded students to collaborate on projects.”
Alex Hassan
A student enrolled in an online course who works part-time as a retail store manager.
GOALS
Alex juggles studying and working part-time. He loves his subject, but also wants to complete his course as quickly as possible and gain marketable skills.
To help with this goal, Alex wants to find things like relevant supporting materials, advice from fellow students on studying efficiently, and receive peer feedback.
Alex would like to find like-minded students to collaborate with.
TASKS
Alex wants to find supporting materials to help him master the more complex subjects in his course.
He wants to connect with like-minded students to share his work and collaborate.
He wants a tool to keep him motivated and support his development as a student and beyond.
ENVIRONMENT
Physical: Alex lives in a small house with his partner.
Social: His mentor (a volunteer alumnus from his course) told him about the tool. On weekends, he likes exercising at the gym and going out with his partner and friends.
Technological: As a retail store manager, he has a basic understanding of technology. He uses till and stock management software. His course is very text-based, but he’s used online tools in the past to help with other academic endeavors.
User Stories & Task Flows
As a new user, I want to create a profile, so that other students can find me.
As a new user, I want to find and connect with students studying my subject (or a related subject), so that we may collaborate.
As a frequent user, I want to be able to message other students, so that we can problem-solve together.
As a frequent user, I want to be able to view and share articles, videos, images, and other files, and write posts for other students to read, so that we can share knowledge.
As a frequent user, I want to get peer feedback on my assignments, so that I can improve my classwork before submitting it to the instructor.
As a frequent user, I want to know if someone messages me or shares something that I would be interested in reading or reviewing, so that I don’t miss anything.
Low Fidelity Wireframes & Prototype
My primary goal for these screens was to keep cognitive load low. As a result, I largely followed established UI patterns and adopted the Material Design UI kit for my wireframing. My goal to keep cognitive load low applied to onboarding too; although the process may seem long, putting each step on its own screen keeps users from getting overwhelmed.
Because the onboarding process is long, I separated it into three tasks: account creation, profile creation, and adding peer connections. I included profile creation and adding peer connections in the onboarding process because use of the Study Together app hinges on both actions. Each of the three tasks has a separate confirmation screen that allows users to skip the next section of onboarding if they would like.
The final three features I designed were a user profile, messaging flow, and home page. I modeled these on existing social media patterns in order to reduce cognitive load.
Moodboards
I created two moodboards to present the feelings for targeted user groups. Both options evoke the physical places students study and the physical tools that students use to study.
Modern Cafe
Modern • Bright • Collaborative
Light-filled cafes and co-working spaces. Associated with technological connection and collaboration. Bright colors, reminiscent of annotation tools like highlighters and post-its, mix with sleek textures of glass, black steel, and light-toned wood. Font styles are modern and energetic.
Retro Library
Studious • Complex • Grounded
Classic college library, built or renovated in the mid 20th century. Associated with study groups and resource sharing. Classic academic colors mix with textures of paper, wood, and brass. Font styles are reminiscent of physical books.
The modern cafe concept conveys more energy and connection. It is bright and sleek, more suited to a digital tool. And while I love a library, they are often associated with quiet, solitary study, the opposite of Study Together’s purpose. Cafes, on the other hand, are associated with connection, places we meet peers to discuss a project over coffee or take our laptops to collaborate digitally with colleagues.
ITERATION
My moodboard guided my choice of fonts, colors, and images. I chose to use Material Design to design my components because its ubiquity means users are already familiar with it, lowering cognitive load.
I then applied the style guide to my mid fidelity wireframes.
Fonts
Permanent Marker for branding
Lexend for headings and body copy
Brand Icon Set
Colors
Iconography
UI Elements
Style guide indicates states, sizes, and usage
Interactive Prototype with Animated Interactions
For the final prototype, I thought through the necessary interactions for the Study Together interface before I adapted Material Design components. To make sure users had good interaction feedback, I animated the interactions with most of the components to show three primary states: enabled, hovered, and pressed. I would have liked to include a few more animations to create a sense of fun (eg. the party popper on the onboarding confirmation screens), but time was limited.
Final High Fidelity Mockups
I designed mockups for mobile, tablet, and desktop breakpoints for three screens, the splash screen, profile screen, and the home screen, and incorporated them into their appropriate use environments.
I made a few tweaks to components at this stage as everything started to come together. I changed the background of the screens from white to an off white to improve readability, and differentiate the cards from the background without an outline. In mid fidelity wireframes, I had played with color changes to indicate state changes in icon interactions, but ultimately felt that was more distracting than changing an unfilled icon to a filled icon.
FINAL THOUGHTS
At the end of my UX certification course, CareerFoundry offered three specialization courses. I chose the UI for UX Designers course because designing the UI for the app in my UX course did not come as easily to me as other aspects of UX design. While I have always thought I had a reasonably good eye for a layperson, my background is in human-centered design, not the visual arts. This project has strengthened my understanding of style guide and design system creation.
Takeaways
Adopting a design system early: This project reinforced for me the value of adopting a design system early. In previous projects, I spent considerable time revising screens to align with my design system during mid fidelity iterations. As a result, I adopted Material Design early, while translating pen and paper sketches to low fidelity wireframes. By implementing Material Design from the outset, I saved significant time. This approach streamlined the design process and ensured a cohesive user experience from the beginning.
Test, test, and then test again: This project deepened my understanding the Venn diagram of graphic design, UI, and UX. I focused on usability and cognitive load, but in the absence of preference and usability testing, which were outside the scope of this project, I also made some concessions to aesthetics. This experience underscored the critical role of user testing in validating design decisions and ensuring the best user experience. Moving forward, I am committed to integrating comprehensive user testing throughout the design process to make more informed and effective choices.
Facility with Figma: This project strengthened my skill with Figma, largely because I took the time to make fully interactive UI components. By analyzing and then meticulously recreating the components from the Material Design 3 Kit, I gained a deep understanding of their construction. This hands-on approach honed my technical skills and improved my efficiency. As a result, my expertise with Figma has grown immensely.