Briefly — Get briefed on the fly.
When working in business it is essential to keep up with what is going in the world 24/7. Knowing how the Chinese economy is evolving or keeping track with the developments of a hyped tech-startup can be essential in the lives of ambitious businesspeople. Whether they need facts to make an informed business decision or they want to impress their co-workers, absorbing lots of information and formulating key insights is critical.
CHALLENGE
As part of the Ironhack Berlin UX/UI Design Bootcamp Morrison Key and I were given the task to design a responsive online platform aimed at ambitious business people. During this project, our main focus was on UI and creating a design that met the needs of a specific user group. We used a Design Thinking process with emphasis on the prototyping part.
THE CONCEPT
Key and I have designed Briefly, a platform where people interested in tech, finance, management and leadership can get all their news and opinion pieces from one place. We provide quick overviews and cliff notes of important subjects within this field. The users have the ability to get easy digestible key findings from articles, but also have the opportunity to dive deeper into chosen areas of interest.
PERSONA: JAMES, 33.
Meet James. He is an ambitious businessman who is trying to grow in the world of business and who dedicates a lot of hours to stay updated on news within his field.
He loves to have the latest knowledge, but he doesn’t want to spend too much time scrolling endlessly through his list of valuable business sites. Although his job is more of a lifestyle for him, he appreciates being able to disconnect.
THE PROCESS
We initiated the design process by user testing websites from Times, TechCrunch, Forbes and Bloomberg with users similar to our persona. What we found is that users are overwhelmed by ads, irrelevant articles and are often getting lost on these sites and spend hours wasting time.
We formulated a How Might We to guide the solution:
“How might we provide our readers with the minimum concepts from articles in a simplified format which can be read quickly and easily?”
IDEATION
After having established the concept and direction of our design we made a feature prioritisation to determine which features are a must-have in our MVP.
Next we created a sitemap to structure the website and get an overview of the information architecture of our site.
PROTOTYPING
Following the information architecture we started prototyping low-fi sketches. We used a mobile-first methodology and created the mobile version first and then the desktop version. After testing our low-fi prototype we created mid-fi wireframes.
BRANDING & VISUAL LANGUAGE
Having the basic structure of the site we started focusing on the visual language and style tile behind our site. We created a moodboard to establish the look and feel. The brand attributes we want to highlight are honesty, efficiency and accessibility.
We translated our moodboard into our style tile to be used in the high fidelity prototype. We defined our logo, typography, colours, iconography and used an atomic design approach to build our elements.
HIGH FIDELITY PROTOTYPE
The high fidelity prototypes are created using Sketch and Principle.
REFLECTIONS
This project was the first project that I have worked on using Principle. It was great to experiment with micro-interactions and explore how to make the design ‘come alive’ with subtle animations. But Principle can also be a time stealer and I found out the importance of planning the interactions ahead.
Working with multiple people on sketch files was another challenge. Key and I used Abstract to do so during this project. At first, it was a challenge to understand the logic of having master files and various branches, but at the end, it was a great and natural way of collaborating.
