Xenon Arc 2024
UI | UX | USABILITY | PROTOTYPING
Xenon Arc
Xenon Arc is a distribution company that provides exposure and innovative models to connect clients/businesses to their products and customers. Through a database called ConnTact, clients can see their company analytics on their customer satisfaction and product production.
Problem
None of Xenon Arc's clients used ConnTact because of how confusing the information was on the pages. Instead, client businesses sent their representative each year to learn about their statistics through annual summary reports Xenon Arc got ready with in Excel spreadsheets. The initial website didn't include information clients had wanted and innovative intent of the visuals distracted users from the information they needed.​
Goals
1. Redesign visual analytics and tables to make information easier to understand
2. Make the navigational flow easier to find information without multiple clicks
3. Interview experts and representative of clients to come up with sets of information clients would want on ConnTact
4. Layout the pages so that the information is clear
5. The database should be self-sustained and can accurately send information
Methodology of Design
Design methodologies that I implemented in this redesign were:
01.
Design
Thinking
Empathize
Define
Ideate
Prototype
Test
02.
User-Centered
Design
Participatory Design
Iterative Redesign
Usability
Interviews
03.
Five Elements of
UX Design
Surface
Skeleton
Structure
Scope
Strategy
04.
Activity-Centered
Design
Interviews
Interaction focused
Navigational flow
Usability
Interview
Purpose:
1. Usability interviews on both the initial site and the new designs.
2. To consult with client representatives and finance members to come up with sets of data clients would want to see
Participants: 11 (met each participant twice or more)
Interview time: 30 minutes - 1 hour
Topics: UI design concerns, visions for the site, client needs, and topics clients want for statistical data
Monitor Testing: TV, Computer, Big Screen, TV with green tint
Stakeholders: Finance of Xenon Arc, Clients, Client representatives, managers, and chiefs
​
For each interview for the UI, I created a mockup or a high-fidelity wireframe for participants to see a visual identity to the usability. I also wanted to change some of the colors on the pages to make it more intentional than distracting. I also occasionally worked with one of the Software Developers working on coding the new redesign and updating the Information Digital Chief/Officer of the team.
Interview Result
After interviewing many stakeholder positions at Xenon Arc, we started changing the UI and doing multiple usability tests to understand how easy information was on the designed site. The obstacle we faced in this phase was however, there were conflicting opinions on what should and shouldn't be on ConnTact. There was also the goal of having the database be self-sustained and participants wanted information that had to be manually imputed and constantly updated in real-time. In our second phase of interviewing, we decided to do participative designing (usability testing to prototypes to create the best outcome together) with managers and members of the team that closedly worked with business clients. While we still got conflicting answers, we concluded to find a common ground and add sections of information that was possible to add without human intervention.
UI Design
In the beginning, I studied what colors were used and also wanted to implement green into the design. I also liked the idea of a light-mode because clients liked Excel spreadsheeting and light mode just as much as a dark theme. I also got feedback from a developer who had been working with usability that while a dark background may seem cleaner and more modern for a website, it tends to highlight color more than the text compared to a lighter theme. So instead of a white background, I decided to go with lighter green tones. And to ensure accessibility and clear visual identity, I collaborated with a colorblind colleague who couldn't perceive green, which gave me valuable insights into how different users experience color and what colors to avoid. We also tried working on different devices to see if the screen made the works unreadable as ConnTact could preferably used for meetings. One of the monitors in Xenon Arc had a green tint on the screen, so we adjusted the colors so that it would be compatible.
For the Pie chart, I made sure to have a color scheme of green that can also be different from each other based on a person, a monitor, or device.
To follow the current brand of Xenon Arc, I adjusted the corners to round and added Helvetica for the font. Since many also liked transparent data rather than clicking into to get to the information, I made the visual data to graphs and universally similar visual data that the majority could understand.
Usability Testing & Outcome
Usability testing was a big aspect for the project because every other week, I was meeting someone to give feedback on the design and observe if they were confused at any step. I had also given tasks for users to do, such as find the filter button or the OTIF History yearly, to see how fast a user got it (usually before 10 seconds). By the end of the project, participants liked the new design of the website as the information was clear, however were surprised by the information put! Users also liked the idea that you can filter what you want to see on the site and move the information either up or down. Below is the end result imported from Figma:
Things I have changed:
-
Added locations (QDMX, QDNA, QDEU) of the business at the top as a checkbox
-
Changed the content of the summary at the top to combine both sales and purchases instead of two pages
-
Added a slider for the date by month, quarter, year, or current fiscal year (adding the filter next to it as users couldn't find the filter originally)
-
​Added the average year for both purchases and sales​
-
Made a pie chart to represent this:
​
-
For Growth section, instead of a radical bar chart (as it didn't show revenue growth visually), I designed it to include numbers instead.
-
​Added a graph similar to OTIF History because users thought that was the best representation from the original website design.
-
Added a light version (if you click on the settings in the prototype above)
​
Conclusion
Things that I learned about during the project:
- components in Figma
- finance and analytics
- usability and UI testing on different devices​
​
Things that I could do if the project continued:
- interview clients themselves
- learn more about statistical design and visual modes of data
- find a way to add customer statistics