How we revamped our Team Page

Never forget your core

Nipun Vashistha
SDSLabs
Published in
6 min readSep 3, 2018

--

Those of you not knowing, SDSLabs stands for Software Development Section Laboratories. We are a student run technical group.

Recently, I redesigned our team page to give it an experience and represent the organisation’s core more clearly. In this article I have tried to maintain parallels between designing any product in general and the idea behind this redesign.

We at SDSLabs, since our inception, have constantly tried to innovate and come up with ideas that could make lives of students at IITR easy, and we have come a long way since the beginning. But there is always one thing that has remained constant throughout the journey, the people. The amazing amalgamation of designers and developers in the lab has always been reflected in the products we have delivered.

Why do we need a team page?

  1. Team pages helps to build trust with your audience

For any organisation, building a personal connection with the audience is very important. A team page adds a human touch to the organisation, enabling the user to associate people to an organisation. The user, then, does not feel that he is simply interacting with lines of code. And when the audience is mainly college students, who always strive for a personal relationship instead of a professional one, it is highly beneficial to add these steps towards a mutually trusting relationship.

2. Team is the most integral part of an organisation

Any organization is run by its people. This makes it important to give them due credit. However, most organizations are about the products they build. If their products die, the organisation dies. SDSLabs, on the other hand, is all about the people behind it. We do not tell the world how good our products are, but how good our people are to have been capable of creating those. This makes having a team page a priority.

But why redesign if it already exists?

We already have a team page. It shows our members, give their details, links to their social profiles. It serves its purpose well. So why did we need a redesign?
For SDSLabs, its core value lies within its team, the designers and developers, who work together to ideate and build new products. Moreover, the creation of a strong alumni base over time, who are now working with some of the major corporations around the world, necessitates giving them due focus.

So, to represent our core values and the structure of our team in a very clear manner, and adding an experience to it for the users visiting it, we needed a redesign.

How we did it

No design is absolutely perfect.

Every product that designers design has to meet some user goals and must solve, as much possible, the problems that users might face. For this, it must be ensured that every design task goes through certain steps for the best possible form of product to get shipped, which is called a Design Process. At SDSLabs too, every product goes through a standard design process, which might vary sometimes according to kind of product we are shipping.

Design Process at SDSLabs

Discover

Define

Ideate

Ship

Iterate and find problems

These five steps are what defines our design process. We research and discover, define the features and conceptualize everything, ideate, and find the best possible design solutions, ship our product within our team to gather feedback, iterate on it and find more problems with the current design, and we keep iterating and shipping till we get the best possible and feasible solution to the design task.

Discovery

In UX design, discovery or research is the first step towards solving any relevant problem or narrowing down to the right problem. A designer’s job is to understand the users, understand the organisation you’re working for, in order to create something. There are many methods of design research; it mostly depends on the the product you are working on to decide which research methods you should opt for or which ones should be prioritised.

Primary and Secondary research methods are useful to create something from scratch, whereas Evaluative and Exploratory research methods are used to ensure the usability of a product. Primary research is concerned with understanding your user with different methods to further make mental and conceptual models. Secondary research methods are about gathering information from various sources to support the context behind your design and the choices you made.

In this redesign, we needed to find the problems in the old team page, and to think of any additional features we could introduce or redundant ones we could remove.

Old Team Page of SDSLabs

The old team page consisted of a tile arrangement of the member profiles, whose order used to change every time you revisited the site. A major problem with this team page was that it did not show the structure of our team in the correct way. The role of a person could not be inferred without significant effort that involved visiting individual profiles. The alumni, which are still an integral part of our organisation, were missing too. The name of each member, and links to their social media profiles were displayed on hovering, but they were not prominent enough. So we listed down what do we need in our new redesign of the team page. We needed a team page that could:

  1. Represent our core, our team structure, correctly.
  2. Differentiate between the developers and designers, yet binding them.
  3. Show profiles of our alumni base, where they are located, and what they are doing after passing out of college.
  4. Be more interactive for the visiting users.
  5. Show names and social media profiles prominently enough.

Define

After noting down what we wanted with our page, we needed to define things conceptually. We needed to structure exactly what components we required in the page.

List of the main components:

  1. A landing page, defining the structure of the organisation
  2. Separate sections for designer and developer member profiles
  3. A section displaying how the alumni are located globally
  4. A dedicated alumni member profile page

Shipping and Iterating

As stated previously, “No design is absolutely perfect.”. Now, how do we reach the best of our product? We take constructive feedback and iterate.

Effective feedback, both positive and negative, is one of the most essential and underrated parts of designing any product. It is important for humans to know our mistakes and, in response, to change. It helps us to be a better designer and to create better products.

After the designs were completed, we posted the initial iterations on our internal network to both designers and developers, to gather feedback and find what problems does the current design have, and to rule out any complications that might come up during the development phase of the product.

Initial Iterations

Final Designs and Prototype

After multiple iterations and design meetings, it took us a month to finally deploy this new team page.

Final Prototype

--

--