Reflections on the Wireframe and User Interface design process
From April to May, 2020, our User Engagement Team developed prototypes for the Shared Spaces service. Employing service design methodology, they developed journey maps and storyboards for each of our personas, using these to understand how people would come to know about and use Shared Spaces. From this understanding, they worked with Professor Lisa Birke to wireframe and develop the user interface for the app itself. We asked them to reflect on this process. Excerpts from their reflections are below.
For the past few months, I’ve been working with Shared Spaces’ User Engagement Team to design an Augmented Reality app focused on Saskatchewan art. For someone who lacked formal training in User Experience and User Interface design, this task felt a bit daunting. Luckily for the team, and myself, our Project Manager Michael prepped us with a crash course in service design; the emphasis was placed on people and relationships. The knowledge he provided was supplemented with insights gathered from months of community research.
During the process of designing the app, journey maps and blueprints were drawn out to theorise how people would come to find out about the app and use it. This facilitated a more in-depth look at how individuals would move through the app and what features they would be drawn to.
We wanted to do our best to understand the people that we were designing for and we worked directly with them to fully realize their needs and wants. It was fundamental to consider how this app could provide direct value to the relationships and community we wanted to help foster. The information concerning the needs of both rural and urban Saskatchewan communities provided a strong foundation for the team to work from.
We discussed our central goals for this project and referred back to them often to make sure our designs reflected them. One such goal was that the Shared Spaces app foster connections between galleries, artists, and art enthusiasts across Saskatchewan.
We needed to design an engaging app that was inclusive and accessible to everyone, fostered community, and provided an art experience that was unique from the traditional gallery.
Every week we would share our designs and discuss which elements we should develop further. We would collaborate by combining the ideas that best reflected the needs of our personas to get closer and closer to a final user interface. Referring to clear goals throughout the design process helped us keep Saskatchewan communities in mind while designing Shared Spaces.
Our design team came together to compile the different designs, picking the most effective features to create a more robust app that would have all our personas in mind. This was one of the most challenging aspects of the project. There were so many well thought out ideas that needed to be narrowed down to one precise plan. Each week we would meet to present, discuss and improve our design.
The next step was to design the aesthetics of the app; Lisa, a professor from the Department of Art and Art History, provided us with information on design aesthetics and storytelling.
Individually we created mood boards to visually present colours, fonts, icons, and patterns that could be worked into the app. Many different versions of style mock-ups were presented and each week the designs would be modified and narrowed down.
I decided to work with a minimalist theme, playing with off-white backgrounds and bright accent colours that could appeal to both my persona Stephanie and her grandson. I emphasized 3D qualities experimenting with drop shadows and gradients to express layers and dimension. This part of the process was particularly exciting as seeing each presentation brought a sense of life to the app. Again, each team member’s design was completely different and many smart ideas were presented. We were encouraged to work from one another, borrowing ideas and incorporating them into our work. We refined our designs as much as we possibly could, eventually selecting a final layout with a hierarchy of text and colour. These prototypes have now been passed on to the development team where they will be further refined.
The process of creating my own look for the app and looking at other group member ideas for layout has shown me the benefits of working as a team and the creativity that can come out of collaboration. There is always room for improvement through critique and building off ideas from each other. It was difficult to transition from the outlook of a user to a developer because you needed to think of what is best for the user and not what you think is best. Keeping in mind who this app is for and the five personas kept us on track when designing the layout.
It was very rewarding to see the difference between prototype #1 – which was a rough drawing – and the sleek, sophisticated presentation of the final prototype created in InDesign. Throughout this process, honest and critical team feedback was what I appreciated the most. It was always a nice surprise when another team member would incorporate something they saw in your design into their own.
Looking back at the extensive experience I gained within Shared Spaces, I have realised that there are certain guidelines to ensure a design is solid, which I did not have any previous knowledge of. There is a reason and logic behind every decision. The guidelines I have found to be key in the project are:
- Understand the problem,
- Explore as many ideas as we can through different people,
- Collect feedback from different perspective and apply those in the design, and
I think the most valuable part of this experience was working as part of this team and having a close relationship to our community.