top of page
MOMENTUM
UX RESEARCH | BRANDING | UI DESIGN | RESPONSIVE DESIGN
Editorial responsive design that aims to help their users save time and multitask while learning new content.
In today’s age, people normally get their news, articles, and readings from some sort of technology. Companies now have to know who they are catering to when it comes to creating an online product for users to read / intake.
Brief
The challenge:
Create a responsive editorial site thought out for the user persona presented.
Responsive Design: Website, tablet & phone.
Empathize
USER
Elaine Brown
Eco-Friendly Researcher, 35
She wants to invest more on self care and self love while being good to others, seeding a more empathetic society.
BEHAVIOUR
She reads during work breaks. She often works at home, when she’s not at university or the library.
GOALS
1. Be more rational.
2. Discover new passions
3. Achieve a good work-life balance.
To understand Elaine better we created an empathy map that would allow us to imagine her needs and pain points better.
Through the empathy map and the information provided we realized Elaine is a very busy person with almost no time for herself. Most of the time she is working and researching leaving her with tiny breaks to enjoy herself and read things that aren´t work related. In her goals, our user persona states that achieving a good work-life balance was a key factor to her lifestyle.
PAINS
// Not enough time for herself
// Not being able to take better care of herself
// Poor work-life balance
// Lack of personal hobbies and passions
GAINS
// Achieve a good work-life balance
// Discover topics of interest as a way to find a new passion
// Invest more on self-care and self-love
// Be more empathetic
// Be more rational
Competitor´s Analysis
After understanding Elaine in a deeper way, we decided to analyse the magazines and sites she was interested in. The goal was to comprehend what is out there and how could we meet Elains needs better than the competition.
Main four Competitos
We started by creating a visual competitor analysis that showed us what the other sites offered regarding, color, branding, layout, and photography style. We learned all sites were controversial and modern. They all spoke about bold topics and the photography as well as font were bold. The forward-thinking style served us as inspiration for our website.
Feature Comparison
We then compared features to see what each site offered. We analysed strong features we could enhance and provide.
Defining & Ideation
PROBLEM STATEMENT
Transitioning to our next step we defined a problem statement that would lead us to
taking action toward a set goal:
“When I find articles of interest I want to have different ways of consuming my information so I can lead a more productive lifestyle”.
Journey Map
Once we knew the right direction to move forward we made a journey map that would clearly communicate how we could meet her needs:
Through the representation of emotions with emojis, we were able to reiterate that our main focus should be to provide a platform that offered multitasking options as this would be what would satisfy our persona´s needs the most.
Moscow Method Map
To begin our ideation phase we stated what we felt was necessary in our site. To have a broader perspective we created a Moscow method map to make sense of our “must-haves.”
Branding Creation
MOOD BOARD
Once the main features and topics were stated we moved on to creating a visual style for our brand. We made a mood board that would transmit the energy of our site and through it create our branding.
NAME & LOGO
We believed the name was the perfect fit for Elaine´s situation.
MOMENTUM
To be in the moment. We would like for Elaine to be able to unwind and be present.
LOGO VARIATION USAGE
COLOR PALETTE
BRAND TYPOGRAPHY
BRANDING DISPLAY
Web Page Design
LOW-FI & MID-FI
To begin our interface design, several wireframes were explored to fit how we thought the site should look. We then chose the best features and components to create the look of our final design.
Low Fi
Our goal was to create an interface that helped Elaine multitask. To achieve this we created different ways to intake the content and we prioritized it through seamless organization.
The idea was to organize the content from top to bottom - quickest to slowest.
Mid Fi
Once we had our design set, moving to our mid-fi was fairly easy. Because we started by making our desktop design, creating the tablet and mobile versions was a smooth process of reacommodating the components while respecting the main design.
Discoverability and usability were important factors in our design. We tried to make our responsive sites as simple as possible to ease time usage.
DIFFERENT WAYS OF CONSUMING INFORMATION
VIDEOS
We added videos at the top that would summarize the article because we believe that visual communication is the quickest and strongest form to process new information. This would save her a lot of time and it would allow her to multitask.
BULLET POINTS
Before the written article she could find bullet points highlighting the most important aspects of the piece.
AUDIO (READ ARTICLE)
We added an audio play feature where in case she wanted to understand the content better but couldn't sit down to read she could listen to the whole article.
FULL ARTICLE
And finally the full article to be read.
STYLE GUIDE
After creating our responsive design mid-fi it was clear what components we needed to make to create our high-fi. Through a style guide is easier to create design harmony within the team.
High-Fi
Now that we had our mid-fi styled and our components, moving on to the high-fi was a quick step. Thanks to the style guide the process became seamless and very enjoyable.
DESKTOP
TABLET
MOBILE
Conclusion
Our project successfully achieved its goal of creating a responsive interface for Elaine. The user test validated our design, showing users could quickly and intuitively navigate the site, spending only 15 seconds to decide on their next read. We were pleased with the outcomes, as we aimed to make Elaine's daily routine more efficient, helping her multitask and save time, while also fostering her self-care and awareness.
bottom of page