Employee Portal UX/UI Design
Project 2 - Interaction Design course at SJSU
Challenge
Allow employees to track and manage the operations and inventory of a rock and roll museum through an efficient, low cognitive load interface. Data analytics should be processed pre-attentively and easily accessed during tasks.
Client's Brief
Manage:
- Events (concerts, workshops, special)
- The musical instrument collection and the exhibits
- Member accounts
- Donations
- Publish content to website
Manage:
- Events (concerts, workshops, special)
- The musical instrument collection and the exhibits
- Member accounts
- Donations
- Publish content to website
Design Process
Analyze
Understanding the user experience in its entirety through journey mapping
Empathize
Truly considering user needs, wants and goals through user stories and personas
Define
Developing a conceptual model that communicates what users can do and how
Ideate
Sketching and creating flows to come up with the best solutions before prototyping
Prototype
Bringing to life all the hard work from previous steps required patience and passion
Analyze
Journey map
With the mobile and web designers, we started the design process by mapping out the user experience from beginning to end.
We identified user pain points throughout the process as well as potential brand touch points with the product.
Takeaways:
-
keep in mind the "bigger picture" in every step of the design process.
-
first cultivating a mutual understanding with other team members is crucial for maintaining consistency later on.
Design Goals:
-
completion of every work task should positively impact the employee AND customer experience.
-
design solutions should consider the tasks and goals of other team members and products, communication is key.
(pg 3 of 10)
Empathize
Personas
Using a goal-based approach, I developed a persona that includes relevant information such as demographics, skills, computer literacy, and personal/work assumptions.
I included what might help create an empathetic relationship with the user and the product, and only info that tied back to design decisions.
-
Middle-aged R&R fan and recreational musician
-
Passionate about Rock & Roll and the success of RockX
-
Excited to manage museum exhibits and visitor plans
-
Doesn’t want to think too hard about analytics & financials but wants to make responsible and educated decisions
-
Would rather be at a concert/ playing his guitar- get done and clock out
-
Not a tech native, but still fully computer literate
User Stories
With the user journey established, I sought to express user goals through stories that include objects, actions, and attributes which become inputs to the conceptual model of the product.
I included a variety of employee users to capture a range of goals that might differ between various roles.
Takeaways:
-
Interfaces should support efficient, simple, educated decision-making
-
Employees want to do a good job, don't make them do unnecessary work
-
Employees may not be tech-natives, don't confuse users with unconventional terms/processes or make them search around for what they need
Design Goals:
-
Create a tool that presents all the necessary data in a simple, solution-oriented format
-
Relevant information is readily available during tasks to support accurate decision-making
-
Don't include information that's not needed for the task, and reduce the cognitive load to complete tasks as much as possible.
Define
Conceptually, every product can be simplified down to a set of objects, attributes and actions. For example, museum exhibits are objects, artifacts are attributes of that exhibit, and managing is an action on those exhibits and artifacts. Objects, actions and attributes directly translate to the Nouns, Verbs and Adjectives in the User Stories created earlier.
Object/Action
Based on user stories in combination with the client's brief, I built a table containing all of the objects and actions that should exist in the product.
I condensed objects and actions to their highest level to prevent redundancy (ex. concerts and workshops can be categorized under Events) and establish consistency (ex. all objects can be tracked).
Object/Attribute
For each object there exists attributes which are also derived from the client's brief and user goals previously determined.
Mapping out all of the attributes for each object allowed me to further keep track of all content that needed to be present in the interface, especially the small things that are easily forgotten.
Prioritization
Based on user and business needs, I prioritized actions and objects by how frequency of use and percentage of people who would use them.
Financial category was created separately as maximizing revenue is not necessarily a user goal.
Object/actions closer to top-left are considered a higher priority.
Takeaway:
-
learning to define a product through a conceptual model was abstract and difficult at first, but once I got the hang of it I could see how helpful it was.
-
these tables became a main source of guidance in future steps and a great resource.
Design Goal:
-
some object/actions should be more visibly present and accessible based on frequency of use
-
items closer to top-left of prioritization matrix need to be accessed in less than two clicks.
Ideate
Experience Flow
My objective for this process was to:
-
Minimize the number of steps in the flow without overwhelming the user with cluttered screens.
-
Guide the user and ensure completion. I did this by incorporating a logical sequence and set of options for the user in each step.
Sketches
My objective for sketching was to visualize the objects/actions/attributes in a layout that clearly communicates the conceptual model to the user.
This required many re-sketches and feedback. I learned to have patience and persist with new ideas until I was sure the best layout was created. This helped a lot with maintaining consistency during prototyping as well.
Takeaway:
-
visualizing on paper before jumping straight into prototyping is a hard habit to form, but I truly see the value in ideating before creating.
-
sketching is efficient great for generating different design solutions based on takeaways from previous steps
Design Goal:
-
maintain consistency and reinforce the conceptual model to the user
-
reduce the cognitive load required to understand and use the tool
Prototype
My main goal was to ensure that I incorporate everything I learned so far about the user experience which meant remembering to constantly return to notes and tables along the way. I found most inspiration came from returning to the user and real scenarios they would find themselves in.
Below is a list of the best and creative solutions to designing a product intended for managing and multi-million dollar rock and roll museum. Check out the prototype before and during the explanations here
Home Page
I chose a dashboard approach, guiding the user to manage items based off real-time information.
For example, we can see that "90's bands" exhibits aren't receiving many visitors. Drilling into this screen then allows users to manage exhibit items.
If further guidance is needed, users can refer to Recommended Actions in the top-right screen.
Summary
My methodology didn't change from the previous project, but my understanding of each step in relation to the final product certainly did. From Analyze, where my team and I created a foundation of mutual understanding of the product, to actual prototyping, I learned to build on everything learned in previous steps.
Defining the problem, product, and user experience ahead of time allowed me to be more precise and encompassing with my solutions. I designed an interface that supports user goals with the least amount of confusion and effort as possible. I approached every task with this in mind.
Challenges
I first struggled with how to visualize and represent the data/analytics. After countless redesigns, I finally took a step back and reviewed my notes and takeaways from previous steps, only to realize I was approaching the problem backwards.
I decided to design the editor boxes (where employees do the real work) first, then build the graphs. Data visualization came much easier this way. I needed to first understand the user goals, then come up with relevant solutions to those goals.
Positives
I enjoyed coming up with efficient, smart and easy to understand solutions to potentially complex problems. I tapped into an obsession for not only understanding user goals, but allowing users to accomplish those goals as quickly and easily as possible. This meant providing all the tools and information necessary to make smart decisions and really take control of the task.
I look forward to future projects with data visualization and business oriented interfaces.