Role
Ux / Ui designer
Tools
Invision; Adobe Illustrator; Adobe Photoshop; Figma; Microsoft office; Miro
Teammates
Silvia Silva
Year / Duration
2018 / 1 month
Challenge
Give the best Features and cultural offer of Oriente’s Foundation and Museum. Create a personalized experience, soft and look and feel clean.
Web site _Present
Some point to be consider to evaluate the current website:
- 2 websites: we started in the “Orient Foundation” and through the links access to the Orient Museum. This process makes the navigation more confusing to the user. The url changes and the user is not notified, so returning to the homepage sometimes could be a challenge.
- The information and visual structure was rigid and monotonous
- The organization of information was confused and repeated: Connection with the 1 point. In the site map we could understand the unnecessary connection.
- Poor connection and Hierarchy. The Orient Foundation doesn't have the direct information about the objectives and projects.
- Poor segmentation of information and hierarchy. The Orient Foundation doesn't show their objectives and projects. The user does not understand the change to another website - orient museum. The cultural agenda is at the end of the page, so could be more difficult for the user to find them.
Research
It is important to justify our options based on our research. For that we started to evaluate the website. The 10 usability heuristics (https://www.nngroup.com/articles/ten-usability-heuristics/) was the foundation to understand some of pain points. These results arise through free navigation without analytic data, business goals or technological limitations.
H1. Visibility of system status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
H2. Match between system and the real world
The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
H3. User control and freedom
Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.
H4. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
H5. Error prevention
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
H6. Recognition rather than recall
Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
H7. Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
H8. Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
H9. Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
H10. Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Project Information:
Client: Oriente Foundation
Study Date: 5-10-2018 a 19-10-2018
Researchers: Tânia Santos e Sílvia Silva
Last review:: 19-10-2018
Process:
Navigation Bar;
Details;
Organization of Information;
Languages;
Bottoms;
Devices: Desktop
Resolution:: 1920 x 1080px
Browser: Chrome Version 69.0.3497.100 (Oficial compilation) (64 bits)
Analysis Website
Total of evidences: 12
H1 - Visibility of system status - 8
H2 - Match between system and the real world - 8
H3 - User control and freedom- 2
H4 - Consistency and standards - 5
H5 - Error prevention -0
H6 - Recognition rather than recall - 7
H7 - Flexibility and efficiency of use - 0
H8 - Aesthetic and minimalist design - 3
H9 - Help users recognize, diagnose, and recover from errors - 0
H10 - Help and documentation - 0
The severity of the problem was transposed into our analysis based in a value scale:
0 - Without usability problems
1 - Aesthetic problem: doesn't need to be solved unless the project has available time to spend.
2 - Less usability problem: Low priority
3 - Usability problem: fixed is important. To be considered as a high priority;
4 - Usability catastrophe: is important to fixed before the product launch
The result:
0 - 0 evidences
1 - 0 evidences
2 - 4 evidences
3 - 3 evidences
4 - 4 evidences
NA - Not applied - 1 evidence
First conclusion about the Website
After the first analysis of the website we decided to understand the website architecture to confirm the previous results.
The structure of this website is so confusing and sometimes the user doesn't have the expected feedback. Could be so much difficult for the user to understand “ where he is” to “where he wanna go” in the navigation.
The user feels it is difficult to find the information quickly and efficiently in a short period of time.
The design doesn't have some consistency in way to help the user, sometimes the same element is used to go to a different function.
The Surveys
Conduct for: Tânia Santos e Sílvia Silva
Dates: 6 OUT 2018 a 19 OUT 2018
Tools: Email, social media, Google forms
Total answers: 29
Purpose of survey:
Understand if the public have the knowledge about the services and activities of the museum / foundation
Knowing the purpose of the research in the museum website by the public;
what kind of features could be a plus for the navigation experience;
Analysis: With these surveys we could understand the position of the users regarding the museum website. 75,9% know the orient museum however only 34,8 % visited and 10% know the cultural agenda. Only 41,9% visit museum websites to search for information, and 62,1% use the website to buy tickets. 38% of the users consider the experience personalization could then access the website for exploration of the site. Creating an app could not be the best option, because 80,8% of the users tell us not to use it if it exists.
Benchmark
We decided to do investigation based on competition direct and indirect, and some inspirational websites.
Complete information on invision: https://projects.invisionapp.com/boards/AY3QC2ZH6B9/
Persona
Margarida lives in Cascais and works in Lisbon. She goes to work in her motociclo. However, when the weather is not ok, call an uber.
Recently married, don't have kids, but have 2 little cats. Before work she enjoys eating breakfast close to the river. She used the mobile phone to be connected to social media and understand what kind of events are online. Margarida started the search on the mobile (on the street) but only when returning home elaborated a plan and synchronized the mobile to the desktop. When it is possible she enjoys traveling with her friends to learn more about other cultures. Margarida enjoys visiting art galleries and museums at least twice a month. Her father had been part of the Portuguese army in Macau, so his stories made her develop an interest for the asian culture. In 2005 made volunteer in Animamacau organization helping rescue animal in risk.
"Do you wanna go to the new space which opens this week?”
Feature definitions:
With the research we could understand which are our pain points and could change that. To answer to our persona, Margarida, the museum website should offer personalized navigation, adapt her needs. The architecture of information needs to be easier and fluid with a clean design to guarantee the best experience as much as possible.
New Features for website:
- How to arrived;
- Services
- Schedule
- Buy tickets
- Login area (to save her preferences)
Site Map_ Future
Wireframes
With the result of the research we decided to start the sketch of the new features to test with the users to understand their reaction. This website must be functional to desktop and mobile (because today is one of is pain point).
After the analysis and research we decided to understand Margarida's experience to access museum services. In the first page of Foundation we can guarantee the user could choose what kind of service she wants, the museum or the foundation.
Solution for Margarida Journey
For Margarida’s journey, she chose to access the museum website and start her trip for all the services. Margarida was forwarded to define what kind of plan / adventure she wants. In her case, she wants to “learn something new”. Then she can choose what kind of formation she wants to do, the subject and the most appropriate date and hour. In the end she has access to the tickets and all the information. Margarida is an organized and simple person. She uses her mobile to do her own research and save relevant information.She synchronized her agenda and relevant events to the desktop, to guarantee at night she could make her choices comfortably at home, and detail all the experience.
Design
The redesign of the Oriente foundation was based on the oriental philosophy, simplicity, sensibility and intuition. The user wants something simple to feel free to explore as much as possible. The scheme color with the black and the red was selected based on the user and the reaction to the actual website.
Conclusion
The culture of the Lisbon museums are a rich element for the intellectual development of our city. However, the foundation and the museum don't give us this cultural heritage. Redesign this website was the first step to change that situation. All the research was important to understand the real problem and the best way to solve it. The website analysis gave us the perspective of the errors and what kind of things work or not, such as the content or functionalities and so many others.
In this sense, listening to the users was the best way to redesign the website. To guarantee what the user needs. In this particular case, showing cultural offer and the services available was the first step. For that the user could access the website and customize his experience in a way to answer their need.
To the future, I could give some notes: understand how to be more specific to the events, what kind of information is relevant and today missed; could be an option to create some filters, is it important for the users?; understand how social media could help.