Website UX Design
Project 1 - Interaction Design course at SJSU
Challenge
Design a lo-fidelity prototype website for people to easily find and adopt dogs who match their interests and characteristics. Create an empathetic relationship between the user and the interface and transform a comprehensible conceptual model into a tool that serves its purpose.
As my first ever design project, my first main goal was to effectively incorporate human factors principles of cognition/perception to create logical, easy to understand interfaces and processes with elements that effectively communicate the conceptual model of the product. Second, I was excited to put into practice the application of user goals (via previous projects) into real life solutions and tangible products.
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
This first step working with my team of mobile and employee designers to map out the complete user journey took some extra time but it proved to be a valuable experience in terms of determining project scope and identifying key touchpoints between the user and the product.
Takeaway: most users want to be well educated and confident they are making the right decision when adopting a dog. Providing this information and reassurance in the website will increase user retention and completion of responsible, well matched dog adoptions
Design Goal: include an educational section of the website that provides everything a person or family needs to know about dog adoption. Include questions in the survey that determine if someone is ready for adopting.
(pg 1of 5)
Empathize
User Stories
For this next step, I was taught how to represent user goals through short stories. Coming up with with these stories (which would normally be based on user research) really helped put me in the user's shoes and consider what different interactions might look like from the perspective of the user instead of the designer.
Personas
Through careful consolidation of user stories and journey map steps, I was then able to create personas with my team which contain user needs, wants and characteristics. My professor couldn't stress enough how important it is to include only information that ties back to design goals/solutions. This made a lot of sense to me, why waste time with details that don't influence design decisions?
*ideally, this part of the process would be accomplished through dedicated user research methods; unfortunately this was out of the project scope
Takeaway: adopting a dog is a life changing decision which includes unique experiences across different types of people and lifestyles. Some people are looking for protection while others may be looking for companionship (and in some cases both). This is the forefront of designing with for the user and should not be forgotten moving forward.
Design Goal: explicitly include details from user stories and personas in the dog matching survey. Implicitly consider user wants and needs through dog profiles and informational pages as well visual layouts and a transparent dog adoption process.
Define
Object/Action
For this part of the design process, I learned how to create the conceptual model for Matchdog. I was taught to do this by mimicking our language structure. Just as my user stories contained objects and actions, so will the website I design.
This type of abstract thinking was difficult to comprehend at first, but once it clicked I could see how important it was to visualize before jumping into prototyping.
We see here a condensed matrix of objects and actions that should be easy for users to understand and adopt while using the product.
Object/Attribute
The object-attribute was easier to understand and served as a great tool for visualizing the small, detailed and numerous content that should exist in the website or at least be considered in the user experience design.
Prioritization
The final part of this step consisted of taking all the content earlier defined and prioritizing its visibility and accessibility based on what should be visited most frequently.
I also saw this as an opportunity to take control over what I wanted to be accomplished from a business perspective. Obviously, I would want to sustain income (if not profit) and get as many dogs adopted as possible.
Takeaway: I am convinced that the best way to create a product that clearly communicates its functions and value is through first developing a strong conceptual model and defining parameters based on information gathered from the people who will use the product.
Design Goal: come up with the best visual expression of this conceptual model in the next step (Ideate) regardless of how many sketches it takes to find the right layout. Stay consistent with this model: if I choose an action-based approach, maintain that structure beyond just the homepage.
Ideate
Experience Flow
Next, I was required to create an experience flow for the most complex task/process in the website: completing a survey to be matched with a dog. Learning the language of this task took some time, but also mapping out the steps before having a visual product to work with was challenging. I succeeded in this task by focusing on the purpose of doing it in the first place: translate a complex process into a logical and easy to follow interface.
Sketches
This turned out to be the most challenging step of the design process for me. I grew up with computer interfaces of all kinds, but always from the user end. Working from the design end, with no fine arts experience proved very unnatural at first. But after many sketches, re-sketches, reading beginner visual design books, analyzing similar (approved) websites, and help from my professor, I was able to come up three worthy visual representations of my conceptual model.
Takeaway: For the experience flow, I learned that you don't need to already have a visually working product to come up with solutions to problems. As for sketching, I have a new found appreciation for web designers. Translating a conceptual model into different visual expressions requires creativity and practice, which is where sketching can save considerable time and effort.
Design Goal: Using what I learned from the experience flow, design all processes and tasks to have a logical flow and try to reduce the number of steps needed without overwhelming the user in each step. Maintain consistency of layouts for each screen through similar grids, but also include some variations so the user doesn't become confused which page they are on.
Prototype
I was nervous and excited to start prototyping for the first time and spent some time just figuring out where to start. Below is a result of my best attempt at applying everything I learned about interaction design, user experience design, and human factors principles of usability.
Please feel free to check out the prototype before and during the explanations below Matchdog Prototype
Home Page
My main goal for the home page was to use a simple, easy to understand layout and incorporate the prioritization matrix developed in Define.
Using the survey and browsing dogs was determined to be the most frequent user goal.
I also chose to add sections for Mutt of the Day and Recent Adoption to try and create an empathetic relationship between the user and website.
Below AI Match is a section for Robodog, Matchdog's corporate sponsor. Keeping in mind business goals is equally important.
Summary
Starting this project, I had the same approach as the previous one (Matchdog). The methodology didn't change, but my understanding of each step in relation to the final product certainly has. From Analyze, where my team and I created a foundation of mutual understanding of the product, to
Challenges
Understanding the idea of grammar in relation to building the conceptual model was very abstract which took a good amount of time to really understand and apply. Once I got into prototyping I could finally see how it applied to a product's interface and user interaction.
Prototyping in itself was challenging because I had to balance learning a complex tool, practicing visual design with little background knowledge, and applying all I had learned about the design process as well as human factors principles of usability from previous classes. My passion for design and producing the best possible product was my strongest motivator throughout this product.
Positives
What I enjoyed most about this project was coming up with efficient, smart and easy to understand solutions to potentially complex problems. I tapped into a passion for not only understand user goals, but allowing user to accomplish those goals to the best of their ability. This means providing all the tools and information necessary to make smart decisions and really take control of the task. I very much look forward to future projects with data visualization and business oriented interfaces.