Discover your WILD CHILD in 5 Days
Week 5: UI Design
This weeks Task in the Bootcamp was to focus on User Interface Design as we learned how to use Principle and Figma Animations.
But which Topic?
As the rise of the digital press has seen a tremendous peak over the last years and the audience is increasing because Millennials grow older and demand all sorts of content, we had the Challenge to design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of a User Persona which we had to pick.
We had to deliver a consistent, branded and engaging experience and all the documentation that would allow the project to continue after our intervention as UI Designers.
Who we are designing for?
Romana and me designed for Eric which is 21-years old, really into Sports as he want to learn Parkour. He just dropped out of University because he wants to travel the world and work abroad.
His Problem is that he don’t likes to read that much — so his main digital media consumption is Sports Illustrated, La Gazzetta dello Sport and Gameinformer.
As Freeportpress in September 2018 published their Survey about Print vs. Digital: How We Really Consume Our Magazines we found out that over 50% don’t read digital Magazines.
So our conclusion from this was that we want to stick to a Blog more than a typical Magazine or Newspaper. That’s why we came up with the Idea to create a Platform with Extreme Sport Video Content. Collecting some Ideas we tried to think of Eric which is only 21 and using a young and direct language. As he is reading Sports Illustrated and is tracking Soccer Results he would probably say OH SHIT if he’s not satisfied — maybe he also would say FUCK YEAH if he just found out that his beloved Soccer Team won a Game with 4:1.
That’s why we thought showing Oh Shit Moments which means Major Fails in Extreme Sports and also Fuck Yeah Moments meaning Major Success Moments could be pretty enjoyable combined on one Platform. So we decided to split the Desktop Screen in these two Main Categories where he decides for one or the other side. Because Eric wants to travel and explore the world we decided to have a Location where the Video was taken and also a Reaction Slider for each Video.
Sketch to express
For our Desktop-Version we would have our Logo inbetween the two Categories where we engage People to submit their Major Success and Major Fail Videos to share them with the Community.
In addition we broke that Idea down to a mobile Version as this weeks Task was also about responsive web-design.
So the main Difference so far would be to have an Overview of the Main Categories from which you have to choose one to get to the chosen Video Section.
In the Desktop Version the Videos would be seen directly as soon as you hover on one Side.
If Eric maybe changes his mind and wants to read a bit more we would also have a Story Section where some Contributors tell their Experience of e.g. Living abroad with less money and learning Parkour.
Another Section would be About, Search and a Profile for submitting and rating Videos.
But what’s THE Look?
To answer this we did a Visual Competitor Analysis focusing on Platforms that attracts Eric already. A big Player is Red Bull as they sponsor a huge Extreme Sport Variety and therefore showing Full-Screen Videos on their Landing-Page.
Another interesting visual Inspiration was EASY DOES IT, a young Commercial and Music Video Production from Berlin, with which Logo we fell in love and tried to pull our Brand in the same direction. As Easy Does It is not only famous for their Music Videos they’ve built a quite big Fanbase on their Stickers which are spread all over the World and are shared on Instagram a lot.
THOR which is a sports wear brand also shows a lot of Stunt Videos on their website and they use an italic Font for their Logo.
To get some inspiration out of the Parkour-Community we found MÜVMAG which lives from big black and white Pictures.
Overall you can say that they use a lot of black, white and red Colors, dynamic Fonts and Full-Screen Pictures and Videos.
Moodboard
With our Competitors in mind and where we want to see our Brand we created a Moodboard to project our particular Style and concept.
We wanted to create a dynamic, sporty, wild, free, manly and adventurous Look and Feel.
As soon as our Moodboard was done we tested it and asked People on their Feelings and the overall Answer was manly, wild, aggressive and radical — so exactly what we tried to achieve.
Style Tile
Our next step was to think about a Name and after we collected all the words which expressed our Websites Content we came up with Wild Child. Wild because it’s compatible with Extreme Sports and also Traveling and crazy Moments. The Wild Child also as Wake-up-Call for your inner Child what wants to go wild.
Once we had our Moodboard, a Name and our Lo-Fi Wireframe we started to think about Colors, Fonts, Logo and Icons we want to use.
With all that we started to build our Project in Figma which was great as we could collaborate. We figured out that we could do great Animations so it was the perfect Tool for us to bring our Project to Reality.
HIFI Desktop Prototype
Once you would hover on the left side for Oh Shit (which express Major Fails) an Oh Shit Wallpaper and Videos appear and they would start right away. Also you have a “Savage-Meter” to give a Rating and there is a Location where the Video was taken — maybe it’s an Inspiration for you to travel to this Place ;). On the right side there are Fuck Yeah Videos which would start once you hover the white side of the Screen and could be rated with our “Wild-Meter” — the black Oh Shit-Side would stop then so you can only watch Major Fails OR Successes.
The Videos can also be expanded to get the Story behind the Video and overall more Information. The expanded Version would take you to the Side where you’ve chose the Video from so you’ll get a Slide-Effect from left to right.
For Submitting your Video you would click on the Logo in the Middle where the red Submit-Flag extends. Once you click on it a Submission Screen pops up.
If you go to the Top of the Website a Menu comes out where you can choose Stories to see readable Content.
HIFI mobile Prototype
Our responsive Mobile Version would start with a Video Screen from where you could swipe up to get to the Feed. Once swiped up you would see the Feed Skeleton of the two Categories. Swipe right will take you to the Oh Shit Section, Swipe left would take you to the Fuck Yeah Section. Once tabbed on the Feed at the Top you would return to the Feed Skeleton where you can swipe up to be directed to the Stories.
Lessons Learned and Future-Steps
As you lose yourself in Figma figuring out how Animations are working you need to remind yourself ever and ever again to keep focused. Once we created our Presentation we realized that we totally forgot to show others Ratings under the Videos.
Also working with Videos in Figma was quite interesting.
The Visual Competitor Analysis and the Moodboard helped us quite well to understand the Look and Feel of our Brand.
We learned that from the technical Side the Difference between our Desktop and Mobile Version could be problematic as we use Hovering for the Desktop Version and Swiping for the mobile Version — but that’s something that needs to be figured and tested out.
Future Steps
If we would have more Time we would show the Ratings of others. Creating a Profile would be a Feature we want to show up with soon because it’s the connection to rate and submit Videos. Saving Videos or rather the Locations as Travel-Inspiration.
As Animation we would have done a drag down to refresh the Feed.
And in Addition we would add a Social Sharing Feature as we were asked while our Presentation if that’s possible and they see a Need for that.
For the Development it would be probably challenging how to solve that Videos start as soon as you chose one Side as it would take a lot of Ressources for smaller Devices.
And last but not least it would be great to test out if this Platform would be used by our Target Group as we got the Feedback that there are to less Functions and the Users could have the Fear of not fulfilling the Task because it’s too easy.
