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

JOB TITLE & EXPERIENCE

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

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