UX / UI
PORT
FOLIO Martha Brandt
Design Process
Card Sorting
User Persona Creating characters help to summarize and communicate research and aid in creating a scenario.
Research Understand the problem by researching and mindmapping to find the best approach.
Organize topics into categories that make sense and help label groups using post it notes or pieces of paper.
Story/Scenario Creating stories and scenarios allow me to explore the product from the user’s perspective.
Concept
Wireframing
After gathering research and user data, I beginning brainstorming solution to my findings.
Bulding out ideas through sketching and then build these iterated ideas out digitally.
Information Architecture Creating a hierarchical list allows me to prioritize essential functions and control the user flow.
User Testing User testing allow me to make any final changes that ensure that the final product is intuitive to the user.
AUVision App for University Magazine • Allow students to engage with the community around them through community service. • Find pain points with current students that use the chapel credit and community service system. The goal was to create an app for Envision Magazine that allowed students to sign-up for local community service
EVENT DETAILS
INTRODUCTION
events. Surveying the Andrews University population led us to discover that students felt required chapels were not engaging and inconvenient. Brainstorming ideas led us to create the function of signing up for community service events unique to each person’s spiritual gift. This project found that students want to be engaged on campus. This app caters to this desire by making chapels more meaningful by making each student’s spiritual experience unique.
Design Process Research
LOADING PAGE
Concept
Story/Scenario Information Architecture
Card Sorting
Wireframing
Information Architecture User flow helped to map out the information architecture
Loading Page
that emphasized student needs, while also mapping out the most important functions of the app before starting the design phase.
Settings
Home
Events
Home
Sign Up / Log In
View Events
Stories
Confirm ID
Refine Search
Spiritual Gifts
All Spiritual Gitfs
Event Details
Stories
Gift Decription
Get OP-ID Post a testimony about journey
LOG IN PAGE
Spiritual Gifts
Stories About Us
Privacy Policy
Log Out
View All Stories
Story Details
Submit a Story
Beijing Palace Website for Food Delivery Service • Create a clear ordering process • Allow online access to the menu to inform users of special offers
Aa
San Fransisco Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 456789
Aa
San Fransicsco
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9
The website needed to create a clear ordering process and be designed to fit the unique brand and it’s college based consumers. We tested initial website wireframes on frequenters to this restaurant. The goal was to understand the challenges consumers faced not having access to a website and the workarounds to common problems faced. This project led me to see that a strong web presence was crucial to the majority of the consumers because they were college aged. Allowing online ordering helped consumers to order and customize items faster without using the medium of a phone call.
Design Process Research Wireframing
Concept Information Architecture
Background color
Basic font color
Active buttons
Alert and actions
f2f3f4
050808
ef4145
3d4149
PAPER WIREFRAME
Wireframing The wireframing process allowed the use of information hierarchy to make it easier to plan the layout. The goal was for the consumer to process the information and place an order as easily as possible.
LOW FIDELITY WIREFRMAE
HIGH FIDELITY WIREFRAME
Featured Content This section serves as a call to action to view the full menu.
Special Offers This section allows you to see the specials offered that day.
Low Fidelity Basic content helped to map out the interface and visual elements.
Social Media Interactive scroll over to view current instagram posts
Caravan Envision Magagine App • Connect multiple drivers in a safe and effective way
LOGIN / SIGNUP
• Prevent the further use of texting.calling during the navigation phase It is virtually impossible to stay together, when traveling with more than one car. I realized that most popular navigation applications do not have a capability of connecting with others cars while traveling in groups so I decided to create one. I conducted interviews with users of Google Maps to get a sense of what kinds of improvements thisnew app could have. This app alllows you to use Bluetooth connections to see where others are on their journey as well as directions to that destination, creating a safer solution than talking or texting while driving.
ADD TO CARAVAN
Design Process Concept Wireframing
User Testing
Card Sorting
Information Architecture
Card Sorting Card sorting technique was used to help sort and label the content in a way that makes the most sense, and allows adjustments to the user flow before creating wireframes.
NAVIGATION
HISTORY
Advent Health User Experience Internship • Gather research and data about user through analytics • Interview current and potential employees to better understand how to improve the hiring process. • Create solutions to pain points found through research During my first user experience internship at a large health system, I was able to work on a project on the hiring website. There was an initiative to target veterans to work at Advent Health. One of the projects for me as an intern was to create the interface for this page. I worked with an outsourced company called RecruitRooster to create wireframes and implement this design. I conducted interviews with current employees at Advent Health that were veterans to get their thoughts and ideas for content on the site as well as include testimonials of their experiences.
Design Process User Personas Wireframing
Research User Testing
Information Architecture
Concept
PRESENTATION BOARD OF INTERNSHIP
Heatmap Analytics To get a better understanding of the users looking for healthcare careers, we used a technology called Hotjar to collect data on the users clicks, taps, and scrolling behavior.
Scrolling Shows the percentage of users scrolling to view more content
Movement Shows where users tap their finger on mobile and tablet devices.
Clicking Shows where users click their cursor on desktop devices.
AuMarketplace E-Commerce App •
Discover how students behave online while buying
•
Find pain points in the online buying experience
•
Create solutions to solve those pain points
I wanted to create a way for students to create business, start a cahs flow by buying and selling amongst each other
SUBMIT A STORY INTRODUCTION
in a private supportive community. interviewed students on campus and gave them tasks to purchase a book online. Through research and creating user personas, I discovered that limited the categories would make the user experience easier. The current categories include the most popular needs of coolege students including services, textbooks and clothing.
Design Process Research Story/Scenario Card Sorting
STARTING PAGE
Concept Wireframing User Testing
Get OPID
Storyboard
Post a testimony about journey
Storyboards allow me to put the user personas into situations to see possible pain points and visualize the solutions to the issues.
INTRODUCTION
Sarah is moving out of the dorms and realizes that she needs to sell some things.
Sarah mentions to Jack and Alice that she is thinking of selling her things on Ebay.
Alice tells Sarah about this new app that allows Andrews students to sell used goods.
Sarah checks it out because most of her items are useful to college students.
Jack downloads the app too because Jack is also wants to sell some things.
Sarah registers wit her ID and puts up one of her boxes of hangers up for sale.
Within a day, Timothy purchases this box from Sarah and comes to pick it up.
Sarah is a happy customer and decides to place more items up for sale.
Boulder Dog Website for Dog Food Supplier • Create a more responsive website • Create identical buying experience for users across different devices
Aa
Opens Sans Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3456789
Aa
Opens Sans
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3456789
• Create solutions to keeping content while the screen space changed. To make this a more responsive website, we kept most of the same content and information, but changed the way it is displayed and arranged based on the size of the device screen. This was the best option for making this website mobile friendly while keeping the information current customers needed access to. But content was limited as the screen space got smaller with devices such as tablets and cell phones. The goal of this redesign was to allow users to find the information they need as fast and as easily as possible.
Design Process User Testing Wireframing
Concept Research
Background color:
Basic font color:
Active buttons:
Alert and actions:
ECEEFO
ECEEFO
ECEEFO
ECEEFO
Responsive Layouts It was important that this application was mobile friendly so that users were able to make a purchase with multiple types of devices. During the concept and information hierarchy phase, content was based on the browser space available.
360 to 768px IPad and Tablets This breakpoint created through a media query of 120to 768 includes most iPads and tablets.
< 320px Cell Phones 768 to 1024px Computers This breakpoint created through a media query of 768 to 1024 includes large devices and screen sizes.
This breakpoint created through a media query of 320 and below includes most Iphone and Adroids.
LOGIN / SIGNUP
LearningHub Online Learning Environment • Notify students of inbox notifications and upcoming homework assignments • Find the pain points with the current web interface • Create solutions to solve those pain points LearningHub currently is a website that students use to turn in assignments and communicate with teachers. This app was designed for students to have easier cellphone access to LearningHub’s features. This was developed through storyboarding and personas to information architecture and final wireframing. After conducting some background research on how students currently use LearningHub’s website, we discovered that most students use LearningHub through their cellphones. The website’s cellphone layout is not very responsive and hindered efficient communication between students and teachers.
RESET PASSWORD
Design Process User Personas Story/Scenario Information Architecture
Research Concept
MAIN DASHBOARD
User Persona Created personas from researched data to help map out the user journeys and accurately create a user scenario. The following personas were used to understand the user characteristics, needs and goals.
James Davidson Age: 19
Occupation: Student
• Hardworking student • Lives off campus • Prefers studying at home • Owns a laptop and access to Internet • Works part time at the library
Ashley Morgan Age: 20
Occupation: Student
• Lives on campus • Always has phone in hand • Very busy, constantly in a hurry • Is taking an online history class • Prefers studying in groups
INBOX
CONTACT INFORMATION Email mbrandtdesigns@gmail.com Website mbrandtdesigns.com Phone 269-338-6497