University of Sheffield COM+ App.

Following a user-focused approach, we kicked off the project by facilitating a full day workshop at the University of Sheffield, involving our main users of the app: students from the Department of Computer Science. Detailed personas were collaboratively created ensuring that the app would meet the needs of every type of student such as undergraduates, postgraduates and international students, interested in attending the events.

Once these were created, together we mapped the user journeys of each persona to visualise and identify how and where users would interact with the app, providing a shared understanding of how the app could work. By doing so, this then enabled us to sketch our own ideas for how the app might look and function on paper. Through sharing and discussing each other's ideas this encouraged the group to refine design ideas by taking the best features and functionality from individual sketch designs. This exercise provided us with a detailed insight into the users’ expectations of the app and a crucial starting point for the prototype design.

The user research highlighted that gamification (i.e. the application of typical elements of game playing to other areas of activity) could bolster attendance at events. So we designed a prototype that incorporated a gamification element. The user would collect points by attending events which then fed into a ranking system. Each rank would offer a collectible digital badge, and an incentive (e.g. a free coffee or discount).

We then organised a focus group of computer science students to test our prototype. The aim of the focus group was to find any issues with the design. The students involved questioned the gamification and highlighted functions that they did not consider useful. The students found that the gamification distracted them from the real benefits of the events. Further feedback from the students found that the design also needed a clearer focus on the event information as students have a lot of activities competing for their attention.

Our next design removed the gamified scheme and pushed the focus on clear content. The new aim was to improve legibility of the information so that it can be quickly understood. We focused on the typography (i.e. the art or procedure of arranging type) to help present information. Creating a strong, consistent typography hierarchy (e.g. headlines, body-text, small-text) created a visual shortcut for the user to read faster. To achieve the hierarchy we used a modular scale (a sequence of numbers that relate to one another). First we set a base-font (this is the body-text but can be the dominant font in your design) and used the modular scale to define the other sizes.

Rhythm, in this context, is how a user's reading flows. Aspects such as too many words per line, tight spacing and many differing fonts can affect the users ability to read. So we made sure that our new design:

This consisted of internal and external research with users and other stakeholders. We used qualitative and quantitative methods, primarily in depth interviews and surveys.

• Restricts 10–13 words per line at most
• Check that visual cues are consistent and contrast, so that they are easy to pick up
• Look at the spacing between lines to ensure they aren't so big that people get lost at the end of a line

Having decided that COM+ would be a mobile app, we needed it to be available on both Android and iOS to target as wide an audience as possible. Rather than write native apps for each platform, we opted to build a single app using React Native and Expo. This allowed us to write code that could easily be built and deployed to each platform.

For the admin web app, we used React as this aligned well with the technology used for the mobile app. One of the benefits of using React across all apps was that we were able to more easily share common code, further reducing the amount of duplicated work.

To drive the backend data for the apps, we built a Spring Boot REST API written in Kotlin. We automated our deployments to AWS Our web applications are automatically deployed to AWS using a variety of its services such as Elastic Beanstalk, S3 and RDS. Following industry best practices, we managed our infrastructure as code via Terraform.

We used the following tools and technology to build the app:

• React Native, Expo - Frontend mobile app
• React - Frontend admin web app
• Spring Boot - Backend REST API
• TypeScript, Kotlin - Languages
• AWS - Hosting
• Terraform - Infrastructure as code

After three months of hard work by the team, we successfully released COM+ to the Play Store and App Store in June 2020. The project was a valuable learning experience, that allowed our team to get to grips with mobile app development and a variety of new technologies. Finally, collaborating with the University of Sheffield’s Department of Computer Science was a pleasure, Professor Guy Brown and his team were great!

In late 2021, the department of Computer Science at the University of Sheffield identified a number of updates and changes they wanted to make to the Com+ App.

We were more than happy to help in improving the app further. Our enhancement work involved; upgrading the web and mobile app, creating the function for online and hybrid events (In-person and online), and building the functionality to create announcements in the admin web app and display them in a modal or as push notifications on the mobile app.

In addition to this, we also improved upon the branding by applying a new colour scheme and designing a new and improved logo.