RESEARCH PHASE

Knowing what UX processes to use and when.

Up till now I'd had the luxury of being able to work through all of the UX processes in a controlled environment. For this project it was important we were able to identify which processes to use and when, so as to drive the project forward and achieve the sizeable task we had set ourselves. We were confident we could do it, we just needed to work agile, efficiently and trust in the UX process.

Client Interview

From our client interview we identified that the original brief was too broad, asking us to look at all in-game elements of the app, which was already fairly well developed.

By digging a little deeper, we saw that the website was not supporting the app in the way it should, and the client hadn't asked us to redesign it because she thought it wasn't possible in the time we had... Not to fear. UX is here!

Competitor Analysis

Our competitor analysis showed us that Karisma Kidz had a clear market opportunity. Very few companies were aimed at developing children's emotional intelligence, and the idea of sending real world tasks "to be done with mum" into the game itself was excellent and unique to their app. However we could also see how dated and confusing the current Karisma Kidz site was, something we would explore further in the heuristic review.

User Survey & Interviews

Straight away we knew we had to find out what parents wanted from an app for their children, and how they'd find information about them. As well as posting our survey on social media, I managed to interview an expert in the field of Learning through play, who kindly got our survey circulated through a network of nurseries, getting over 100 replies. I also interviewed a Headmaster of a leading Nursery and Prep school, as well as lots of parents.

What we concluded

The karisma Kidz website was what we would focus on improving. The company's philosophy and message behind the app were completely lost on their current site. With many people interviewed, when shown the site, not even realising that the company made an app. The site was too business orientated and needed to be made more user centric.

Heuristic Review

By looking at the current site and asking people to tell us what they thought, we were able to spot parts we should keep or improve upon, and others we should lose altogether. It's not always easy telling someone what is wrong with their product but when it is coming from users it is harder to take offence, and instead reassures you that you are moving in the right direction.

Getting inside the head of our users is very important. Ask "why do you do it like that?", followed by the five W's: why, why, why, why and why? Soon we start to break down the task and see where the user's pain points lie. If we identify these we know what to improve and how to make the user's experience as enjoyable as possible. Collating all the information you collect from various interviews and survey results into visual representations allows you to see the trends and keep your findings in the front of your mind.

Task Analysis, User Flows and User Journeys

What we learned...

The most interesting takeaway from our research was seeing how, even though 89% of parents were very interested in what the Karisma Kidz app was offering, they were the least known out of all their competitors. We also found that the current site was so bad at getting across their message and so overly complicated, that all people that visited the site would 'crash out' within just a few clicks or seconds.

DESIGN PHASE

As we entered week two, a line was drawn under the research and we now moved into the second sprint: the design phase.

Our main goal was to redesign the website so that it championed the app and clearly promoted the key messages and intentions of the company. The look and feel of their current site was seen as suitable for a children's app but could be improved upon greatly. The content of the previous design was seen by many as far to childish, considering the site was actually aimed at the parents rather than the children that would use the app. We needed to find a balance between the two.

Design Studio & Mash Up

We carried out a design studio at the BBC with the client and her development team to identify the main features and content they wanted to appear on the homepage. We used the MoSCoW method to prioritise the various features, narrowing down what Must, Should, Could and Won't be on the homepage. From there we started quick rounds of sketching and critiquing. Initially met by the client with the common "but I can't draw" reaction. But design studios are all inclusive, the rougher the sketches the better, and minutes later there was no stopping them.

When the two rounds of sketching were over, and everyone's designs had been critiqued, we returned to HQ to cherry pick the best design ideas and compile them into one master design. The homepage was now taking shape and with this outline of what was to feature on it, I was able to make a paper prototype. Now we could start testing how the content should appear and in what order.

Usability Testing

Many rounds of user testing were needed. Not only to test the homepage we had created from the design studio, but also for all the other pages of the site. The original site had far too many pages and because of that, information was 'hidden away' and difficult to find. We condensed the whole site into just six main pages, taking all of the features and content that the client wanted and ordering it in a logical and intuitive way. This would be tested to confirm the navigation of the site made sense and gave a great user experience.

Paper Prototypes

I made the paper prototype modular. That way we were able to test various iterations of the homepage, quickly and efficiently. During the design studio we found that all stakeholders wanted a demo of the app, and they all wanted it to be at the very top of the page. However, through testing we found that people were actually put off by this, feeling they were being forced to watch a video before knowing anything about what it was they were watching. Again, I saw the ability of the UX process to give great insights you might not expect. Breaking assumptions and convincing stakeholders to go against what they wanted at the same time.

Wireframes

Once the paper prototypes had been sufficiently tested we moved to wireframes. We continued to test these, with over 50 tests carried out over the whole design process.

The wireframes were still at a low fidelity as we were not trying to test the 'look and feel' of the site, but more the screen flow and taxonomy of the navigation etc. We just wanted to confirm that users understood where they were and where they were going. Too high fidelity at this stage can 'distract' people from the ask at hand.

Test & Iterate

By the end of the testing we had not only found out the best layout and organisation of the site but also, as the wireframes became more and more high fidelity, were able to ask questions to hear opinions regarding the look and feel. These insights are crucial. One person saying something is an opinion. Two is a coincidence. Three is a pattern!! When a pattern starts to appear you can use this to guide your design, safe in the knowledge that users will like it.

THE PROTOTYPE

High Fidelity Prototype

After two week of hard work, we were proud to present our high fidelity clickable prototype to the client. She was more than pleased, even getting a bit emotional, seeing how well we had captured her vision and how passionate we had all become about her mission. They are going live with our design as soon as they can.

Setting the Scene

Another way to visually understand and represent your core users is by making Personas and Scenarios. By now we have gathered a huge amount of valuable information. The job of the UX Designer is to distill it all down into a usable tool. That will allow us to shape our design and give us empathy with the user, helping us truly understand the problems they face and how we can best improve them.

As an illustrator I like to draw the scenarios and persona elements. I feel this makes your personas and scenarios less likely to become clichés in your mind, and adds a degree of freedom to what they represent.

KARISMA KIDZ CASE STUDY

Two weeks. A real life client. Working in an agile team.
Helping our client's business develop was a great pleasure to be a part of.

"It was great working with the team.What they produced in the time they had was remarkable. We can't wait to go live with the new site!"

- Erika Brodnock, CEO Karisma Kidz