Project Overview
In this 4-month project, I worked on creating a new website design for the SU Globalists, including redesigning IA, user flows, page templates, content strategy and visual guidelines.
Client
Established in 2017 at Syracuse University, Globalists is an organization aimed to give students an outlet to start conversations and share stories of personal identity. In this project, I collaborated closely with the graphic designer, content manager and illustrator at SU Globalists.
Project role
Web designer, UX/UI designer, Graphic designer, prototyping, Visual design & testing,
Tools & Duration
Adobe XD, Illustrator
May - Aug, 2019
Challenge
The current experience
How might we enhance overall user experience ?
How might we help users find information they need quickly and accurately?
The SU Globalists website is the major channel for SU students to share their stories of personal identity and explore different people’s experience.
Currently the website is cumbersome to navigate, overloaded with content, and lack of visual hierarchy, making it difficult for visitors to browse naturally.
Project Goals
I interviewed the SU globalists content manager and graphic designer in order to determine the goals for the redesign. I made sure to view the problem holistically and addressed three different types of goals: usability, visuals, and simplicity.
USABILITY
Improved browsing experience will allow the users to navigate and find information quickly and efficiently.
SIMPLICITY
In simplifying the user interface, we can provide the user with a simple and easy way to browse the content.
UTILITY
Restructuring the website information architecture, to create the best outcome. As well as increasing overall website usefulness
Design Process
01
Empathize
Define redesign goals with client in order to understand all wants and needs.
04
Implementation
Implemented the new website design with all goals reached.
02
Research
Conducted usability test through: card sorting, data analysis, understanding user’s need.
05
Test
Conducting tests for usability experience, cognitive walk-though.
03
Ideate
Restructured the information architecture, sketch and create wireframe and style guide.
06
Iterate
Redo usability test to fix some small issues, and ready for launch.
Research
Identifying usability issues
We evaluated the current website through heuristic evaluation, cognitive walkthrough, user testings and Google search console to better understand underlying problems and define scopes.
We used heuristic evaluation, data analysis and card sorting methods to uncover major usability issues of the website and fix them to align with users’ expectations. The research helped us understand user behavior on the website and organize information in a way that makes the most sense to the users.
1. CONFUSING CATEGORY
The whole page holds numerous articles that have not been friendly categorized, which increases user’s cognitive load and makes it hard to find the article they really want to read.
2 UNCLEAR NAVIGATION
Unclear navigation and information architecture make the users feel lost, and they don’t know how to differentiate each category.
3 POOR VISUAL PERCEPTION
The website has poor visual design. Which includes so many problems such as: font, color choose, spacing , etc.
Research Insight
Reconstruct IA
We used card sorting and reorganized the article categories in order to help us reconstruct the new information architecture.
Article Recategorization
To better understand our card sorting result, we organized each article by category using google sheets. In creating this type of organization, it allowed for us to better understand the website structures.
Card sorting
We did a card sorting section using Optimal Sort to find out which article best fits each category. We had a better understanding of how users would like to read the article based on categories. Based on the findings from card sorting, we re-arranged the Globalists website content, and refined the information architecture.
Result
Based on research findings, we simplified and reorganized the navigation structure so the users can find the content intuitively and effortlessly. We constructed a simpler IA by decreasing the navigation categories from six to five.
We took the newly defined IA and sketched out screens accordingly. I went as broad as possible with ideas and sketched multiple variations for each scenarios.
Design Decision
Simple and Straightforward
In order to keep the main web interface simple and easily digestible, we decided to design a simple navigation bar. For the sub-page, we chose to use list design. In using the list design, it allows users to list view the content quickly, and it is flexible for different types of information and can be quickly applied to many pages on the Globalists website.
Sidebar
For the main article page, we used the sidebar to create an easy way for users to quickly subscribe, follow along on social media, or join the Globalists.
Subpage
In each subpage, we used a simple and easy way to display the content base on utility and usability. We only list a few information about each article in order to maintain the clear user interface and best readability.
Success metrics of the redesign
Restructured the website IA and reduced the user cognitive load.
Increased over usability for browsing the website.
Increased the utility for users to view the contents.
Improved website visual design.
Reflection
If we had more time, we would have worked on responsive design and think about how the new website will fit into mobile. Also, one of the key lessons from this project was finding the right balance between usability, utility, and visual design.