I am a principal-level UX designer, which is awesome because I love being involved in projects from the very start to finish.
I just love all areas of UX design, from talking to real people about their problems, to being creative and using problem solving skills to come up with dozens of ideas, to implementing them with my visual design skills.
In the following case studies I try to explain the process behind three projects from somewhat different areas of design: a web application, marketing website and a physical product. I hope to highlight that product design is about design thinking methods in whatever the medium or sector. It's about discovering problems and then solutions to those problems while staying grounded to business and tech requirements.
1 - User Centered Design in the Re-imagination of the Hibernia College VLE 2 - Accent Solutions: Using product design thinking in a web design project 3 - Town Tales game: Game design with a product design approach
1. User Centered Design in the Re-imagination of the Hibernia College VLE
One of the biggest projects I ever worked on. Hibernia College has had an ancient VLE (Virtual Learning Environment) with some parts of it older than 10 years. User experience is far from ideal, with confusing information architecture, a lot of cross-page linking and user journeys that go really deep. Not to mention the crucial mismatch of the real-world Academic Programme and the structure of the learning content inside the VLE.
I believe that we did brilliant work on improving the user experience within constraints of our CMS - Moodle. Too see what role I played in this project, please read on.
Hibernia College brought me in as a UX/UI designer, counting on my creativity and meticulous use of Design Thinking process and methods. Over the years I have developed my own hybrid process, something between the 4 stage Double Diamond and the Gamestorming 'Open > Explore > Close' methodologies. I usually divide my design projects into 3 phases: Research & analysis, Ideate and Testing & prototyping. I also always start with an Initialization phase or Strategy, as well as a Finalize phase for developer handoff.
In this strategy phase, I work with my stakeholders or team members on predicting some timelines, methods and activities that we could do and just kicking the project off.
Research & Analysis
First I had to analyze the current situation. But in order not to make educated guesses and leave thing to my intuition, I made a checklist of common UX/UI patterns and ticked them off by going over the VLE system. Some things were immediately clear to me, like the lack of breadcrumbs, deep and nested information architecture but with a mismatch to the actual Academic Programme of the College. The image here shows the old system and its UI. Time is cruel, isn't it. :)
Then I talked to a dozen students of the college via Zoom. I made some preparations with a checklist of questions, some possible flows to predict where the conversations might go. This obviously falls through when the interview starts, but it did come in handy. I gave the students some tasks to perform in the app, first just as if it was a regular day for them, and them some specific tasks to check my findings from the Heuristic analysis. The observations as always proved to be immensely useful, as I gained a lot of insight into how they use the platform and what do they expect it to do. It was time to move on after I started seeing patterns in their explanations and behaviors.
I wanted to see if we could learn something from the Matomo analytics installed on our system. Analytics apps can be tricky to get a grip of, but indeed, Matomo showed me that users spend most of the time in one of 3 places > Calendar, Studying content pages and Assessments. This was important insight as I believed this is a north star for our information architecture and navigation.
To help my colleagues and stakeholders, as well as myself, I created a mental model of various places and activities the students use in the app.
Once again, this is really helpful when starting to think about the information architecture.
I also made some 'as-is' user flows to show how the task flows were very long and with lots of confusing nodes - opportunities to get lost in the system. We needed to simplify this and make it more streamlined.
Shown in the image is just one of these flows for all of our locations in the system.
It was time to sort out our information architecture. This was arguably the worst part of the old system, and I knew that with the deep nesting of all the academic content this needed to be very clear and logical. Although because of the constraints of Moodle, we couldn't change this too much, I still wanted our developers to hide some unneccessary views and pages that come out of the box with Moodle.
Now it was time to start sketching the wireframes. And also use Figma to make some quick, more detailed ones. The first thing I went about was to implement a simple, straightforward navigation menu, in which I obviously put all the most important locations where the users spend most time. Everything else flows from these points.
New locations and features
As I said, we made some completely new locations for users inside the IA/flows. We added the completely new 'Study Now' page that serves as the home page. It shows all the modules that students' programmes consist of, thus reinforcing the match between the real world and our design. This didn't exist before, and I think it's the first time someone put this into a Moodle app.
Inside a learning module, we separated the learning content from all the additional tools, resources and assessments, that we put on top into the so called 'Module Hub'. We also presented the lessons as tabbed pages, to have the learning content in one page and represent the progress and passage of time. We also streamlined the calendar.
Moodle originally has tons of different icons, but from the students' point of view they don't care if something is a SCORM package or a Database. They care about the type of activity they would be having to perform. So we made new icons, more modern and flat and also combined all the activities from 15 types of icons into 5-7.
Just to illustrate, there were a lot ideas and playing with the very color scheme of our new system, choosing from all of our brand colors. But in the end we went with our primary blue colors, just a little lighter and fresher.
All in all, I believe my team and I did a fantastic job on re-designing the College VLE. All the testing with old and new students, our staff proved that people were amazed with how easy to use the system was. Things were easy to find, you could navigate to anywhere in a breeze, and it looked fresh and modern.
We presented our work at the Moodlemoot UK 2021 conference and we got equally positive feedback, all from the professionals who use and develop Moodle apps all year long. Well done team at Hibernia!
On to the next project!
2. Accent Solutions
I was approached by Accent Solutions, one of the leading Property Management agencies in Ireland. They wanted a totally new, fresh website.
They just recently updated the look and feel of their even more ancient-looking website, but besides visual design, all the content, user flow and storytelling remained the same. In short, they needed a whole UX rehaul. They complained that they almost never received inquiries from visitors on the website, so they were wondering what might be wrong with their previous websites.
As always, I divide my UX projects into 3 phases; Research & analysis, Ideation and Testing & prototyping. Then I go to UI work which follows the same phases, but usually much more stramlined and linear. Things overlap and I always need to go back and forth, but at least I have a structure of the project down so that makes things easier.
Accent's first and foremost goal was not only to make the website look more modern and professional, but also to try to see why visitors weren't contacting with them. They also wanted to present themselves as a modern, sleek company through their website's design.
Research & Analysis
From looking at Accent's both the ancient website as well as the new polished one, a few things were super clear to me at once. First, the website only talks about them, the Accent Solutions. It's 'me', 'me', 'me'. There is nothing about the users and their problems. In relation to that, there is no story or flow to the website. It just starts naming their services, along with some random, technical, 'inspiring' sentences. That actually don't mean anything. Also there are obvious bugs like the navigation not showing as soon as you start scrolling. Okay, writing all of this down.
Next, stakeholder interviews!.
Talking to my clients, I told them about my observations, and they couldn't agree more. They did feel like their website was too impersonal, as if they should talk more about how their services help users. And obviously they really wanted a sleeker look, because they fear the previous websites make them look cheap and unprofessional. During this meeting they also mentioned that they would really love to have one subpage dedicated to various resources their clients might need, for example, some of their clients are hospitals and they participate in an energy savings competition. From time to time they want to showcase their results on TV screens throughout the hospital, so it would be really handy if they could just type in the url of Accent's website where the data is fresh and updated. That would be a nice touch.
Accent's website visitors are mainly from the private sector. They do have clients that come to them through the OPW, but most of the new clients are owners of companies and large properties that need to be managed.
Now it's time to take everything I learned from my client, all their needs, wishes and problems, and turn them into something tangible. Hopefully a smart website with a decent story that will intrigue users, showcase Accent's solutions and then invite users to click and contact them.
Since this a relatively simple website, constructing the sitemap was rather simple. Some things worth jotting down are that the main page is a long page. Of course, I think it would be easiest to put the new Resources page really visible on the Main Page, so that their clients can find the presentations and data they need without remembering the exact url.
Okay, so there were some obvious problems with their old websites, namely that they were talking only about themselves and also there was no flow to getting the users' attention, and then leading them to engage the call of action systems. That's why I sketched this flow:
I believe that the hero/heading should capture the attention and spark interest in the users. Old websites definitely lacked this quality. Next, we should have a flow of building their interest, first by getting them to self-identify with some of the problems we discovered in the research phase. We want to touch their emotions and get them involved. Next up, we take them further down the journey where users should now ask themselves if this really works, and how? We showcase some examples with social proof or real data. That's why here we use some of the succeses Accent's clients have achieved over the years. We want users to want the same for themselves! And then we tell them about our solutions to their problems, and those are our services. It would be best to name only a few so they don't get overwhelmed and explain briefly how each of these services will improve their lives. They can find out more details in the Services subpage. Immediately after that comes the call-to-action, in this case a fill-in form where users can address their problems and contact Accent. Voila! We have a nice flow that will take users from being interested, to self-identify with these same problems that Accent has so conveniently been solving for other users for years, and they will want to sign up.
Then it was time to make some actual wireframes...
Prototypes & Testing
We tested continuously with the team and stakeholders, as well as with several of their clients. Since this isn't really an application, testing was relatively simple and mostly about seeing if the users can find various parts of the website.
On to the UI design!
With the wireframes in place, now it was a matter of translating that into final, visual designs. I played a little with the main colors, I knew my client wanted their Green color to dominate, but I also tried some things with a bit more bluish-green color, with hopes it might look a bit more modern. After some iterations, we finally decided on the green design they liked, which I then applied to all of the subpages. To showcase what the webpage would look like on mobile devices, only the main page was enough to do that effectively.
And there you go folks, I believe we successfully used design thinking process and methods along with good old storytelling to capture the main problems our users had with the old website, and then through iteration we came up with some ideas for new, friendlier, more usable landing page which is a key to any good business.
3. Product design of a sightseeing game
This was a really dear personal project of mine. I wanted to make an inspirational and delightful game for travellers who visit my home town of Zagreb, Croatia.
I grew up here, I know every corner of Zagreb, so I wanted to share what would be a cool route to visit. But with a twist! The game is full of challenges that throw you into all kinds of unforgettable and unsuspected situations, where you meet people, learn about traditions, help others and most importantly have fun.
It would be my take on solving all those times when instead of having the time of your life, you are just feeling low-energy and don't know what to do.
Town Tales to the rescue!
Concept & Idea
OK, so I've had this idea for a long time - to make some kind of a mix of a tour and game for sightseeing. We all love travelling, but if we try to remember the best times of our lives, usually it was some kind of a spontaneous adventure, an event where we met some strangers, did some fun things for a while and that's it. So I wanted to recreate that, no more boring sightseeing where every building is the same, but where we aspire for more adventure with challenges that take tourists around my hometown of Zagreb.
Since this is a somewhat older project, my process back then followed the more usual Double Diamond 4-phase process: Strategy, Discovery, Design and Build sequences. I would first have to validate my ideas by talking to tourists in Zagreb, then see if any new opportunities for solving their problems arise, and then design a prototype, play-test it and proceed to final designs.
I knew my game had to be small, in a box that tourists could carry home. Nothing big, nothing fancy. Pure experience. Since this was a personal project of mine, that meant the budget was rather limited. That was okay, product that I had in mind was something like a small deck of cards with a map. Either way, it was time to go out and actually ask tourists what they really feel about Zagreb and what are some of their challenges.
I went out to the streets of Zagreb and started asking tourists some questions. General questions about traveling - what are they hoping for? What do they fear? Some specific questions - what they like about Zagreb, what they dislike about Zagreb. And so on. Based on their answers, I made some User Affinity Maps
These divide all the tourists into several categories like: Solo male traveler, solo female traveler, a couple, group of friends and elderly people. They all have different challenges and hopes when they travel. The most significat finding that also validated my thoughts was that they all love to do some mild sightseeing, walking around, learning a little about history, but as little as possible and that they all sometimes feel like they just didn't experience and learn about true local customs and people. I was onto something!
Turning Problems into Solutions
I took all the insights about tourists’ challenges and wishes, and started brainstorming how to turn those into solutions and features of the game. For example, people usually want to meet locals but find that somewhat difficult to do, so the game will consist of challenges that will encourage them to do so. They actually want to find out as little as possible about all the landmarks - so my challenges will be always somehow connected to a landmark where they will be played, so players can remember the fun acticity with the landmark. In the end, I divided the cards into 5 categories: Landmarks, Learn, Contribute, Fun and Special Cards. I figured if I want to help make the world a better place, it's best to start with my own products that promote good actions and thoughts.
Prototype & Testing
Friends to the rescue
Next was making hand-drawn simple cards with proposed challenges and testing them with my friends in the city. I wanted to make sure there was a right amount of challenges of every type: scary, mild, physical, conversational etc. Thankfully my friends were here for me so it was much easier to test the game a few times. My friend Nina learning to tie a Croatian invention - the tie, from the master.
The essential part of the game design were the illustrations - they needed to be joyful, cartoony and inspiring. Here is a part of my sketches.
And some finished cartoony illustrations, with vibrant colors and joyful character.
Final Designs and Print
From all the layouts I sketched in the Design phase, I chose one that made most sense to me and proceeded to make the final visual designs. I sent all the cards to the printer and one final thing was to check the colors of our demo prints.
And here is a finished delightful box with a lovely adventure game inside.
Thanks for reading!
Get in touch
If you'd like us to work together, please send me an email on the link below. Thanks for visiting!