top of page
Screenshot 2023-06-04 201929.jpg

SICSA Expert Finder

Methods - Sketching, Wireframing, UX workshops, Developer Collaboration, UI Design, Interaction Design, Accessibility, Colour Theory, Agile process, Style guide, Prototyping, Heuristic Evaluation, A/B Testing

Frame 63.png
Group 86.png

Brief

To redesign the website to make the experience more intuitive and accessible by keeping in mind all the back end functioning.

As there was great amount of data interconnected it was a difficult task to design an intuitive flow by keeping the back end in mind. ( 14 member-institutions across Scotland, comprising over 500 academics)

 

Three use cases:

1.  Academic to Academic

2.  For Students to search for a Mentor

3.  To showcase in software conferences

 

About SICSA Expert Finder

The SICSA (Scottish Informatics and Computer Science Alliance) Expert Finder is about finding an expert in a particular research field by searching through multiple options of topics, reading their work, searching them by name/ their university and getting their contact details.


Key Challenge

The current expert finder was confusing for the users as there were too many elements on a single page. Apart from the more detailed usability issues, the picture below explains the main short comings of the previous design.

Frame 80.png

Process

Group 88.png

Developer Collaboration

It took multiple meetings with the developers to understand what could be done and what not. Some designs had to discarded as the backend pipeline didn’t follow the same pattern as the design.

Some of the design suggestions weren’t seen as very important by the developers as the main deliverable was a MVP. One of the developers was of the opinion about user experience being secondary to a minimum viable product. I defended my design decisions by justifying the logic behind things and how user experience wasn’t different but a part of the MVP.

Sketching

Group 87.png

I sketched the ideas throughout the whole process before wireframing it.

 

 

This helped me think about the gaps and address it by discussing it with the developers before starting the design in Figma

There are multiple design iterations in this project.

To directly see the final design solution ' Click Here '

 Wireframes

Due to having multiple use case and having complex backend pipeline the first wireframes were created before conducting a UX workshop

UX Workshop

UX workshops were conducted with the client and rough wireframes were presented in the end. Through A/B Testing client's expectations were understood.

Wireframe 'A'

  • The flow was made intuitive by adding circles as per the interaction. Only one word was added in the first ‘ Main Topic Map’ to clearly indicate the topic, instead of having multiple words from the same topic on a circle.

  • The user could see the number of search results and had the option to add or unselect the topics

Wireframe 'B'

  • When going to the topic map again an option of a ‘+’ sign was to be added on the circles to make adding the topics in the initial selection easier and to make the function prominent.

  • All the features were same although the split screen was changed to a completely new page to accommodate the lengthier titles and names & making it easier to scan through everything

Challenges

  • The developers looked at the existing pipeline and after having a discussion it was concluded showing the direct result of the search input would have been difficult.

  • The developers suggested changing the existing backend code but were advised against it by the client and hence I needed to think of a different design.

Challenge

  • The client wanted to add the feature to search the topics based on the authors, this addition required changes in the search prompt.

Second Iteration

  • This time it was decided to prompt the user to select a particular topic in the first screen and then showing them the relevant results

Third Iteration

  • 'Search Author' option was added. Depending on the input given by the users the relevant circles were to be highlighted , guiding the users to select the flow.

Final Design

Challenges

  • The client came up with an additional use case where he said the academics themselves would search for their work through this map. There could be ego issues if their work was categorized as something else. eg. UI can also be termed by as visual communication. 

  • It was inappropriate to categorize words under a topic as per our understanding. While it was not possible to change the existing backend pipeline and make it recognize the relation between similar words

Fourth (Final) Iteration

  • Some major changes were made in the topic map flow. I along with the client and developers took a look at the original design again to understand how that covered all the use cases

  • The concerns about the clusters and the topics were discussed again and it was decided to select the middle word of each circle of a particular topic cluster to be added in a single circle.

  • Three stages were finalized - clusters, main topics, sub topics.

Group 86.png

In the original design, each cluster had multiple circles and each circle had a most relevant word in the middle. I took the middle words of these circles and added them to one circle

(i.e one whole cluster = one circle)

Desktop - 82.png

Limitations

  • Redesigning based on the existing backend pipeline was necessary

  • Due to taking into account all 3 use cases along with the academics' interests, we had to compromise on the look of the layout

  • As the requirement for the time being was of an MVP, other features to enhance the user experience couldn't be added.

Thank You for watching!
 

bottom of page