The Vision
Create a new application for a corporation with emphasis on mobile.
The target audience will use this tool to learn about new products, purchase products, get up-to-date information, and navigate to the products they want purchase with ease.
The Brief
Goal:
To create an application for mobile, tablet, and desktop e-commerce purchases and sell products more efficiently.
Team:
Copy Writer- 1
Graphic Designer/Visual Artist- 2
UXUI Designer- 1 (myself)
Developer- 1
My Role:
Product Designer
UX Methods used:
Content Evaluation
Comparative/Competative Analysis
Site Map
Userflow Diagrams
Task Analysis
Moscow Method
Wireframing High/Low Fidelity
Prototyping
Google Analytics
Systems used:
Axure
Adobe Photoshop
Adobe Illustrator
Bootstrap
-
User centric approach- My initial design decisions were based on collaboration with copy writer, in-depth competitive/comparative analysis, user research, current market trends in UI, and qualitative data.
-
Content Management: I received powerpoint presentations, excel spreadsheets, and word documents from the stakeholders which I then organized, restructured, and identified the deliverables. I took on the role to manage all the content and organize it for optimal use. I was able to determine what content needed revisions, and what was able to be used as is. I then created the list of product backlog items, created sprint planning, and devised a list of final deliverable and timelines from there.
-
After developing the sitemap I brought concepts to life by creating prototypes at all levels of fidelity for testing and approval.
-
I used multiple design tools to create and illustrate the future product we are working towards. I made working prototypes for evaluation.
-
Throughout the development phase I continually iterated the UI for success and user satisfaction. In Axure I produced a fully working prototype with annotations for our developer to build our new application.
-
Throughout the development phase I worked side by side with our developer to ensure we were meeting stye guidelines, identifing requirements as the project progressed, and meeting tight deadlines
-
Conditional testing- We were able to recognize potential issues, make recommendations, and revise.
-
Successfully took a big design challenge, and launched a product for builders, designers, and users that utilize user centric methologies.
Style Guide example:
The Style Guide was developed to provide a comprehensive understanding on the look and feel and show how to correctly implement a new design elements with consistency. By building this framework it allows us to make corrections, edits, updates faster.
The guide includes:
Tone- inviting and informative
Content- easy to read structure for a clear message
Redesign - consistency and evolution of updates
Web Guidelines- help maintain consistency throughout
Visual Content -typography, color palette, sizing, layout, and tone
The Style Guide is the main component that plays an important role in establishing the overall style. By creating this guide it shows we value creating good, consistent content - now and in the future.
Sitemap example
Using a sitemap was vital to the success of this project. The sitemap helped classifying and organizing the content. It was used as a centralized planning tool that can helped organize and clarify the content that needed to be on the site, as well as helping eliminate unnecessary pages.
Wireframe examples for desktop & tablet:
Wireframe examples for mobile
Mobile design and design for other devices such as laptops and desktops does not mean producing the same product, just smaller.
The limitations of screen real estate mean that less is more. You need to keep features to a minimum. You have to focus on the key tasks the user wants to carry out and you will have to drop stuff from other platforms to make mobile work
I purposely left the pink guide lines on these visuals to emphasize the very limited real estate that mobile has to work with.
Next Steps
User testing, data analytics tools, and quantitative data. My goal for further completion of the project is to evaluated the effectiveness of the product and if needed, redesign to meet user needs.