User Experience and User Interface (UX/UI) Design

Role 

UX/UI Designer and Front End Developer with a team of 2 UX/UI designers and 4 Back End Developers

Timeline

5 weeks

Deliverables

Client Presentation

UX Research Report

Responsive Website - HTML5 and CSS3 fully integrated with PHP and C++

Tools

Adobe Illustrator, Photoshop, InDesign

Sketch

Bootstrap

 

For my senior capstone class, I paired up with a team of Media Arts and Design and Computer Information System students to create a fully functional site for a client with a business problem. The solution involved combining front-end design with back-end development. 

To create an elegant design, we worked in a very short time span on a content design strategy which included:

  • requirements analysis

  • user experience research

  • target audiences and personas 

  • site mapping

  • content inventory and audit analysis

  • visual design concepts

  • wireframing and mockups

Our final product combined this user interface design and front end styling into a seamlessly hand-coded responsive website.

Below is a description of each segment of analysis and design.

Requirements Analysis

The Business Problem

4M Ecosystems encourages business growth by connecting large networks of entrepreneurs and companies. Regional administrators have large networks, or "ecosystems", of money, mentors, management and markets. The current website, 4M, is meant to organize these networks. However, the website is not fluent in managing these networks and providing a place for people within them to connect. Based on extensive user research and understanding the client's needs, our team of designers and developers created a hand coded, seamless responsive website portal and ecosystem called “Cohere.”

Client Design Goals

  • Virtual network for startups, talent, mentors and investors to connect in a physical community

  • Administrators need a database to access, analyze, and connect their ecosystems

Design Question

How might we improve the experience of ecosystem administrators, startups, talent, mentors and investors in order to create valuable connectionsonline?


User Experience Research

Research Questions

  • What can an administrator currently do on the beta version of the site?

  • What is the process of a startup from conception to success?

  • What are the roles of talent, management and market, interested in joining an ecosystem?

  • How does a mentor determine value in entrepreneurs and provide guidance?

  • What qualities does an investor value in startups and how do they get involved?

  • How does each user have autonomy to contribute while maintaining private information?

 

Approach - Research and Interview Process

Each group member reviewed the current system in place to determine the current needs of the site. For further information about each user role, each member searched online to discover the process of a startup company and how talent, mentors and investors connect with them. Interviews took place online, through social networking and email, to discuss with professionals in the field. Feedback was given from talent and mentors in the startup business. The team’s project manager also targeted specific questions to the administrators of the current site. Further online research was completed on investors to gain insight.

 

Final Design Requirements - Based on Analysis

  1. The site must be easily navigable and current, as the business of startups is nuanced and constantly changing

  2. The administrator role must have the ability to view and analyze users, facilitate connections and manage their ecosystems

  3. Qualifications must be reputable for each user profile or startup profile and include updates

  4. Each user should have autonomy to describe their needs because each will differ greatly

  5. Search options will have classifiers to filter by needs

  6. The users must be able to make online connections and message one another.


Target Audiences and Personas

The Users

To initiate users visiting the 4M site, there must be an understanding of who can join and the value of each of these roles. After discussion with the client, the developers and designers designated user roles altering the 4Ms - Money, Mentors Market and Management to Investors, Mentors, Talent, Startups and Ecosystem Admins. This name change was integral to connecting with the correct audiences to market the site's goals of further creating networks.


Information Architecture

Site Map and Content Inventory


Visual Design Concepts

Typography and Color Scheme

Screen Shot 2017-02-21 at 1.45.38 PM.png

To create a bright and modern feel to the networking site, we chose a soft blue palette with vibrant accents and clean fonts for readability.

Logo Design

CohereSpread_01 (1).gif

After initial discussion with the client about creating a place where each consumer has the ability to connect, we chose the final brand name "Cohere" - find company here and your bright ideas can meet their full potential.


Wireframes to Bootstrap Mockup


Final Thoughts

A Seamless Solution

Cohere means to be united or form a whole. This conceptualization provides an ecosystem that enriches mentors, talent, startups and investors to form wholesome connections. Through these initial discoveries, an individual can flourish in their industry. Thorough research provided a basis for the live version that combined designers and developers skills into an eye-catching user interface. The collaboration in this project was vital to creating a refined finished product.