Designing a website for a collaborative platform
Abhigyan Bhadra
The product:
Team app aims to be a one-stop solution for collaborators and contributors with it’s unique set of functions which makes organizing, conducting and executing much times easier and secure.
Project overview
Project duration:
March 2021 – June 2021
The problem:
Globally as well as regionally people find it difficult to travel through states and countries in order to collaborate/work together toward a shared goal and virtually has to get subscriptions to various professional platforms in order to do that.
Project overview
The goal:
Design a website that has the 3 features i.e, organizing everyone’s schedules, organizing and conducting virtual meets, keep and share recordings and notes.
My role:
UX Designer for Team App from conception to delivery.
Project overview
Responsibilities:
Conducting intervies, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding
the user
User research: summary
I conducted interviews and created empathy maps to understand the users I'm designing for and their needs. A primary user group identified through research were people working from their homes residing at different places/states/countries and are facing issues with the presently available resources.
This user group confirmed initial assumptions about Team App customers, but research also revealed that distance was not the only factor limiting the users.
User research: pain points
1
Time
Professionals find it difficult to manage everything everyday before beginning their work or after ending it.
2
Budget
Taking various subscriptions on to manage resources on top of internet connectivity becomes a challenge for people from under-developed places.
3
Resources
Many individuals/entities lack prevailing resources or are not aware of the possible/available options.
Persona: Yasmin
Problem statement:
Jessie is a 29yr old Banker residing in Hong Kong by herself, is very passionate about her work and stays busy the entire week as well as in the weekends is also very determined to maintain a positive work-life balance, who needs a virtual platform that enables her to organize conduct and store all her schedules, meetings and notes at one place, reminds her of her upcoming events and conduct virtual meetings.
User journey map
Image of user journey map
Mapping Jessie’s user journey revealed how helpful it would be for users to have access to a Team App Website.
Starting
the design
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the Contact Us page, I prioritized a detailed and easy contacting process to help users save time.
Image of paper wireframes including five different versions of the same screen and one image of the new, refined version
Digital wireframes
The initial Sign Up page is made entirely based of the considerations derived from early interviews.
Simple user flow starting point
Different ways to sign up
Digital wireframes
Getting all the information at a single place without further movement between pages thus keeping my account brief and to the point.
My account having sections with different categories
Information in blocks
Low-fidelity prototype
Screenshot of prototype with connections or prototype GIF
The low-fidelity prototype connected the primary user flow of signing up, selecting a plan and going through the basic features, so the prototype can be used in the Team app usability study.
View the Team App
Usability study: parameters
Study type:
Unmoderated Usability Study
Location:
Remote (participants will go through the study in their own homes/workplaces)
Participants:
Participants are professionals either working from home or from remote locations who have to work with several people in their day to day operations
Length:
Each session will be of 30 mins - 45 mins
Usability study: findings (Round 1)
Insert a one to two sentence introduction to the findings shared below.
1
Users found the the logging in an getting access process smooth
Finding
2
Finding
Finding
3
Users found it difficult to navigate through the features
Users found it difficult to share the meet link in media apps
Usability study: findings (Round 2)
Insert a one to two sentence introduction to the findings shared below.
1
Users were overwhelmed with the options on the meeting screen at once
Finding
2
Finding
Users struggled with payment options
Refining
the design
Mockups
Early designs allowed for some customization, but after the usability studies the design was revised so users see all the available options when they first land on the home screen.
Mockup 1 before
Mockup 1 after
Before usability study
After usability study
Mockups
The second usability study revealed frustration with finding the contact info. In order to reduce the confusion, I added little more white space and emphasized on the color to separate action buttons.
Mockup 2 before
Mockup 2 after
Before usability study
After usability study
Mockups
High-fidelity�prototype
The final high-fidelity prototype presented cleaner user flow.
View the Team App
Screenshot of prototype with connections or prototype GIF
Accessibility considerations
1
The gradients used are in accordance with Gestalt’s Principle.
2
All the action buttons have logos in them for better clarity to the user.
3
Different action buttons have different colors to simplify the user flow.
Going forward
Takeaways
Impact:
The website defines a journey that is very emotional and almost feels personal. Designing this website I came accross people having different opinions and perspectives about something that is not given emphasis on a day to day life.
What I learned:
I am grateful to the things I learned in this duration which includes, empathy, overcoming biases, listening to peoples opinions and observation, not falling in love with my designs and making chaanges on the go.
Next steps
1
I would like this app to include features for regions having poor connectivity and low bandwidth
2
I would also like to include a quick reviwe button so users can review everything they have in the storage
3
Changing the colour schemes and simplifying the user flow to keep up with the latest trends.
Let’s connect!
Thank you for your time reviewing my work on Team App. If you want to get in touch with me, my contact information is attached below.
Shoot me an e-mail bhadraabhigyan@gmail.com
Thank you!