Project Overview
I am designing an interactive website as the primary marketing engine for 60+ VP Organizations at AT&T.
I am collaborating with UX designers, developers, and leadership to generate creative solutions to showcase talents of 400+ current and 1.5K+ alumni TDP members.
The goal of the website is to reflect information about TDP for program marketing.
Some of this information includes our mission, our vision, who we are, locations that TDP is based out of, roles that TDP members are in, as well as being a place for potential Business Partners to request TDP help on their projects.
When I originally joined the team in March the team had already launched the website for desktop devices.
One of the first tasks that I was responsible for as a designer was to design the website for mobile and iPad devices.
Meet The Team
The TDP Website Management team consists of 10 talented individuals.
Caroline is our product owner, Abigail is our Scrum Master, Lanscy and I are the designers, Caroline, Henry, Sarah, Linsey, and Jose are all developers on the team.
The lead for the project is Michael Siruno who is the TDP Associate Director out of the Seattle office.
I have been fortunate enough to work with a talented team of designers, developers, and managers working on a website showing the amazing talents of the TDP group.
Personas
When we design the website, we must keep in mind the different personas that will be using the site.
There are four different groups of people that would potentially access the website.
First, current TDP participants such as myself and my peers.
Another group may be our current business partners or business partners interested in having a TDP join their team.
TDP leadership such as associate directors would also navigate to this page and use it as an easy resource to market TDP to other people in AT&T.
The last group that would use it would be TDP alumni. This is people that have graduated from the program and would like to keep up to date with things that TDP is doing.
Our Process
Now that you know what the website does, and who we designed it for, it is important to know how our team works.
We use agile methodologies on a regular basis.
Our team has weekly team syncs. During these meeting every member gives updates of the work that they have been able to complete and any important updates or roadblocks they are facing.
We have bi-weekly sprint planning sessions where we go over the Kanban board and keep it up to date and edit tickets based on progress made.
As a designer, it is important to update our designs to align with stakeholder interests.
These team meetings are important to us because it allows us to know what updates we need to make and the path going forward for the website.
After we finish one iteration of the design, we will let the management know and keep iterating based on their feedback.
Once the designs meet and exceed their expectations, we will hand off to the developers to implement the changes.
The developers will collaborate with us to clarify how we intended the website to flow and once they are ready, they will push their code out for implementation.
Once this sprint is done, the process starts all over again.
Tools Used
You may be wondering about the tools I use to design the website.
As a designer, I primarily work in Figma.
This is a great graphics editor and prototyping tool which is primarily web-based.
Figma allows us to share real-time edits with the team and collaborate easily with each other.
It is very easy to turn our designs into code as Figma displays some of the CSS formatting used in the designs.
Our Workspace
Our workspace in Figma has three main parts.
As I mentioned earlier, when I joined the team, we just had designs created for the desktop which is showed on top.
As designers, we were tasked with designing iPhone and iPad mockups and updating the desktop designs as we went through further iterations.
We have been given lots of creative freedom to design the iPad and iPhone mockups and had a clean slate when we started.
This was a lot of fun as it allowed me to make a lot of different sketches and work with the team to figure out what was the best flow and movement through the website.
We have made several iterations of the designs over the months I have been a part of the team and it is constantly changing every week.
Wireframes
I am responsible for creating the TDP website mockup for mobile devices.
I work closely with my fellow designer brainstorming ideas about how we should display information and work with leadership to make sure our designs meet their needs.
We have weekly meetings with the design team, developers, and leadership to make sure we are meeting deadlines and showcase our elegant high-fidelity user personas, journey maps, UX design mockups and wireframes, and storyboards.
The solutions page shows the proof of concept, teams based, and individual solutions that TDP provides.
The portfolio page shows you information that TDPs are working on and able to showcase the great things we are doing in the program.
The business partner testimonials page has blurbs from bps talking about the great thing that TDPs have been able to do for their team.
And finally, you will land on the Request a TDP page.
This is important for prospective business partners who might want to get a TDP on their team.
They can get more info about potential opportunities and get in touch with specific centers.
Key Takeaways
It has been a great opportunity to showcase the talents of 400+ current and 1.5K+ alumni TDP members.
I am looking forward to our next steps in this process where we are iterating on our designs.
We are organizing focus groups of each persona to provide feedback on our current design before we make changes to designs and user flows.
My role as a designer on a digital UX design team has given me tremendous insight on mobile and web development.
It has provided me with the knowledge on how our designs are developed and the front end process involved.