11 (4).png

TeamUp

TeamUp is a web responsive app with the objective of connecting students to one another. With the learning experience becoming increasingly virtual as technology progresses and with Covid 19, students have less opportunity to interact in person. TeamUp wants to promote and aid on-going interactions and collaboration between students, providing a platform where they can connect with others, share insights, and receive and give peer feedback. 

11 (2).png

Challenge

As part of my course with CareerFoundry I was challenged to design an  intuitive user friendly web responsive app for students to connect. The key features included creating a personalised profile, viewing and posting on a  newsfeed, checking notification and submitting an assignment for peer review.

Role

Timeline

Tools

UI/UX Designer,

Career `Foundry Student.

October - November 2020.

Pen & Paper and Figma.

USERFLOW DIAGRAM

Before jumping into creating design solutions, it was essential to identify what the user would want to accomplish using `TeamUp. User Stories were provided as part of the project brief. From there I set about identifying the necessary screens and the userflows a user would have to follow to complete a task. I aimed to make each userflow as efficient and simple as possible.

Screenshot 2021-01-08 at 11.09.31.png

LOW AND MID FI SCREEN

Screenshot 2021-01-08 at 10.33.18.png
Screenshot 2021-01-08 at 12.19.41.png

A MOBILE FIRST APPROACH

For my responsive app I took a mobile first design approach, designing for the smallest screen first before tablet and desktop.  

BRANDING & STYLE GUIDE

 When I focused on TeamUp's goal to encourage collaboration and interaction between students, I wanted TeamUp to be seen as a  supportive, friendly and reassuring brand, helping our target audience stay motivated when studying.

Desktop Copy.png
Screenshot 2021-01-08 at 10.33.32.png
Screenshot 2021-01-08 at 10.33.41.png

RESPONSIVE DESIGN

10 (5).png
Notification check - 1 (2).png
Desktop - 10 (3).png

Landing & Onboarding

Screenshot 2021-01-08 at 11.44.14.png

Sign up

Screenshot 2021-01-08 at 11.48.27.png
Screenshot 2021-01-08 at 11.48.16.png
Screenshot 2021-01-08 at 11.56.21.png

Newsfeed

12.png
10.png
priscilla-du-preez-XkKCui44iM0-unsplash.
7.png
Screenshot 2021-01-08 at 10.36.11.png
Screenshot 2021-01-08 at 10.36.14.png

Peer Review

Screenshot 2021-01-08 at 11.22.46.png
Screenshot 2021-01-08 at 11.18.47.png

PROTOTYPE

The screens and prototype were created using Figma. The full prototype is viewable below.

digital-marketing-web-design-user-usabil

THANK YOU

You've made it to the end! Thank you for taking the time to review my work. If you like what you see, please don't hesitate to get in touch to collaborate. My contact details can be found below.