Case study: How UX design supports ‘new’ tourism?
Part 2
I hope that this four-part article can provide beginners in UX design with some useful insights, and tips. In this special case study, I present my first mobile app design on my own; ‘Budapest Murals’ is an extended MVP for tourism. The main focus of the project was to practice prototyping with the software I had not used before. The polished UI was not among my targets. The operation framework that I set to myself as a limitation for the whole project including the full documentation (= YouTube video, Highlights on Behance, Case Study on Medium) was one month. I made all these for the first time, only the case study was an exception in a sense.
In every project, I intend to try out new things, software, processes. Among others, the novelty this time is that I highlighted the mistakes I made, the lessons learned, the key takeaways through the evolution of all functional building blocks of the prototype in part#3 and part#4 of this case study.
Prototyping
Structure
I arranged the user journey into five main sections which all includes well-separable blocks of functions as you see on the chart.
The proto is how these building blocks turned into specific features and screens. The carpet-like polished look of the prototype you see everywhere. ack to the former one, dark grey shows the key building blocks of this project. (Though here I put tour assistant to the features, the better functional grouping is perhaps the above.)
The structure is linear, with the exception of the mural’s main screen and related action screens that are fed back to the main. It is due to the value proposition, and the business model imagined of the app, and it seems logical.
Typically, one operating interaction is shown here screen by screen which ensures the cognitive walkthrough for the user. Otherwise, it would look too dense.
Scrolling down, you can see the real-life with the screens ‘abandoned. B
Sure, for sure, I also put the prototype versions on new pages as they evolved. I had 3 in the end, plus one for Behance artboards, and one for Medium artboards. 5 altogether. The last two included tons of mockup photos. The takeaway is that for unknown reasons InVisionStudio slowed down occasionally, produced lags. I do not know whether it relates to internet bandwidth which is good enough in principle or just to the 5 pages and its content in one file. It worked, nothing was lost.
Technically, I put the discarded screens under these, so the evolution of the screens, which is one of the most important for me in terms of learning, is clear. I could have been more organized in that.
The block-like structure helps a lot in transparency, but also in making the design work more diverse. It is not necessary to go linearly in developing the final UI. Having the main frameworks makes the job more varied by polishing the final UI for the block you just like.
The above structure of the design makes it is a possible solution for all problems with geographically dispersed localizations, but with repetitive information structure and action implications at each location, such as thematic tours.
Visual concept, UI
As my first own design, my goal was an acceptable UI, but this was not the primary focus.
Typography
I consciously didn’t care what font type I used. I used Arial in normal, underlined, and bold with sizes 14, 18, 24, 28. I kept a number of elements from the iOS design system along with it. Eg. the Gallery view is a conscious one-on-one mapping of my old iPhone SE. I also used the colours of the system in some cases, but no longer the font sizes, for the reasons above.
A good choice of typography can reinforce a lot on the final UI, but this is a separate topic to discuss.
Visual concept
It was methodologically flawed, but it was in my head sooner than much else.
My advanced SLRs either run out of film or went wrong, thus I used my old iPhone SE to take pics in the city. Walking, I shot large firewalls at Kálvin Square, and sky from Széchenyi Hill. I wanted the visual to design specific and personal. I put the wall into the design to lower roughly 1/3 of the screen. When the northwestern winds blow out the humid, smog air from Budapest, the city witnesses a crystal clear blue sky like this one in this picture.
Initially, I wanted clouds, but those would deteriorate the visibility of the upper 2/3 of the screen. Thus, like Depeche Mode from the early 80’s I sample everything, I just sampled the blue colour from one of my pics. So that is also real, not created. I used the cloudy pics only for the cover image of the project. I decided on a kind of 3D effect (which is not iOS) for the main buttons out of brick. I did not have brick, thus, taken from a free stock photo and adjusted it. Dark blue sky, white of the cloud, yellow and red brick, and orange as complementary to dark blue became the colours of this design.
Video of the clickable prototype
I like taking photos, but I have never made a video on the computer and never cut it. I only knew that the proto and the project is only finished, only end-to-end if, among others, the video is complete. For me, this means annotation and sound. However, I am not sure it is necessary; it is rather a matter of individual taste.
I downloaded several free stuff and tried. I did not find one that integrates client-friendly what I wanted. Following the intensive prototyping period, I was so tired and frustrated that I exceeded by 10 days my initial target length for this project that I wanted to just finish it. To cut it short, I made the recording just once. Then I realized that I did not keep the appropriate rhythm, there are screens at which I was too slow or too fast. I felt destroying one month of work. So I suggest recording it a few times. I annotated in the same software, then I should have the text shortened to synchronize better with the switch among screens. And I can not format the text as I want, I can not place it flexibly, etc. The price of free I suppose.
I wanted the video itself to be personal in a sense too, with a kind of humour, since this is for portfolio building. Then I realize that I wrote one of the intended jokes wrongly. Thus I should have reannotated the whole video. In other software, I added the music. Initially, I had several ideas for music, but at this point, I gave up everything and used one which relates to Budapest and counterbalances my nervous clicking somehow. Finding music that fits worth a Mass. Anyone who sees the video thinks it’s crap, but the proto as a first isn’t in my view.
Covers
Although I tried the free plan of several mockup generators, based on the advice of Anna Árpás, I remained at placeit.net. Then I used Powerpoint to make 2 cover pages. One used for the post on Linkedin, while the other for Behance.
Why Powerpoint? It is just a technical and execution speed issue. Getting to know the relevant software was not the focus of this current project, and I came from MS Office environment. Illustrator or similar, or even the prototyping tools are the professional ones, obviously.
Icons
I downloaded a free ios UI kit for InVision, surprisingly, I found practically almost nothing in it for myself. Thus, based on the suggestion of Anna Árpás, and for the sake of simplicity, I used Flaticon’s free plan with registration. I used other sources in limited cases. I applied the same style icons, although not from the same contributors.
Logo
It became a DIY puzzle; I took 3 icons from Flaticon and merged them. I needed something recognisable as Hungarian by a foreigner and something which refers to the mural theme as such. Unimaginatively enough, these were the outlines of the Parliament, a paintbrush ended in red and a red paint stain since red is one of the national colours. It is really a low-cost DIY logo.
Photos
All photos in the Gallery show murals from Budapest. All were taken from the internet from various sources. If it became a real project, I would substitute those with my HQ photos. Although it was rejected by testers, in an interim version I used photos from stock. Whenever I use business-type pictures now and previously, I always ran into Andrea Piacquadio, it’s time to give credit to him.
Mural text for Rubik’s Cube
It is taken from Wikipedia for design purposes only. If it became a real project, captivating texts and stories (even for gen Y) should be written to all murals, since Wiki only covers a few, the most famous ones.
Project Performance KPIs
I used the built-in clock of Windows 10, I recorded the net times in an Excel spreadsheet. Not professional. But the solutions I’ve seen so far have been unnecessarily complicated.
Lesson learned: You have to keep in mind to start and halt the stopwatch. It’s not trivial at all if you are in the flow. The prototyping time is not clean, e.g. it also includes the time for icon searches, etc. which is UI. It is advisable to separate this clearly. With Behance Highlights, it took 28 working days, net.
But it was not the end. The chart shows my daily net-net working minutes on this project which started in the 2nd half of November 2020 and finished on the 18 of March 2021. It was hard to restart after long breaks, and the key takeaway here is that full documentation requires significant resources when you already fed up with the project. I exceeded my original plan by 13 working days (with net 8hrs work counted).
To be developed
I think some of my following observations may have general relevance for a beginner. Start with setting up a thought-over library structure for your project: for the different stages of the double diamond, for the different versions tested, for the UI elements, for the presentation on various medium, etc. Reduce the complexity and the density of your screens. Simplify text to the limit that it should not lose meaning. Experiment with Typo, and colours. It may seem waste of time, but pays-off in case that the design is fundamentally well-structured, with adequate flows, and interaction. Then UI simply raises it on a higher level. Dedicate resources to capture ideas on selection screens (on which I failed with maybe one exception). Do not miss mid-fidelity BW proto (as I did), it spares your resources later. Test and iterate as much as you can within a reasonable timeframe. When your proto is ready, your work is not. Dedicate more time to make your video better (if you as I, not an expert yet). Good presentation of your work is a different task requiring skills and could imply a lot of effort at a stage when you are already tired. Take some rest amidst polishing the building blocks of the proto, the lack of rest seriously destroys efficiency and creativity. If your project is complex vis-a-vis to your actual skill and experience level, sometimes you have to do something completely different during your main project simply to refresh yourself. Write a post or an article in UX. Read top x tips for everything, but practice first of all. If skilled already, make your UI yourself.
Positive feelings
Testers liked the idea of ‘Budapest Murals’ and most of the final solutions. First project solely on my own, with users, testing, and 4 times iteration. It started as an MVP then became more than an MVP. I made a full project. Full in my understanding means end-to-end from problem to proto video, Behance Project Highlights, Case Study on Medium, and post on Linkedin all with avoiding to be 100% repetitive. I think the structure of the design is well elaborated. I used conventions in UI where I thought are applicable. I searched for and tried a lot of tools.
I liked my DIY logo. I liked how I applied some app-specific fun in UI: the way how the progress bar was resolved with numbered walls. The testers also liked how the recommendations and the language selection were elaborated.
Prototype testing
I tested the prototype twice with the same UX vein users. I present the test outputs together with the evolution of the blocks in the next two parts of this case study.
Thank you for reading this article. To continue check out the remaining parts #3–#4. You can find the video of the clickable prototype here, and the highlights of the project here.
If you like this article, follow me and read other stories.
