Creation with ATION
Step 1 —
The Product:
ATION — UConn Digital Media & Design Student Agency Website
Imagine you are a brand new local business owner. You have your storefront, your employees, and your product; you’re ready to open up for business but aren’t sure how to best advertise in the digital space to reach your audience. It sounds like you need a digital marketing agency to help you develop a concrete strategy and well thought out marketing plan. Can’t afford one? ATION has the solution for you.
What is ATION you ask? ATION is a student run agency based out of the UConn Digital Media & Design department. The students in the course have a strong passion to create compelling digital marketing content whether it be social media white papers, informational graphics, video commercials, website redesigns, and even 3D models. Every semester the course partners with outside businesses to provide students with real life client experience and to provide the business partners with fresh, out of the box strategies and content that will help their brand stand out amongst the competition.
The mission of ATION is “ to influence all generations through our values of collaboration, imagination, innovation, creation, and conversation. We engage diverse audiences by communicating with a fresh perspective.” ATION provides a mutually beneficial partnership between students and business owners. So if you’re looking for quality content and are willing to provide students with an educational business experience, working with ATION is for you.
The Design Hierarchy of Needs:
Functionality
The ATION website serves its purpose to allow viewers/businesses to learn more about the services that Student Agency students / ATION offer. It also allows the viewer to inquire for more information. The navigation is broken up into four sections: Work, Services, About Us, and Contact allowing the viewer to click through the site to learn more about ATION. Although it is functional, the messaging explaining what ATION is could be a lot more clear and the process to submit a project could also be easier for the user to understand and access.
Reliability
As far as reliability is concerned, the ATION website is pretty reliable. Users are not looking to purchase or repeat actions on the site but instead learn more about ATION and inquire about the services. Although the contact page doesn’t go in depth on encouraging people to reach out if they have a project, there is a working contact form which is better than nothing.
Usability
For what it is, I’d say the ATION site has decent usability. The most important links are outlined at the top right and are clearly buttons. If businesses are looking for potential students to hire as interns (which is a secondary purpose of the site) they might get overwhelmed by the design of the Members page. All photos are showcased in rows that the user can click on to learn more about. This makes that landing page quite overwhelming and there is no way to search by skills. Additionally, there also are no filters for the semester the students were members of ATION, instead there is just a massive section for each semester making the user have to scroll down if they are looking for a specific semester. I wouldn’t say the site is unusable but it could definitely use work to improve it.
Creativity
Ok, so ATION is supposed to be a leader in creativity. As far as the site goes, it probably was fairly creative when it was first launched but with anything, it’s time for a face lift and relaunch to keep the brand fresh and exciting. The site is fairly clean and simple but considering the awesome work the students do, I think it’s lacking in creativity. If I’m a local business owner and I want someone to redo my website, I want to work with someone who is ahead of the trends (or on trend) because it shows that they are knowledgeable in the space. The work on the site is very creative and the sites design could definitely compliment and showcase the work and creative minds of ATION better.
UX Heuristics/Guidelines:
10 Usability Heuristics for User Interface Design
1. Visibility of system status
The ATION website’s use is simple enough that the system doesn’t really provide much feedback but it does keep the users informed about what is going on and what services are being offered. When feedback is needed it is provided, such as demonstrated in the contact form.
2. Match between system and the real world
The ATION website does a good job at making sure the content is written in a manner that is accessible to both marketing/design professionals and clients.
3. User control and freedom
The ATION website doesn’t have many opportunities for users to make mistakes or need to exit the unwanted state. It does offer freedom and ease of control though with the functions that are there. Users can filter between different types of content to find example projects that are inline for what they are looking to do.
4. Consistency and standards
One thing the ATION website does fairly well is having consistency and standards. For example, all of the buttons are the ATION orange with white text and the main navigation is orange text. This allows the user to easily know what text is clickable.
5. Recognition rather than recall
The instructions for submitting a request to work with ATION are not clear what-so-ever. Having a “steps” page or an inquiry page would be beneficial. Due to the nature of the site, there really is not that much of a need for instructions anywhere else on the site. I do think the information that is on the site currently is easily accessible.
6. Flexibility and efficiency of use
Options that allow expert users to cater their experience based on speed and previous interactions isn’t really necessary in this case as the website serves more as an introduction to ATION. If a client wanted to return and work with ATION again, they would most likely reach out to the students or professors they worked with last time.
7. Aesthetic and minimalist design
The ATION website is pretty minimal and on brand. It provides information that assists the viewer in gaining a better understanding of the student agency and their services. The design could certainly be improved but it’s not completely outdated or unappealing.
8. Help users recognize, diagnose, and recover from errors
Actually while testing the one section on the website that could have submission errors from the user, I learned the the contact form isn’t working… so there is no feedback for successfully submitted emails at the moment but the website doesn’t provide feedback that the email did not go through. That’s something that will need to be fixed…
9. Error Prevention
There are not many opportunities for the user to experience errors on the website. The form is created to be simple and user friendly allowing users to easily inquire about the ATION services — granted the form is not currently working.
10. Help and documentation
There isn’t really much help or documentation on the ATION site. The services do list what clients should expect but the contact form is the only section that offers any real opportunity to ask for help or seek answers and with that not working, potential clients would have to go to ATION’s social media channels to request more information. I don’t know about you but if a contact form doesn’t work, I probably would not choose that agency to work with. At this time, most of ATION clients are from word of mouth from past clients (yay) but it would be nice to generate clients through the website.
Step 2—
UX Personas/Stories High Priority Stories:
User Stories
Primary User Persona: THE CLIENTS
Persona 1: Start-Up Business Owner — Client
Meet Joel Salisbury, ATION’s primary user/target. Joel is a young and energetic business professional who recently launched his latest business venture, an interactive web agency (Salisbury Solutions) that will provide creative web and interaction experiences based out of New Haven, Connecticut. He is incredibly passionate and eager to build his business and start working with new clients. Joel is also very tech savvy, has social channels and a sweet website to promote his business but is looking at all of his options to ensure a successful official business launch.
Joel’s main reason for visiting the ATION website is because he needs an affordable and innovative way to market Salisbury Solutions. His goal is to put his brand at the forefront of all agencies in the tri-state region. Essentially, he’s looking for a way to promote his brand without breaking the bank but also with top quality to live up to his brand/standards. Because Joel is so busy getting his business up and running, he doesn’t have time to sit online and weed through all of his agency options. In order for Joel to want to work with the Student Agency ATION team, he will need to be immediately impressed with the homepage of their website. He will want to quickly be able to see the scope of the past projects. Joel needs to see it to believe it — if the ATION website doesn’t quickly impress him he will lose interest and Google another agency.
Not only is Joel’s time valuable but another big motivator for Joel is price. He already knows he can’t afford a top marketing agency at this time but he still wants top quality work. It’s important to Joel to know right off the bat how much he will have to invest into the partnership regardless of which Agency’s site he is on. This makes it imperative that the Student Agency ATION website lists itself as is a free service (donations encouraged) in a clear and concise manner — or Joel will go elsewhere.
Joel will really only use the ATION website to conduct research to see if working with the agency makes sense for his business goals. Since ATION’s website’s main interaction goal is to be the “main hub for the agency” and resource to gain clients, promote work, and show off the students, the fact that Joel is only using the website as a touchpoint to learn more about ATION and hopefully inquire about working with the agency is exactly what was intended.
Persona 2: “Old School” Business Owner — Client
Meet Mike Vertefeuille, also in ATION’s primary user/target. Mike has owned and operated a local insurance agency for over 30 years in Connecticut. He is highly personable, loves to crack jokes, and is well known in his community. Mike is also a big family guy — not only does he have 5 kids (so literally a big family) but he also prides himself in treating all of his clients like family. He knows his way around a computer but his Insurance website is severely out of date and although he has social channels, he has no one on staff dedicated to managing them. Mike doesn’t have the time to spend on learning how to use social media to bring in new clients but he is looking to expand his client base outside of his community.
Mike’s main reason for visiting the ATION website reflects exactly that — he needs help developing a digital marketing strategy to reach new clients and also stay relevant in a digital landscape. As of lately, he has had a harder time competing with the big chain insurance companies and knows it’s time to adapt and look into new marketing options. Just like Joel, Mike’s main purpose of visiting the ATION website is to quickly see if the partnership will be mutually beneficial.
Unlike Joel, Mike doesn’t have as high of standards — he is easily impressed with a website that is user friendly but doesn’t really pay too much attention to the design other than “does it look good and work?” For Mike, he wants to easily see and read about the types of services ATION offers (there are things that he may realize weren’t even on his radar that he needs help with) and see examples of work. Mike is also more impressed with the list of client names than Joel would be. Additionally, testimonials from previous clients reassure him that the work will help his business. Although he’s not as concerned about the price as Joel, he still wants to quickly and easily understand exactly what Student Agency is and the cost/expectations of the partnership.
Lastly, Mike also may be willing to hire interns to help continue the digital marketing efforts that ATION begins. Because of this, he may come back to the website to look at the student bios.
Secondary Users: Hiring Managers, Talent Recruiters, Current & Prospective Members
Persona 3: Hiring Manager
Meet Stacy Webb, the one and only hiring manager for the local Connecticut Television Station. She knows just about everyone in the media industry in Connecticut and has earned respect from the top Directors, Actors, and Producers in the local business. Stacy makes all of the ultimate decisions on who is hired. Although she is not easily impressed but she acknowledges potential and is really passionate about the TV station’s internship and education opportunities.
Stacy came across the ATION website when she was looking online to recruit new interns for the TV Station’s latest internship and education programs. She is looking for talent that will create a mutually beneficial partnership but also potentially funnel top interns into their early employment program. Because of Stacy’s role, she has seen a lot of work and when looking at student work online she wants to easily and quickly be able to scan for skills and portfolio examples to indicate immediately if the student is a good match for their company and company’s culture.
Since Stacy is incredibly busy, the student sites that she continues to refer back to are ones that are incredibly organized and include student bios that are clearly written and organized — more important easy for her to quickly scan for keywords such as project management experience or director of cinematography experience. Stacy takes immense pride in everyone she hires because they are hand selected among a selective pool of applicants. Therefore, ATION’s website must also enable her to easily access how to best communicate with the members she thinks would make a good addition to the intern team. If it takes too much effort for her, she will no longer recruit through this process as her time is valuable. However, if the website is concise, user friendly, and meets her needs, she will be a repeat user and continue to build the TV Stations relationship/partner with ATION.
Lastly, Stacy should easily be able to contact ATION if she is looking for specific skills and doesn’t have the time to go through each bio that are tagged with the skills she is looking for. Having a simple contact form to share requests and internship opportunities also makes Stacy happy. A happy Stacy equals happy ATION members with internship opportunities.
Persona 4: Current ATION Member
Meet Hanna Marchini, a senior and current 2nd semester ATION member. She is well organized and articulate which makes her a reliable co-project manager. She’s passionate about design and is very involved outside of the classroom. She is very tech savvy and runs a successful blog on all things related to cats, pizza, and design. Hanna is an online influencer herself and is looking forward to graduating and using her ATION skills outside of the classroom. Because of this, she really strives to put her best foot forward online to showcase her talents and work experience to help her reach her career goals and get a job post grad.
Although she runs a hip blog in her free time, she is spread pretty thin between her full plate of classes, on campus job, and multiple clubs she is involved with. Hanna has not put the time into updating her portfolio site or LinkedIn. Having a bio section on the ATION website that is required in the class to maintain (which will force her to fine time to write and/or update) is a simple way for her to have clients find her or to share work she has done. She can include the link to her finished projects on her resume or share them on LinkedIn.
Not necessarily a top priority functionality wise of the site but it would also be nice if Hanna could log in to the website and update her bio when she has the time. This would allow her to link to her blog and then potentially link to her portfolio website in the future when it’s ready to be shared. This also opens the opportunity for Hanna to edit the bio when she is an alumna.
Persona 5: UConn DMD Freshman (Future ATION Member)
Meet Tim Morris, an extremely eager freshman from New Hampshire who has interests in 3d animation, web design and development, and game design. He is not certain which area he would like to concentrate in yet but is excited to take as many classes as possible to build up his skills. Tim, specifically, is interested in the unique client and real world class experiences that UConn DMD provide. He was told briefly about Student Agency — ATION when attending orientation but isn’t sure how to get involved as a freshmen.
Tim grew up eating, sleeping, and breathing technology. He has been ready since yesterday to jump in on professional projects. In addition to hearing about ATION through word of mouth, Tim found the direct ATION website link through their Instagram channel. Tim was browsing one day when he came across a few of his older friends comment on their posts and UConn DMD reposting/tagging ATION. Curiously he visited the website to learn more.
As a secondary user and someone who will be a future ATION member, his main use for the website is to hype him up to get excited about the opportunities he will be given when he takes ATION. The site also showcases past projects which helps Tim get a better idea of the possibilities of work in different concentrations and how they live in a professional space. Tim will have to wait until he is an upperclassman to take the course but it again, gives him something to look forward to. Building ATION’s website as a way to showcase that ATION members are leaders in the digital space helps build the overall brand.
Suggested list of views for High Priority Stories
- Home Page
- Work/Case Studies Page
- Contact Page
- Team Page
- Individual Bio Pages
- Services Page
- Login for ATION Members (medium priority)
Step 3 —
Low-Fidelity Wireframes
After completing the user stories and diving into the mindset of the marketing and web personas of the primary and secondary audiences, I developed low fidelity wireframes to start the website redesign process. Before jumping into this, I also researched and looked at the top agencies in the world to see how they are communicating their services online. One of the biggest take aways was making the personalities of the agency team members really stand out. This means using an ample amount of pictures and also writing the copy in a manner that makes the agency approachable, fun, yet professional.
See full wireframes below:
Flow Diagram for Stories from View to View
Homepage — The user must scroll down on the homepage which will give them the option to learn more about ATION’s Services, Team Members, and past projects. Once the user is off of the homepage, they can use the top navigation to click back and forth between the Services, Team, Case Studies, and Contact/Let’s Chat Button.
On both the Case Study and Team page, when the user’s mouse is hovered over a picture it will change to an orange overlay and indicate the name of the company/location or name of the team member, concentration, and email. All of the projects and team members will be tagged based on their involvement with which type of project, for example, all video projects. There will also be a tag for project managers and alumni to make it easy for potential hiring managers to see who might be available for a full time position right away or who has leadership skills.
High Fidelity Prototypes
After developing the wireframes and thinking about the overall flow of the site, it was time to develop a high fidelity prototype. Understanding that the audience of the website was first and foremost potential clients or hiring managers drove the language and overall structure.
Now ATION just needs a solid web team next semester to actually implement something with the primary users and secondary users stories in mind!
