Case study: GuildTales (UI phase)
GuildTales is a mobile app designed to help young adults overcome social anxiety in a post-pandemic world.
Following on from the UX phase (which you can read about here), it was time to breathe some life into the concept of re-learning social skills and empowering users in a gamified, rewarding way.
Find out more about the quest for confidence below the break!
I took on the UI design stage solo, simply because it made more sense for me to do so. I’d put together the wireframes in the UX phase myself, so I was already quite intimately tied with the idea of GuildTales. However, at each step of the UI design process I was able to gather feedback from my mentor and from other students as we completed practice exercises during our lessons.
GuildTales is the name of my capstone project which I’ve been working on for a bootcamp course with Ravensbourne University London. Simply put, it is the research and design for a mobile app aimed at combating social anxiety through the use of gamification.
With the UX phase complete, I’d like to take you through my UI design process and what that produced for my final MVP.
UI Research
Before doing any sketching or jumping into Figma, I gave myself time to digest everything that had come out of the UX stage. This included user research, the problem statement, the wireframes and interactive prototype.
I used a Design Inception Worksheet to help me break down this multitude of information into manageable chunks, not only for myself but to craft a cohesive visual blueprint for the product.
The first and most important step of this worksheet was to decide what the mood of GuildTales should be. What feelings do we want to invoke, both collectively and at individual checkpoints within the app? This is where my passion for emotional design comes in handy.
Looking back at the user research, I mentioned that we didn’t want to use methods such as focus groups because we could be dealing with vulnerable people. In this case, when I refer to vulnerable people, I mean emotionally fragile individuals. As a designer, this means that I have to be careful, because creating the wrong atmosphere would be more likely to cause the user to completely withdraw, or flee, from the experience as opposed to giving it a second chance.
I want to give people hope in times of despair, by making them excited for the future and encouraging them to believe that they have control over that future. So, the keywords I used for the mood were: encouraging, fun, energetic, exciting, motivational, confident.
So now I had to consider the remaining areas of the GuildTales visual language. For colour and shape, I wanted to keep things more gentle, positive and encouraging, using words like simple, smooth, bright and warm. The space and movement were more to give a sense of adventure: explorative, free, mysterious and bouncy.
Now onto what I personally found the most difficult part of the design inception: creating a moodboard. It wasn’t that putting together a moodboard in itself was challenging, or even finding content. It was finding the right content that was hard to get right. From midway through the UX stage I’ve had a very specific idea in my head of how I want GuildTales to be presented. While I was curating inspiration that I’d extracted from a combination of real-world sources and digital (in particular Unsplash and Pexels), I had easy access to images that matched my keyword searches (e.g. positive, achievement). The only way I can explain it is, I found the images to be too direct, too literal. I really wanted to have something more abstract to show. Maybe it was me trying to go too far, or maybe my instincts were correct, but eventually I settled on two overarching messages from my collection which I made into two initial moodboards on Miro.
In addition, I undertook some desk research to back up my choices, for both now and later when I would begin the actual UI design. I gathered further inspiration for my designs via websites like Codepen and Dribbble, but I also targeted some particular concepts I wanted to learn more about.
First of all, I learned about how to approach the creation of a mascot or recurring character. For example, mascots enhance communication throughout your app, which I think is very important for someone who’s struggling. This is a big reason why I chose to create the chatbot — I wanted the mascot to be someone, or something, to reach out to in times of turmoil. Also, characters are more likely to trigger a heightened emotional response. From a branding perspective, the mascot provides cohesiveness and recognisability, setting the stage for long-term image development. By that, I mean keeping the GuildTales brand consistent but adaptable to changing needs over time, which will continue to keep the user experience refreshing but familiar. Maintaining familiarity is especially important with GuildTales as the app will be a sanctuary for those who need a place to connect.
For the moodboards, I honed in on two different messages: one to represent being lost and finding your way, the other for motivation and celebrating success. Both had one common message: there is hope. You can get to where you want to be, if you make the right choices.
Style Tiles
Each initial style tile was built in the image of the corresponding mood board: the first somewhere cosy and inviting that feels like home. The other, an exciting fantasy world that makes you want to join the adventure. The challenge was deciding if I wanted a calming, low energy atmosphere for GuildTales, or a high energy, exciting one. Referring back to my design inception worksheet, I did use the words “energetic”, “fast”, and “exciting”, but I wanted to get a second pair of eyes to get an outside perspective.
I encouraged my significant other to take a look at what I’d been working on and give an honest review. I thought I’d go with a non-designer’s lense first to get an idea of the visecral reaction I’d be evoking. His opinion was that both moodboards contained bright colours which instantly got his attention and made him curious and wanting answers. So, the scales were tipping towards the “wow” factor, but I still had the designer’s advice to listen to.
I got my moodboards and style tiles thoroughly critiqued by my mentor, Elia. Elia has many years as a professional designer as well as being a teacher, so I humbly accepted each critique willingly. At all stages of my UI design journey, I was hungry for knowledge to unlock my best creative potential in what little time I had, but I also wanted to keep my designs authentic so I carefully chose which feedback to act on in the moment. In the end, I kept my moodboards as they were, but I created a third style tile to build upon the fantasy RPG theme I had going from the beginning. Here’s the result:
Design Process
Thank goodness I was already aware of atomic design principles back in the UX stage — it made my life so much easier when revisiting my Figma file to prepare for the UI design! There were still many, many elements I had to add, remove and convert to components, but at least I didn’t have to start from scratch.
I won’t explain the concept of atomic design here, but I’ll give you an overview of my personal design system for GuildTales:
- Atoms include buttons, modal views and message bubbles. Generally these are all using the primary colours of medium and pale orange. Overlays are in the secondary colour, green. The toolbar and other important placeholders and headers are in a regal red. The background for all screens is a pale “paper cream” colour.
- Molecules have a combination of green and cream or orange and cream. E.g. dropdown menus, deck picker overlay, quest cards and reward cards.
- As mentioned in my previous UX case study for GuildTales, each screen is considered an organism here.
I sourced all my full-colour icons and images from Svg Repo, a fantastic repository of royalty-free vector icons perfect for UI design. There’s no need to make an account — simple search, view the icon you want, right-click and copy the SVG image file and paste directly into Figma.
After giving everything some colour and replacing the old icons with full colour images, I had to re-wire the interactive prototype because inevitably, some parts had broken during the swap. I made sure to use microanimations at pivotal moments in the user journey. For example, when you first register you’ll see the potions floating up and down, as well as when you’re getting your quiz results. This floating projection of a fantasy world is something to provoke an air of mystery (what will happen when I enter this world?) and excitement (what is my place in this digital realm? where am I going?). While this gradually builds up suspense and wonder, animations such as the decreasing health bar when fighting a Boss, or the swipe reveal when claiming a Reward, provides instant gratification and mood boosting benefits.
Test Results
Whereas last time I ran in-person testing sessions using Figma Mirror to create as realistic a mobile experience as possible, sadly this time a face-to-face meeting was not possible.
Instead, I created a Google Forms worksheet for my testers to fill out as they used my interactive prototype presentation directly on Figma. My testing pool included one person who had previously tested my wireframes during the UX phase, and one person who had never seen the app before.
Overall the results were positive. There wasn’t much feedback about specific elements of the screens, but here is the most substantial snippet taken from my Google Forms responses:
“Its a good app, really promotes healthier living in a fun and interactive way, very reminiscent of pokemon go but I feel people would stick to this more as its marketed and themed for a group of people who play longer winded games like MMOs and Tabletop RPGs”
And here are comments on two specific areas — the onboarding process and Guild Space, respectively:
Easy to get through, maybe worth doing it by country rather than continent, as it will help when setting up events, and so people are likely to speak the same language.
easy to do. maybe worth having a separate spot where you put the video link.
There was also one verbal comment about the navigation menu in the Guild Space not making it clear that it leads to the cinema room.
So, in response I made some minor tweaks to the Guild Space and the drop-down menus in the onboarding journey. This was incredibly easy to do with Figma components.
Thank You!
I want to say a huge thank you once again to my mentor, Elia, for supporting my vision and guiding me at every step throughout my learning journey and design process. I also want to thank my fellow students Emily, Jess, Zaynob and Ben for offering me insightful feedback and sharing new perspectives with me along the way.
It felt good to flirt with my creative side; however, after some extensive soul searching, I realised that my destiny lies within the world of coding after all. It was a long, drawn-out case of impostor syndrome that caused me to seek out this UX/UI bootcamp, but I don’t regret it. I’ve learnt a tonne of valuable lessons, met some inspiring people, and my qualification actually helped land me the perfect role where I’ll be working on risk management software for the aviation industry and collaborating with UX designers on a huge product upgrade. I’ll have my work cut out for me to be sure, but don’t worry, I’ll still be sharing my madness on Medium in the form of a new account focused on a mix of UX and code.
Once again, you can view the full design file for GuildTales here.
