Year: 2019 | Role: UI/UX Designer, Graphic Designer | Category: UI/UX Design
Project Background
Editekk is a technology startup within EnterpriseWorks that I designed the digital interface for to highlight the different types of services and products using their patented technology.
Web and mobile mockups were created in collaboration with a team of web developers and project managers.
Initial Research
What helped me the most in creating the wireframes for this project was creating a trend analysis for websites that, while not necessarily in the same field as Editekk, belonged in the similar sphere of science and innovation.
By analyzing certain design trends, it greatly assisted in how I wanted to structure the wireframes for visitors who either were familiar with the topics discussed or wanted to learn more.
Simons Foundation Trend Analysis
Supercluster Trend Analysis
National Geographic Trend Analysis
Low-Fidelity Homepage Wireframes
The workflow for website projects at EnterpriseWorks is to first design 3 homepage variations for the client to choose from. From there, the rest of the website will follow the same style as the homepage.
To begin, I used Axure to create low-fidelity homepage wireframes to get a sense of where I wanted the information and components to go.
Low-fidelity wireframe
Low-fidelity wireframe
Homepage High-Fidelity Wireframe
After creating the low-fidelity wireframes, I moved on to polish them into high-fidelity wireframes that incorporated the client's logo and brand colors, as well as the headline and body copy for the website content.
The design mocks were then shown to the client in order to communicate visually how the website could potentially look like, and for the client to choose which design to move forward with.
Homepage Option 1
Homepage Option 2
Homepage Option 3
High-Fidelity Design
Once the client chose the design they felt fit their vision the most, I moved on to create the rest of the website pages. I communicated with the client on what type of content and structure they wanted to include, and from there we went through 3 rounds of editing to come to the final website look.
Homepage
Technology Page
Team Page
Final Design
A brochure-like website that highlights what type of projects and technologies the team at Editekk works with.
Editekk website high-fidelity designs, July 2019
High-Fidelity Wireframes
Technology page
Media page
Contact page
Mood Board
Next Steps
After creating the website prototype, the project was handed over to a web developer. From there, I would answer any questions they had regarding where the components should go on the live website.
