Last blog post

Design Process

This is a picture of our different design phases that we went through during our project. As one can see we had a quite primitive sketch in the beginning where we had a starting menu interface which is not presented in this picture. From this first idea we quickly decided that this menu wasn’t such a good idea, so we remade the design and changed the starting interface to the bubble interface, which can be seen in the second image. The argument we have for this change is that we think that the bubble interface is the main feature of the application so it should be presented directly for the user.

At this point the design didn’t look so made for an iPhone platform, so we thought to ourselves about what we could alter to make it more realistic. In the end, we added a menu banner at the bottom which is some sort of standard in many iPhone apps. Later on we added a banner at the top as well as working through the design of our other main parts of the concept which can be seen in our prototype video post.
During our think-Alouds we received feedback about the bubble interface and, more specific, the bubbles themselves. The bubbles where not so intuitive in their design. The users didn’t know what to do with them and the icons presented inside the bubbles wasn’t clear at all. So in phase 5 we changed the design completely and presented text based information in coloured bubbles, instead of icons. This design solution is both clearer and cleaner and the user receives relevant information with just a glance at the screen. It was a difficult choice to decide what the colours would mean and represent, and after a lot of discussion and critique from our exercise group we decided that the colours, for now, would represent when the starting time for each group is due. We settled on three colours: Red (the group is due soon), Blue (the group is due far from present time) and Green (the group is due somewhere in between red and blue).

At the point that we are at now, we added another button in the bottom menu, and added icons instead of text based buttons on the top banner.

Another design choice that we made is that the number of bubbles presented is restricted to seven, this choice was based on Hicks’ Law. The user can, if he/she wants to, slide the screen to the left to get a new set of click-able bubbles.

Final Design

This is the design that we landed in in the end:

How has the work in the group been?

We all knew each other before the project started so we didn´t have to go through the time consuming phase of getting to know each other.
A thing that has benefited the group is that we all had about the same idea of how ambitious we wanted to be with the project. The level of ambition has been pretty high and we have all been wanting to get a good result with the project. That made us put down quite a lot of time and energy to make a good looking application. We decided to focus both on design and functionality but in the end it seems like the app became more design focused. From this we learnt that fine tuning your final design is very time consuming and there are always things that you can improve when it comes to the design.
From the beginning we wanted the app to be user-friendly and easy to interact with and this was also something that we all agreed upon early in the project.

A challenge that we had in the group was that we all had different views in our heads of what our final design was going to look like. It wasn't until we made a prototype that we realised this and it became clear that we had different ideas and views on how our design was going to look like. By making the prototype we could put together our different views and come up with a design that we all agreed upon.

Another challenge that we had was avoiding the genius-design. We created our design mostly based on our own ideas and perspectives and this became particularly clear when we conducted the thinkalouds. It’s difficult to design without using the genius design. Things that seemed obvious to us as creators weren´t always as obvious for the users.

What have we learned

From the reading seminars we got the basic knowledge of what guidelines already exists in the human-computer interaction field. This helped us design our prototype in a way that would make it user friendly. From our design process and the lectures we learned how to combine this knowledge with our own ideas and thoughts in our journey from creating a target group and personas to present a final design and prototype.

From the exercises we learned a lot about presenting our work in front of others who weren’t as familiar with our concept as we were. We believe that the greatest lesson of them all comes from working together in a group and the challenges that follow. We have learned how to work together in a group with a given task and how to keep the process moving forward. We often had to compromise since we didn't always agree on different matters. We believe this was a good thing since that's how working in groups works in the real world.

The importance of setting up a good communication channel to communicate through is also an important key for the group to succeed in it’s goals. We think that we’ve had good communication, throughout the project, but there is always room for improvement!

Evaluation from other groups

The main critique we've got from other groups was that it was hard to get an easy overview of the available bubbles in the interface, especially if you have many bubbles. Although we made efforts to change this, both we and the other groups agree that this was not fixed for the final presentation (when we had our final critique session). But we got the excellent feedback that maybe you could slide easily between groups of bubbles instead of throwing away bubbles to get new ones.

Video of our prototype

Group meetings 5/11 and 6/11

Thinkalouds
We all did our think-alouds separately and let different people test our prototype and give feedback on what they thought about it. We all found it quite challenging to be a quiet observer while somebody else was testing the prototype and we all had to focus hard to not give help or advice to the person doing the testing.

After doing the thinkaloud sessions separately we all gathered and discussed our conclusions in the group. We could see a few similarities in the feedback that we all got but there were also remarks that not all of the testers had thought about.
The most common remark was that our bubble interface is hard to understand and not so clear. The testers thought that it wasn´t entirely clear what each bubble contains. It is hard to get a good view of a bubble if you only see an image of a museum on the bubble. It might be more clear to have the name of the museum as text for an example. We all agree about this remark and it is our main focus when re-designing.

Another thing that some users pointed out during the think-alouds was that it was hard to navigate through the acquaintances part of our app, though some of our testers found it very intuitive and navigated through it quite effectively. Some found that it was hard to know wether the people under my acquaintances were the users acquaintances or people that could be added as acquaintances. We decided to label that window "My acquaintances" so this would be clear to future users. There were a few other parts of the app that were difficult to navigate through like finding the chat in a joined group and navigating in the “my bubbles” section.

One tester thought that all the confirmation-popups after making an action (for example creating a bubble) were unnecessary and that it can be irritating for the experienced user to always have to confirm your actions. This was something that only one of the testers thought about but we think that it's certainly a valid point.

Another user gave us the feedback that the tutorial for the app could be displayed before the user registers a profile instead of afterwards so that the user can get an idea of how the app works before deciding to create an account.

We all agree that the think-aloud sessions have been very useful and that we have gotten some great feedback from it. We realise more and more that we have designed our prototype using the genius-design mindset. We want the app to be as user-friendly as possible and we want it to be easy to interact with. We are going to use all the feedback that we got from the thinkalouds to make our app more intuitive for the user. We have already implemented some changes to make the bubble interface more straightforward and intuitive. We've limited the number of bubbles on the group screen to be seven, according to the essay “the magical number seven, plus or minus two” by George Miller which states that the human brain has a hard time processing more than seven elements at a time. We have also changed the appearance on the bubbles to make it more clear what the bubbles contain and focused more on using icons instead of text. Another change that we have made is that we have added another element to the menu to make it easier to navigate through the app.

                                       New interface                    Before the thinkalouds

To conclude we've included some of the strong and weak points of our app.

STRONG POINTS

1. The users have a lot of power over how they want to make the visits, so they don't feel restricted.
2. It's a cool and easy way to meet new people.
3. You learn new things both from visiting the museum and from meeting new people
4. The layout is familiar and has similarities with other popular apps, so it's easy to use.
5. It's easy to use the app to find new museums in the area and you can find relevant information about the museums.

WEAK POINTS
1. The solution is not optimal for our main persona and our target group (we have deviated a bit from their requirements)
2. The solution demands a pretty high amount of people actively using the app for it to work properly.
3. It demands a certain form of social commitment to be used properly. There may be a too high social threshold for some people.
4. Some people may not return to the app after using it a couple of times. Apart from meeting new people and interacting with them, there isn't that much value to be had.

Group meeting 3/11

Since last time we've continued to work separately with the design of different aspects of the app following some main guidelines we worked out together. Today we had a long session with all members present were we all sat down nearly completed our click-able prototype of Bubble. Based on our individual work, our thoughts and the feedback from our fellow group B5, we've compromised and come up with an interface and lay-out that we all can agree on. For example, there is now a consistent banner on the app that helps the user navigate. We've continued to work on consistency in the app in how the user navigates in the app.

We will soon test our prototype on users (think-aloud) that never have been in contact or heard of Bubble. By observing and taking notes based on how they experience our prototype and how they navigate through the interface as a first time user, we'll obtain vital data on how to perfect our app.

The following days we'll complete our think-aloud's and together discuss if there have been any patterns or issues that multiple users have shown and what we can learn from that.

Here are some screenshots of what a profile will look like.           

We redesigned the group interface and added a banner at the top.

Group meeting 30/10

Today only Mathias, Anton and Emil could attend the meeting.

Since last time we've worked separately with the design of different aspects of the app following some main guidelines we worked out together. This is the first meeting since, and since the deadline for these separate designs has not yet run out, only Mathias and Emil could show their designs. We decided that we could work from them together to flesh out our design even more before designing the last bits of the app.

Right now we're focusing mainly on the interface and the layout of the app, we chose to work mainly in the mockup-program called Balsamiq.

We showed each other our thoughts on the interface and layout for the different windows of the app. We're designing for the iPhone platform and try to stay true to the standard conventions in designing for that platform.

We've worked hard on enforcing consistency in the app, especially in how the user navigates in the app, where buttons are placed and what they do as well as keep a uniform color scheme throughout.

Another important aspect we've worked on is the main flow of the app, and much thought has been put into response when interacting with the app so the user will always feel like the app is responding to every user decision.

During the meeting we discussed and reinvented the design we had largely according to our own experiences of what makes an app good to interact with and with motivations from Fitts´s Law to make interaction as effecient as possible.

We also decided to do a small evaluation before our "think-aloud", so we used the Heuristic evaluation method to test our current design. We were positively suprised to see how many of the points we actually had considered during our main design process.

Here are some screenshots of parts of our mockup showing the initial tutorial/help and the main group interface. The second last picture demonstrates what happens when a bubble is pressed (it expands and shows an overview of relevant information about the group) and the last shows what happens if the expanded bubble is pressed, which is moving into a more detailed group view.

Group meeting 21/10

At the group meeting today we discussed the interface of our app. Emil had made sketches based on our drawings and previous discussions which are presented in the images here: 

We used these sketches as a base for our discussions of the interface and focused on how to make the interface easier, more understandable and relevant for our target group. With the new discussions and views we made new sketches using the same sketch program and after the meeting the interface sketches looked like this:

We wanted to streamline the experience for the user by making it super simple to reach the main function of our concept. That is why we got rid of the menus and instead direct the user to the group finding page. We also decided to have a fixed set of group bubbles of 3 different sizes (the bubble size indicates match with your personal interests) so that it wouldn´t clutter the screen. The reason for having a fixed amount of group bubbles is because Hick´s law states that it is easier to make a decision from a one set of bubbles rather than having several subsets of bubbles. We also decided not to make the bubbles to small so that it would be easier to navigate between them according to Fitts´s law.
To eliminate jumping in and out of bubbles all the time we made it possible for the user to quickly get an overview of the basic information about the group without proceeding to the group page. We worked really hard to make it user-friendly and easy to interact with.

Until the next meeting we decided for each group member to refine different parts of the interface that we feel aren´t finished.

Thoughts from seminar 2

Our findings from the group discussion was fore mostly that we would liked to been told to read chapter 6 (which was partly about brainstorming) before we had the exercise about brainstorming. We felt that this information was brought up a bit too late in the process. Therefore we didn’t have much use for this at this phase.

We further discussed chapters 7 and 8 which was about refinement and about prototyping your product. We are still in the refinement phase and we feel that the book gave us an idea of how to approach the rest of this phase. A flow chart, which was mentioned in this chapter is something that we found was a really helpful tool for the group to get a common picture of our product. We got a more clear idea of our concept.

The book also talked about low-fidelity and high-fidelity prototypes and we concluded that we, in our group, probably will use a low-fidelity prototype. The heuristic evaluation method will most likely be something to have in mind when prototyping our product. And this, we think, can also be useful in the iterative-design-prototyping-process.

Some questions we discussed was: “How does the relationship between developing and prototyping work and do we think it should be?”

• We concluded that you would like a technological foundation when you build an evolutionary prototype. Some design decisions might not be possible without technology. It certainly is a good idea to think about…!

Another question we discussed was: “How do you introduce a shift in technical paradigms?"

• Our discussion lead to some thoughts how much trust a user must have for a certain company to adapt the design innovations that they produce. We also talked about having a perspective where you know that a new innovation is better through an analytic point of view. This is something that the book called a superior design cause of the fact that it should work better. We also talked about how leading companies easily can force a new design on the user and that later on becomes a standard.