Case Study: The Mercuryo
Week 4: Ironhack UX/UI Bootcamp
Project Overview
The task and focus of week 4 during the Ironhack Bootcamp was to:
Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one of the presented User Personas.
In our case we chose: James (33) — The Ambitious Businessman
- He reads Bloomberg, Time, Forbes, TechCrunch.
- He is passionate about Sociology and Economics. Work is not only a job but a life pursue.
- He reads after work. He’s interested in innovative tools and techniques for better retention of the readings.
- Goals: read one book for personal and professional growth per month, make his company succeed, go on a bike road trip with his old pals.
Furthermore our deliverables for this week were focused on visual design and best practice through observation, analysis, methodology. The final outcome should include a moodboard, a style-tile, a Hi-Fi interactive prototype for desktop with some motion graphics and some basic Mid-Fi mobile version.
Visual Competitive Analysis
Having the target audience already in place we could jump right into the Visual Competitive Analysis. Our main choices for financial and crypto-currency and technology news were the following: Bloomberg, Coindesk & TechCrunch.
Persona
Shortly after the VCA we also thought about a better representation and more appropriate version of James Miller, relatable to our current times and change of mindset.
Moodboards
After having a close look at our competition we decided on a few brand attributes that our editorial magazine should generally represent and embody in our design. These were our initial choices:
- Trustworthy
- Informative
- Progressive
- Sincere
- Sophisticated
- Confident
- Sustainable
- Realistic
We then create two versions and..
..settled for a hybrid mix of both before testing our brand attributes with potential readers:
We did have a pinch of green and light blue in mind but removed it afterwards to reduce the complexity of the design elements and only reintroduced green (positive) and red (negative) stock movement indicators.
Style Tile
With this Style Tile in mind we began crafting our low-fi with a close look at the competition in particular Bloomberg and it’s modular design with large margins on both sides.
It is to note here, we did not fully agree with it’s organisation of categories and sometimes even overwhelming amount of themes and articles on the front page.
Coindesk was much clearer in that sense but also focusses heavily on the crypto-currency space alone.
TechCrunch on the other hand uses a lot of white space and organises it’s articles and menu mostly aligned on the left.
Card Sorting & Site Map
To get a better idea of how users would navigate through our online editorial we conducted some primary research based on the card sorting method. We had a rough assumption but wanted to make sure our audience was on the same page.
There was some confusion around Crypto & Blockchain as well as Economics and we decided to put them into Finance and Business respectively.
Mid-Fi Desktop
During designing the Mid-Fi we were certain to incorporate the features of all three competitor pages as inspiration into our version and started with a simple scrollable homescreen that we could tweak and customise as we go.
Mid-Fi Mobile
For the Mid-Fi mobile version we simply reduced the row size to one and also had to rebuild the menu placing a burger menu on the top left used by many competitors newspaper apps.
Hi-Fi Desktop
After delivering the initial Hi-Fi we tested again and presented our design to several of our colleagues. We did get valuable feedback on the choice of colours and reduced the use of the bright blue that some users found distracting and strenuous on the eyes. Another point was increasing the size between sections on the homescreen. We decided to give 45px for each section. The exception to the rule is the text above the main story of the week:
Finally we also included a login option and a error message in case the wrong logins are answered.
Looking back at the earlier Windows days I only fondly remembering getting an error message without actually knowing what had happened. Keeping this in mind I also included the little messages written in red which are common standard by now.
Finally the correct password continues the user flow into the submenu.
Interactive Prototype
Key Learnings
Key Learnings for this exercise was getting more comfortable with design, learning and choosing harmonious colour combinations and using a logical system of building components, introducing more variants and being able to updating design feedback more quickly.
I am now looking forward to do more visual research and getting inspired on Dribble, Medium, Pinterest and using Adobe’s colour wheel to discover current design trends while a unique touch.
